ブログ

  1. トップ
  2. ブログ
  3. CSS3のbox-shadowでボックス要素に立体的な影をつける方法

Web制作

CSS3のbox-shadowでボックス要素に立体的な影をつける方法

CSSの使い方について解説する連載です。今回はCSS3で追加されたプロパティ、box-shadowです。ボックス要素に立体的な影をつけることができるので、表現の幅を広げることができます。

box-shadowの指定方法

box-shadowを指定するには、下のように記述します。

box-shadow: 横方向の距離 縦方向の距離 (ぼかし) (広がり) (影の色) (影の向き)

必須なのは「横方向の距離」と「縦方向の距離」の2つで、他の値は省略することができます。

box-shadowの具体例

box-shadowを使った例を見ていきましょう。

縦横の距離のみ指定

「横方向の距離」と「縦方向の距離」、必須の2つだけを指定した場合です。

box-shadow: 10px 10px;
01

上の例では、影が右方向と下方向にできていました。左方向や上方向に影をつくりたい場合は、マイナスの値を指定してください。

ぼかし

上記に加えて、「ぼかし」も使った場合です。

box-shadow: 10px 10px 10px;
02

縦横の距離を0pxにした場合は、下のようになります。

box-shadow: 0px 0px 10px;
03

広がり

広がりを指定した場合です。

box-shadow: 5px 5px 0px 5px;
04

「広がり」だけを指定した場合は、下のように四方向に広がります。

box-shadow: 0px 0px 0px 5px;
05

影の色

影の色を変更することも可能です。指定しない場合は、黒でつくられます。

box-shadow: 0px 0px 0px 5px #0000ff;
06

RGBaを使うことで、透明度(アルファ値)を指定することも可能です。

影の向き(inset)

デフォルトでは影はボックスの外側にできますが、「影の向き」を指定するとボックスの内側に影がつくれます。

box-shadow: 0px 0px 0px 5px #111 inset;
07

外側にも内側にも影を作りたい場合は、半角カンマで区切って下のように指定します。

box-shadow: 0px 0px 0px 5px #111, 0px 0px 0px 5px #111 inset;
08

あとがき

CSS3のbox-shadowプロパティの使い方についてご紹介しました。CSSのデザインの幅が広がるので、上手く利用していきましょう。