使えるCSSテクニック101選 part1
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でより目立たせる方法。以下のリンクはヘッドラインのデザイン一覧など。
-
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
。
Loading ...
2008年1月20日 3:49:12
【日記】− 翻訳していたのだけど…
Contents of this article
1．”CSS Sprites” - CSSスプライト
2．”CSS Rounded Corners (more…)