CSS

【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;

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

box-shadow

色とinset

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

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

 

複数の影を設定する

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

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

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

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

ボックスの影のまとめ

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

まとめ

  • box-shadowを使用すると、ボックスに影を表示させることができる
  • box-shadowは、影の位置やぼかす距離、拡張させる距離を数値で指定する
  • 数値の前後に、色やキーワードを順不同で指定できる
  • ボックスの影は複数設定することができる
  • 影を複数設定する場合は、数値、色、キーワードをセットとして、セットごとにカンマ区切りで指定する
  • 影はレイアウトに影響しない

ABOUT ME
みいと
みいと
興味を持ったものをいろいろと勉強しています。
記事URLをコピーしました