【box-shadow】ボックスに影をつける

box-shadowでボックスに影を表示させる

box-shadowプロパティを使用すると、ボックスに影を表示させることができます。

box-shadowプロパティ

box-shadowプロパティには、下記の値やキーワードを指定します。

• 単位つきの数値
• 色
• inset
• none

単位つきの数値

影の位置やぼかす距離、拡張させる距離を2〜4個の数値で指定します。

色

影の色を16進数やrgbなどで指定します。

inset

insetは影をボックスの内側に表示させるためのキーワードです。

none

noneは単独で使用するキーワードで、影を非表示にします。
box-shadowプロパティは、noneが初期値になっています。

設定方法

box-shadowプロパティは、影の位置やぼかす距離、拡張させる距離を半角スペースで区切って、2〜4個の数値で指定します。

1番目の数値

1番目の数値は、ボックスから影をどれくらい右にずらすかを指定します。
マイナスの値を指定した場合は、影が左側にずれます。

2番目の数値

2番目の数値は、ボックスから影をどれくらい下にずらすかを指定します。
マイナスの値を指定した場合は、影が上にずれます。

3番目の数値

3番目の数値は、影をぼかす範囲を指定します。
0ならぼかし無し、数値が大きいとぼかしが大きくなります。
マイナスの値は指定できません。

4番目の数値

4番目の数値は、影を外側に大きくする距離を指定します。
マイナスの値を指定した場合は、影が小さくなります。

サンプル

box-shadowプロパティで下記のような設定をすると、

box-shadow: 5px 5px 5px 5px;

このような影が付きます。

色とinset

色とキーワードのinsetは、2〜4個の数字のグループの前か後に、順不同で指定できます。
実際に設定すると、下記のようになります。

box-shadow: inset 5px 5px 5px 5px gray;

複数の影を設定する

box-shadowプロパティの影は、複数表示させることができます。
影を複数表示させる場合は、数値、色、キーワードのセットをカンマで区切って指定します。
また、影はレイアウトには影響しません。

実際に複数の影の設定をすると、下記のようになります。

box-shadow: 5px 5px 5px 5px gray, 15px 15px 5px 5px lightgray;

このように、box-shadowプロパティで影を複数つけることもできます。

ボックスの影のまとめ

今回は、ボックスの影についてまとめました。
影をうまく使えばアクセントになって、デザイン性が上がりそうですね。

みいと

TwitterContact

興味を持ったものをいろいろと勉強しています。