菊池崇の実践！CSS3道場 ― 第3回

box-shadowを極めて「Mac風UI」を作る！

2011年02月16日 11時00分更新

菊池崇

ツイートする

　box-shadow プロパティは、CSS3の「Background and Borders Module Level3」で定義されているプロパティだ。ボックスに対して1つもしくは複数のシャドウを適用できる。今回のCSS3道場では、box-shadowプロパティをWebデザインに取り入れる具体的な方法を紹介しよう。

box-shadow の記述方法

box-shadowプロパティの値は、距離＋色で構成される。基本的な記述方法は以下のとおりだ。

値	省略	意味
inset	可	ボックスの内側に影を指定する。省略時は外側に影が付く。通常は週略する
Xオフセット	不可	水平方向への影の指定をする。正の値で右方向へ、負の値で左方向へ影を付ける
Yオフセット	不可	垂直方向への影の指定をする。正の値で下方向へ、負の値で上方向へ影を付ける
ぼやけ具合	可	影のぼやけ具合を指定する。大きい値を指定するとぼやけ具合は大きくなる。負の値は指定できない
シャドウの広がり	可	影の広がり具合を指定できる。正の値を指定すると影が広がり、負の値を指定すると影が縮まる
色	可	キーワード、16進法（HEX）、RGBa、HSLaのいずれかで指定できる

　XオフセットとYオフセットは必須項目で省略不可、そのほかの値はオプションで省略できる。ただし、WebKit系ブラウザー（Google Chrome, Safari）は色の指定を省略すると影の色が透明になり、期待した効果が得られない。基本的には、「Xオフセット」「Yオフセット」「色」の3つの値はセットで指定する癖をつけよう。

box-shadow のブラウザー対応状況

　box-shadowプロパティは2011年2月現在、以下のブラウザーで利用できる。

ブラウザー名	IE	Firefox	Chrome	Opera	Safari
バージョン	9+	3.5+	1.0+	10.5+	3.0+
プリフィックス	なし	-moz- 4.0+からプリフィックスなし	-webkit- 10.0+からプリフィックスなし	なし	-webkit-

※IE8以下はfilterプロパティにて代用できる

　IE9ベータ版／Opera10.5はベンダープリフィックスが不要で、Firefox, Chrome, Safariはベンダープリフィックスが必要だ（Chrome 10.0、Firefox 4.0以上はベンダープリフィクスが不要）。それぞれのブラウザーに対応した書き方でdiv要素の右下にシンプルな影を付けると、以下のようになる。

div{
-webkit-box-shadow :  5px 6px 7px rgba(0,0,0,.5); /*Chrome, Safari3.0+*/
-moz-box-shadow :  5px 6px 7px rgba(0,0,0,.5); /*Firefox3.5+*/
box-shadow :  5px 6px 7px rgba(0,0,0,.5); /*Opera10.5+, IE9b+*/ }