440design Beta

101CSS Techniques Of All Time - Part1

Noupeさんより「CSSテクニック101選」。今回はパート1ということなので、101コないんですが。
こういったテクニックに詳しい方には特に目新しいものはないかもしれませんが、よくまとまっていると思うので、メモ代わりに。サンプルへのリンクと簡単な説明もつけてみましたので、どうぞ。

• CSS Sprites

  CSSスプライトは、CSSのpositionを使って1枚の画像の表示される位置を変えるテクニック。HTTPリクエストを軽減してくれる上に画像が1枚で済むので、アクセシビリティ、ユーザビリティに効果的。アイコンや飾りの要素に使うのがベスト。

  CSS Sprites: Image Slicing’s Kiss of Death

  サンプル：1(使用画像)

  サンプル：2(使用画像)
  こんなイレギュラーな形にも。
  

  CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

  テクニック使用前

  HTTPリクエストは10回、トータルの画像サイズは20.5KB。

  テクニック使用後

  HTTPリクエスト1回、画像サイズ13KB。たしかにさっさと表示されます。
  ※ただ、このサンプル私の環境(Mac+Firefox)では各アイコンの下に画像が見えてしまっています。

  サンプルのダウンロードもできます。

  CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance

  Yahoo!とAOLもこのテクニックを使用しているようです。ロールオーバーに使うというイメージがありますが、こういった使い方もありなんですね。
  

• CSS Rounded Corners

  角丸はもっともよく使われるテクニックですが、結構めんどうだったりします。そこで、簡単な方法はこちら。

  Even More Rounded Corners With CSS

  サンプルとHow to。

  幅や高さがある程度変わっても大丈夫なようにネストされた<div>とでかい画像(800×1600)を1枚使っています。
  

  Rounded corners in CSS

  サンプルも同じページにあります。4つの角丸画像をつかうタイプ。左の2つの角丸は直接HTMLに、右の角丸はCSSで表示しています。背景に画像があるときは向かないかも。

  Liquid Rounded corners

  サンプル

  こちらも画像を1枚使用。

  Mountaintop Corners

  サンプル1

  サンプル2

  2枚の角丸画像、マークアップには<dl><dt><dd>を使用。
  

• Image Replacements Technique

  このテクニックはよくヘッドライン（h1とかh2）のHTMLテキストを画像と置き換えるために使われます。使用については賛否両論あり。この方法を使いたい人は、このぺージのGilder/Levin Methodを、テキストにリンクが貼られていてかつMacIEにも対応する必要があるならthe Gilder Levin Ryznar Jacoubsen IR methodに目を通すと良いかも。

  Thierry Image Placement

  音声リーダー、画像を読まないようにしてあるブラウザ、スタイルシートを指定しないブラウザから、テキストサイズを変えた場合、MacIEにまで配慮したテクニック。

  サンプル

• Sliding Doors

  スライディングドアテクニックのおかげで、シンプルでテキストベース、かつ意味のあるマークアップで、見た目にも素晴らしいインターフェイスを作ることができるようになりました。2つの背景画像を使えば、テキストのサイズによって拡大縮小するフレキシブルなメニューが作れます。

  Sliding Doors

  サンプル
  

  ここでもCSS Spritesが使ってあります。

  “Sliding Doors” Box - Rounded Corners for All

  このテクニックを使ったもう一つの角丸コーナー。

• Image Text Wrap Technique

  このテクニックを使えば画像周りのテキストの回り込みをコントロールできるので、雑誌のようなページレイアウトができます。

  Sandback Div

  このページ自体がサンプルになってます。この例では空の<div>が12コ(!)使ってあります。続きもあり。
  

  その他のサンプル <div>3コ <div>5コ

  Image floats, without the text wrap!

  サンプル

  Fancy text wrapping around an image

  サンプル
  

  これも同様に空の<div>を多用しています。

• Equal Height Technique

  要素の高さが必要分しか伸びないのって、CSSの苛立たしい特性のひとつ。じゃあどうやって全てのカラムの高さを合わせればいいか？解決策がいくつか紹介されています。

  Faux Columns

  カラムのように見せるのに背景画像を縦方向にリピートさせる簡単な方法。

  Equal Height Columns

  サンプル（Operaでの問題を修正したもの）

  背景画像なしで実現。方法は

  • 高さを揃えたいカラムをcontainerでラップ。
  • containerにoverflow:hiddenを指定
  • カラムにpadding-bottomを指定（かなり大きい値、ただしブラウザが解釈する限界値32767pxまでにすること）
  • 上で指定したのと同じ値のマイナス値をmargin-bottomに指定

  このままではSafariやIE Mac、Opera、Netscapeでいくつか問題点もあるようです（解消されているものもあり）。詳細は元記事をどうぞ。

  Equal Height boxes wish CSS

  サンプル

  display:table、table-row、table-cell等を使う簡単な方法。残念ながらIEでは意図した通りの表示になりません。
  

