このページの本文へ

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

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

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

菊池 崇

  • この記事をはてなブックマークに追加
本文印刷
css3

 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+*/ }
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング