タグ

*cssに関するNissaのブックマーク (12)

  • cssの情報・まとめ

    cssの情報まとめです。ローカル 環境にストックしていた情報を 開放してみますのでシェアして 頂ければ幸いです。内容は 結構偏っていると思いますので 参考程度になさってください。 全てのcss情報が有るわけではありません。主観でストックしていたリンク集です。ツールとかメニュー関連とかハックとかいろいろ188の情報です。 ツールオンラインのcssツール。 CSS Validation Service / W3C検証サービス日語版RoundedCornr / 角丸のHTMLCSSコードを生成してくれるCSS Type Set / ファミリー、色、単語間、行間等をプレビューで確認CSS Text Wrapper / 様々な形のテキストの回りこみを簡単に実現できるCSS Builder / オンラインでスタイルを生成可能Spiffy Box / cssによる角丸を簡単に生成The Box Of

    cssの情報・まとめ
    Nissa
    Nissa 2010/01/21
  • とっても使えるoverflowプロパティ。その使い方色々。

    光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ~と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ! これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し!!(わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに

    とっても使えるoverflowプロパティ。その使い方色々。
    Nissa
    Nissa 2009/11/02
  • 5 CSS tricks with lists | Pieter Beulque

    Here are some creative ways to style unordered (ul), ordered (ol) or definition (dl) lists. Take a look at the demo for what we’re going to do. 1) Ordered list: Different styles for numbers and content This one is very easy, but gives some nice results. The idea is simple, we create a ordered list and place the content between span tags. We style the ol with CSS, then style the span. Here’s the co

    Nissa
    Nissa 2009/08/09
  • Redline Magezine::敢えてCSSでイメージマップを実現するサンプル

    1. ファイル なんかのファイルですねぇ。 2.植物 なんかの植物ですねぇ。 ●用意するもの ・CSS無効の場合のための画像 ・CSS有効の場合に使う画像(今回は1枚にしたけど、別に通常用とhover用2枚にしてもOK) CSSソース <style type="text/css"> <!-- img.image{display: none;} dl#imagemap{ margin: 0; padding: 0; background: transparent url(xxx.jpg) top left no-repeat; width: 500px; height: 374px; position: relative; } dt{margin: 0; padding: 0; position: absolute; font-size: 85%; display: none;} dd{ma

    Nissa
    Nissa 2009/05/26
  • hail2u.net - Weblog - floatで並べたリストのセンタリング

    ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる

  • Advanced CSS Menu - Web Designer Wall

    Last tutorial, I showed you how to design a watercolor effect menu in Photoshop. This tutorial I will show you how to slice up the menu design (step by step) and put them together with CSS. Most of you probably know how to code a horizontal or vertical CSS list menu. Now let’s take it to the next level — code an advanced (un-typical) list menu utilizing the CSS position property. View Demo CSS men

    Advanced CSS Menu - Web Designer Wall
  • http://www.designwalker.com/2009/01/web-layout.html

    http://www.designwalker.com/2009/01/web-layout.html
  • jQuery を高速に使う CSS セレクタの書き方 - てっく煮ブログ

    JavaScriptjQuery は CSS セレクタで要素を選んで処理できるのが魅力的ですね。そんな jQuery ですが、CSS セレクタの書き方次第で速度が大幅に変わってきます。ここでは jQuery の内部処理を疑似コードで示しつつ、jQuery を高速に使うためのポイントを5つに絞って紹介します。何度も同じセレクタを実行しないクラスだけを指定するのは禁止#id を積極的に使う途中までの結果を再利用する子供セレクタ(>)を使うと速くなることがある※ この記事は jQuery 1.2.6 のソースコードを元に記述しています1. 何度も同じセレクタを実行しない改善前 // 例題 1 $("div.foo").addClass("bar"); $("div.foo").css("background", "#ffffff"); $("div.foo").click(function(){

    Nissa
    Nissa 2008/12/11
  • 2008年のCSSベストデザインサイト集:phpspot開発日誌

    Best of CSS Design 2008 2008年のCSSベストデザインサイト集という特集。 これは、と思う物をピックアップしてみました。最新のデザインを見ることで勉強になりますね。 Let It Bleed Vermont Coffee Works Digital Mash Good DrupalCon, DC Future of Web Apps - Miami 2009 Future of Web Design - NYC 2008 Tennessee - Fall Tennessee - Spring Tennessee - Summer Tennessee - Winter LightCMS The First Twenty Luke Larsen Design Disease Adaptd Jason Santa Maria Electricurrent Mochi A

  • TRANS [hatena] - 印刷用CSSをまとめてみた。

    以前、絵文禄のことのはさんのところで、サイトの横幅を640ピクセルにする理由――統計と現状に基づく結論というエントリーがあった。それから、ちょっと印刷用CSSに興味を持って、色々と調べてみたり、自分で書いてみたりした。そのまとめ。 ちなみに、#naviがグローバルナビゲーション、#primaryがメインコンテンツ、#secondaryがサブメニュー、#footerがフッター。 とりあえず、最低限やっておいたほうがよいこと。 body { font-size: 12pt; color: #000000; background-color: #FFFFFF; } a:link, a:visited { text-decoration: underline; color: #000000; } img { border: 0; } 印刷で読まれることを勘案するのなら、font-sizeはある程度

    TRANS [hatena] - 印刷用CSSをまとめてみた。
    Nissa
    Nissa 2008/12/05
  • よりよいウェブ開発者になるためのFirefox 3のアドオン10選 - builder by ZDNet Japan

    みんなが使うMySQLの企業活用 なぜ有償サポートがあったほうが良いのか? 有名テクノロジー企業もOracleに頼む理由 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 リスクのある暗号資産取引を追跡 ブロックチェーン分析を利用し 暗号資産取引の健全性向上を支援する! 特集:セキュリティトレンド-秋- つながる世界で問われる対応 サプライチェーンセキュリティを考える 今を知り、未来を見据える 培ってきたノウハウを最新技術へ対応させる レガシーシステムのモダン化実現への道 DX推進を阻害する3つの要因 プロフェッショナルが語る データ分析・データ活用の実現 中小企業のひとり情シスの現実 夢か幻か、はたまた現実か? ヘルプデスク業務の週休4日制を考える ともにDXを推進する コンテナ化されたワークロードを管理 継続的な価値を

  • http://youmos.com/news/iefixed_htc

  • 1