• Turning A List Into A Navigation bar

  なぜナビゲーションにリストを使うのか？なぜならナビゲーションはリンクのリストだから。マークアップにlistを使うのは、最もセマンティックな方法です。CSSが読まれなくても正しい構造で表示されるという利点もあり。

  Turning a list into a navigation bar

  サンプル
  

  Uberlink CSS List Menus

  サンプル

  CSS Menus

  サンプル

  階層化された（プルダウン）ナビゲーション。
  

  Listmatic

  リストを使ったさまざまなナビゲーションの例。

  7 Advanced CSS Menu

  リストナビゲーションの応用例7つ。

• Making Headlines With CSS

  h1やh2などのヘッドラインをCSSでより目立たせる方法。以下のリンクはヘッドラインのデザイン一覧など。

  Heading Style Gallery

  Typography for Headline Showcase

  Making Headlines With CSS

• CSS Shadows Techniques

  内容によって大きさが変わる要素に合わせてドロップシャドウを表示する方法。

  CSS Drop Shadows

  マイナス値のmarginを使用する方法と、影になる画像と「にせの」オフセット用画像の2枚を使用する方法（下図）など。
  
  より自然なシャドウにする続きもあります。
  

  Fun with Drop Shadows

  position:relativeを使用する方法。

  CSS Drop Shadow Tests

  上のCSS Shadows Techniquesの記事を検証して、より短いコードにしたもの。

  An improved CSS shadow technique

• CSS Transparency

  背景と前景の透過を変えるのはCSSデザインのなかでもコントロールが難しいもののひとつ。以下はそのベストな例です。

  Partial Opacity

  4種類の方法が紹介されています。
  

  Cross-Browser Variable Opacity with PNG

  PNG画像を使って、かつクロスブラウザーを実現。AlphaImageLoaderまたはjavascriptを使用する方法が紹介されています。

  サンプル：1 画像の上に半透明の画像

  サンプル：2 透過なナビゲーション

  サンプル：3 floatしてる透過ボックス内に文章
  

  Two Techniques for CSS Transparency

  同じくAlphaImageLoaderを使う方法（サンプル）と、1ピクセルの白ドット×透明部分の半透明に見えるgifを使う方法（サンプル）。

• Various Link Techniques

  Showing Hyperlink Cues with CSS

  リンクがサイト外か、ポップアップは開くか、ファイルへのリンクかどうか…などを知らせるための小さいアイコンをリンクの隣に表示する方法（モダンブラウザとIE7のみ）。

  The ways to style visited links

  CSSで訪問済みリンクがよく分かるようにする方法。

  Link Thmbnail

  サンプル

  リンク先をjavascriptとCSSで画像として表示する（最近あちこちでよく使われているSnapshotsのような感じです）。コードがダウンロードできます。

  Iconize Textlinks with CSS

  アイコンとCSSがダウンロードできます。Iconizeについてはこの間記事にしたのでよかったらそちらもご覧ください。

Part1は以上です。Noupeさんで続きがポストされたらまたこちらにもポストするつもりです。
文章は（いつもどおり）超意訳です。原題は「of all time」となっていて、史上〜の、とか、空前絶後の、みたいな意味らしいんですが、それほどぶっとんだ内容でもなかったので、ひかえめに「使える」にしました（注：この件については下の「またまた追記」を参照のこと）。

[part2] 使えるCSSテクニック101選 part2

[追記]
こちらの記事も101コのCSS Tips・チュートリアルへのリンクをまとめてあります。
101 CSS Tips, Tutorials and Examples

[さらに追記]
かの有名なホームページを作る人のネタ帳で同記事が取り上げられていました。私の記事よりずっと簡潔で読みやすいのでどうぞ〜。
101のCSS技術というエントリから英語が苦手な人向けのエントリ抜粋

[またまた追記]
上記ホームページを作る人のネタ帳のコメント欄で「101は基礎の、という意味じゃないでしょうか」という指摘があって、念のためネタ元のNoupeさんにメールして聞いてみましたら、確かにそっちの意味で、101コというわけではないらしいです。なので「of all time」の件も、「いつも使える」くらいの意味だと思います。わあー恥ずかしい。私の英語力も大したことないです。すいません…。精進します。

• 聴いている曲: 思い出したようにEvanescene。

2008年1月15日火曜日 20:10:28  カテゴリー:Web Design
よかったら、コメントまたはトラックバックしてください。
トラックバックURL