今回はホームページでよく見かける「影」を表現するためのCSSプロパティ「box-shadow」についてご紹介します。

「box-shadow」の使い方

box-shadowはその名のとおり、boxにshadowを落とす機能のことで、立体的に浮かべたり、隣接する要素との境界をわかりやすく表現するために用います。

実際の見え方は以下のようになります。





オレンジ色の正方形に黒い影がかかっています。

以下がCSSです。

.box {
    width: 200px;
    height: 200px;
    background: orange;
    box-shadow: 8px 8px 6px 2px #333;
}

box-shadowプロパティは、左から順に【横方向の距離、縦方向の距離、ぼかし度合い、ぼかしの広がり度合い、影の色】を指定することができます。

「ぼかし具合」と「ぼかしの広がり」

少しややこしいのが後半の２つ、「ぼかし具合」と「ぼかしの広がり」です。


「ぼかし具合」はわかります。
値が大きいほど、ぼかしが強くなるということです。

問題は「広がり」の方です。
ぼかし具合を指定すれば、広がりを指定しなくても影は表現できます。
となると広がりとは何なのでしょうか？

私は普段コーディングをする際にbox-shadowをよく使用しますが、
広がりを意識的に使用したことはなく、そもそも表示にどう影響するのかを知りませんでした。



ところが最近、とうとうこの「広がり」を使う場面に遭遇しました。

ぼかした影を1方向だけに出す

ある時、「ぼかした影を下方向だけに出したい」というケースに遭遇しました。

下方向なら横方向の値を0にして、縦に値を設定すれば完成だ、と思いやってみると、
何だかうまくいかない。以下のように微妙に影がはみ出しているのです。





書いたCSSがこちら。

.box {
    width: 200px;
    height: 200px;
    background: orange;
    box-shadow: 0 8px 6px 0 #333;
}

いったいどういうわけなんだと思い、インターネットに助けを求めたところ、見つけました。
正解のCSSがこちら。

.box {
    width: 200px;
    height: 200px;
    background: orange;
    box-shadow: 0 14px 6px -6px #333;
}

「広がり」の値を指定しています！


これはどういうことかというと、
6pxというぼかし指定によって正方形の左右にはみ出た分の影を、広がりにマイナスの値を指定することで相殺していることになります。

ただこのままだと、広がりのマイナス値指定によって縦の影も短くなってしまうため、縦の距離を6px分長く指定することで、本来の8pxの距離を表現しています。


つまり「ぼかしの広がり」とは、「ぼかした影の長さ」のことだったのです。
広がりという言葉から、なんとなくぼかしとの区別がつきませんでしたが、単純に長さだと考えるとちょっとわかりやすくなりました。


ちなみに以下が完成イメージです。

下方向だけに影がでており、思った通りになっています。

影を使いこなそう

ホームページのコーディングにおいて「影」の使用頻度は非常に高いので、プロパティの各指定値を覚えて、ぜひ利用してみてください。
また影の広がりを含めて、各指定値を変更してみてどのような表示になるのか研究するのもおもしろいかもしれませんね。