実験から実践段階へ
Googleも採用！CSS3実践テクニック
2009年11月24日 14時00分更新
ブラウザーによって異なるCSS3の実装
作業に入る前にCSS3の実装状況を確認しておこう。よく使われる4つのCSS3プロパティについて、ブラウザーごとの対応状況をまとめたのが下の表だ。
 |
|---|
| CSS3の実装状況 |
Firefox、Chrome、Safariの欄にある-moz-、 -webkit-は「ベンダープリフィックス」と呼ばれるもので、W3Cで正式勧告されていないプロパティの先行実装やブラウザー固有機能などで使われる。ブラウザーを識別する接頭辞を付けることで、適用するブラウザーを絞り込めるわけだ。ベンダープリフィックスは下記のようにプロパティ名の頭に付けて使用する。
-moz-text-shadow
ドロップシャドウ効果を適用する
はじめに、メニューのテキストに影を付けるドロップシャドウ効果を設定してみよう。ドロップシャドウはtext-shadowプロパティで設定できる。
【text-shadowの基本】
ul li a{
text-shadow: 0px 1px 0px #ccc;
}
左から、
- 1つ目の値は、右方向への影の移動距離（負の値だと左方向に移動する）
- 2つ目の値は、下方向への影の移動距離（負の値だと上方向に移動する）
- 3つ目の値は、影をぼかす範囲
- 4つ目の値は、影の色（rgbaを利用できる）
を指定する。
text-shadowプロパティを使うコツは、あまり大きな値を設定しないこと。右方向は0、ぼかしも0、下方向にだけ1pxずらした影を設定したのが次のサンプル。文字が浮き上がったように表示され、効果的なドロップシャドウを実現できた。
text-shadow: 0px 1px 0px #ccc;
 |  | |
|---|---|---|
| text-shadow 適用前 | text-shadow 適用後 |
![Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]](http://ascii.jp/img/amazon_noimg70.gif "Microsoft Windows7 Home Premium 64bit 日本語 DSP版 + メモリ [DVD-ROM]")
