影を付ける事ができる「box-shadow」について。
設定の基本や注意点と、応用的な使い方の事例なども

昔であれば何かしら影などを付けようと思うと画像での処理が必要でしたが、今の時代では割と多くのことがCSSだけで対処できるようにもなってきています。今回のテーマでもあるbox-shadowもその1つで、割と実務でも多く使われるものになります。

box-shadowはその名前からもイメージしやすいとおり、ボックス要素や画像に影を付ける事ができるプロパティになっています。以前にテキストに影を付けるプロパティとしてtext-shadowを紹介したことがありますが、それと似たようなイメージです。

そこまで使い方が難しいプロパティではないのですが、使う機会がなくしばらく離れていると、あれどういう順番だったっけ？なんて事にもなったりする事もあったり、実際の制作でどういう使い方してるのかという疑問を持つ方もいるかと思いますので、そのあたりも踏まえて、今回解説してみたいと思います。

基本のおさらいから、事例とまではいかないまでも、実際にこういう使い方でよく使ってるよといったところまで書いていければと思います。

box-shadowを使って要素に影をつける方法

box-shadowは先ほども書いたように、ボックス要素や画像などにドロップシャドウのような影を付ける事ができるプロパティとなります。実際に使ってみたイメージが下記になります。

実際の書き方として、6つの設定項目があり、書く際には下記のように使われます。

box-shadow: X方向の位置 Y方向の位置 ぼかす距離 影のサイズ 影のカラー 内側の指定;

という設定になります。
これだとよくわからないとなるので、実際に書いてみると下記になります。

box-shadow: 10px 10px 5px 0px #ddd;

こう書くと、X軸に10px、Y軸に10px、ぼかす距離が5px分、影のサイズが5px、カラーは薄いグレー、という設定になり、この設定で書いたものが、一番最初に出てきたサンプルになっています。

内側の指定と書いているところに、insetを指定してあげると、下記のサンプルのように影が外側ではなく内側につける事も可能です。とはいえ、実際にこれを使う機会はあまり多くなく特定のケースに限ってくるのではないかなとも思います（自分も多くは使いません）。

box-shadow: 10px 10px 5px 0px #ddd inset;

それぞれの数値をいじるとどうなるのかなど、次に見ていきましょう。

X方向の横とY方向の縦の指定は必須事項

box-shadowでは1つ目の設定がX軸＝横の影の位置とサイズ、そして2つ目の設定がY軸＝縦の影の位置とサイズを設定することになり、設定したpx分だけ移動した箇所からサイズ分の影が付けられます。また、この全6項目のうちこの縦軸と横軸の設定は必須項目になります。

少しわかりやすくするため、大きめな数値の縦・横ともに20pxを入れてみたのが下記のサンプルです。

box-shadow: 20px 20px 0px 0px #ddd;

実際にそれぞれ20px移動した地点から、20px分の影が付いています。
また、縦と横の指定には下記のようにマイナスの数値を入れる事も可能です。

box-shadow: -10px -10px 0px 0px #ddd;

正の数字を入れれば、右下に影が伸びていき、負の数字を入れれば左上に影が伸びていくという形になります。実際の現場などでも、例えば5つのポイントや特徴といったような、同じレイアウトが上下で続くような場合、影の向きを変えて並べることでメリハリが付けられたりするので使われたりしています。

影のぼかす距離の設定 ※省略可

3つめに指定するのが影のぼかし具合の設定になります。
XやYの数値と同じくpx単位で指定することで、どれだけ影がぼけるかを変更できます。

ここの数値を大きくすればするほど、表示される影のぼかしが強くなり、省略すれば0pxを設定したのと同じ扱いになります。上でのサンプルと同じように0pxを指定すると、ぼかしのない影になっています。

box-shadow: 10px 10px 0px 0px #ddd;

ここを10pxとして指定するとぼやけた影になります。

box-shadow: 10px 10px 10px 0px #ddd;

影のサイズの調整 ※省略可

次に4つめの設定となる影のサイズの調整です。
これは少しだけややこしいというか、思っているのと違うとなりがちなので少し注意も必要です。

ここにpx単位で数値を入れることで影のサイズ・大きさを調整できますが、px分を入れた分だけ全方向に影が広がります。文字だけだとわかりにくいかと思うので、それぞれ違う値を設定したのを並べて比べて表示してみるとわかりやすいと思います。

例えば下記のように、0pxを指定したものと10pxを指定したもので比べるとわかりますが、5pxを指定した方は、影が全方向（上下左右）に10px分それぞれ広がっているのが確認できます。

box-shadow: 10px 10px 0px 10px #ddd;

縦と横の位置を10pxと指定して、影のサイズを10pxと指定したため、影が右と下の方向に20px伸びるという結果になっています。

これ使い道あるのかな？と思う方もいるかもしれませんが、box-shadowでは、1つめと2つめの縦と横の値の設定で、影のサイズとスタート地点が決まってしまいます。

そのため、5px 5px と指定すれば、5pxの位置に5pxの影となってしまい、影のサイズは小さめにしたいけど、少し離れた位置に影を表示したいという設定ができません。

そういう時に、この影のサイズの調整をうまく使って設定していきます。

やり方はとても簡単で、この影のサイズの値にはマイナスを指定もできるので、縦と横のサイズには大きめの数字、そして影のサイズにはマイナスの数字を入れてあげれば下記のような影の設定が可能になります。

box-shadow: 15px 15px 0px -7px #ddd;

こうすることで、15pxと15pxの位置に、15pxの影が表示されますが、影のサイズ調整で-7px分の設定になるため、実際には影自体は22pxと22pxの位置に8px分のサイズで表示されることになっています。

影のカラーの設定 ※省略可

次に影のカラーについてです。
とはいえ、これはもう説明不要でわかるのではないかと思いますが、カラーコードなどを指定してあげればOKです。

省略自体は可能ですが、省略して指定しなければその要素のカラーが自動的に反映されます。たまに他サイトで黒になります。と書かれていたりしますが、それはそのボックス要素のカラーが黒だっただけで、必ずしも黒になるとは限りません。

例えば、下記のようにその要素に赤のカラーを指定している場合で、影のカラーを省略すると文字のカラーと同じ赤が自動的に反映されます。

color: #ff0000;
box-shadow: 10px 10px 0px 0px;

また、カラーコードの指定には、rgbaでの指定も可能です。

box-shadow: 10px 10px 0px 0px rgba( 0, 0, 0, 0.2 );

影を外側ではなく内側に指定する ※省略可

最後に、影の位置というか外側か内側かの指定についてです。
これは簡単にinsetを付ければ影がボックスの内側に付き、省略すれば通常通り外側に付きます。

box-shadow: 10px 10px 0px 0px #ddd inset;

これだけだと、いまいち使い所がわからないと思う方もいるかもしれませんが、例えば影をバランスよく全体に付与したりすると、下記のようなデザインを作る事も可能になります。

box-shadow: 0px 0px 10px 5px #ddd inset;

上記のサンプルでは、border-radiusも設定したり、背景などを影より少し薄くしたりなどもしていますが、内側への影もこのように使う事が可能です。

影は複数設定することも可能

実はこのbox-shadowは複数設定する事も可能です。
カンマ「,」で区切って指定すれば、同じボックスで複数の影を指定できますし、複数指定は2個でも3個でも複数指定する事ができます。

下記は実際に3つの影を指定してみたサンプルです。（わかりやすくするために変なカラーの影を付けています）

box-shadow: 7px 7px 5px 0px #ddd, 10px 10px 5px 0px #ff0000, 15px 15px 5px 0px #000;

最初に#dddの影、その次に赤の影、最後に黒の影が付いているのが確認できます。もちろん、insetを付けて内側と外側の両方の影を指定するといった使い方も可能です。

box-shadowを使う際の注意点

非常に便利なbox-shadowですが、使うにあたっていくつか注意点があります。そこまでクリティカルな問題になるほどではないのですが、知っておかないと、あれ？となることもあるので抑えておきましょう。

透過画像や疑似要素に使えない（意図した通りにならない）

実は注意点として画像に使う場合、透過画像に使うと意図した通りには動きません。
また、同じように疑似要素に使った場合も、意図した影になりません。

透過画像や疑似要素にbox-shadowを使って影を付けようとすると、イメージとしては背景がない画像そのものの縁に影が付いたり、疑似要素も考慮して影を付けてくれそうなイメージを持ちますが、残念ながら画像全体の枠に対して影が付けられたり、疑似要素は無視されます。

そのため、透過画像や疑似要素も含めて影を付けたい場合は、下記で解説しているfilter: drop-shadow()を使う必要があり、box-shadowでは透過画像や疑似要素には使えないため注意しましょう。

marginなどの余白などに注意

もう1つ注意しなければいけないのが、余白です。
box-shadowを使った場合、わかりやすく言えば後付け的に影が付与されます。

そのため例えば下記のように、marginとして10pxの余白があるボックスに対して影を10px与えると、余白はゼロになります。

marginはあくまでもボックスに与えられ、影はそのボックスに対して付けられるため、特に大きいサイズを付与する際には余白などが思ってる以上に詰まったりするので注意しましょう。

設定しても効かない時のサンプルと対処法

自分でコーディングしているならまず出ないのですが、途中で引き継いだりなどしていると使い方によってbox-shadowを設定しているにも関わらず効いていない時に出くわすシーンがあるかもしれません。

そんな時は、だいたい下記のケースが多いので試してみましょう。

隣接した要素に背景がある場合

上の注意点でも解説した余白に注意とも関連するのですが、box-shadowは隣接した要素に背景が設定されている場合で、余白がなければ下記のようにその背景の下に隠れてしまいます。

よく起こるケースとしては、固定ヘッダーに影を付けようと設定したのに出ない！というシーンはよく見かけます。（下記サンプルでは下の影が出ていないのが確認できるはずです）

これは実際に影が表示されていないのではなく、その隣接した要素の背景の下に表示されているという状況になります。そのため、box-shadowを設定した要素に合わせてposition: relative;も追加してあげることによって、影をきちんと表示することができます。

ただし、こうした設定をしても、隣接する要素と重なって表示されることになるため、ヘッダーなどのようにそういうレイアウトであれば良いのですが、そうでなければmarginなどできちんとした余白を取るようにしましょう。

overflow: hidden; を設定した親要素の中に設定して幅を超えた場合

これもかなり限定的ではあるのですが、以外とこういうケースの方が解決に時間かかったりすることもあります。

余白などにも多少関わってきますが、border-boxを設定した要素の親要素に幅が決められていて、そのサイズ100%で表示しているような場合で、さらに親要素にoverflow: hidden;が設定されていると影は表示されません。

これも実際に表示されてはいるものの親要素の幅を超えてしまって、それを非表示にしてしまっているので見えていないという現象です。

この場合は、親要素のoverflow: hidden;を取るか、子要素の幅を縮めるかなどして対処していく形になるかと思います。

親要素からoverflow: hidden;を取ったら下記のように親要素の幅を超えて表示されます。

下記は子要素のサイズを少し縮めて親要素内に収まるサイズにしたものになります。

box-shadowを使った色々なサンプル・事例

最後に実際にbox-shadowを使った色々なサンプルやこういう使い方をしてますよという事例みたいなところを紹介して終わりにしたいと思います。

上で挙げたサンプルはわかりやすく極端な例をしているので、実際にその通り使うかというと使わない事が多いので、下記のサンプルなどを見て、実際にこういう使い方してるというのを参考にしてもらえればと思います。

実際のCSSとサンプルをそれぞれ載せておきたいと思います。
全ボックスでCSSを書くと長くなるので、box-shadow以外は全部共通のため、下記のように設定をして使っています。

<div class="sample-box">Sample Box</div>

.sample-box{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 100px;
  margin: 30px 0px 0px;
  color: #999;
  border-radius: 3px;
  background: #eee;
}

一般的な使い方の影を付ける使い方

最も一般的な使い方かと思われる、右下に影を付けるものです。
自分は使うときは影をぼかしてドロップシャドウ的に使うことが多いです。

box-shadow: 7px 7px 10px 0px #999;

全体にぼかした枠を付ける使い方

これもよく使いますが、全体にぼかした枠を付けるような使い方です。
画像などに使う事も多いですし、PC向けでマウスオーバー時に付ける事も多いです。

box-shadow: 0px 0px 15px 0px #ccc;

内側に影を落として使う

先ほどのサンプルと同じにはなりますが、影を内側に落として使うパターンです。

box-shadow: 0px 0px 15px 5px #ddd inset;

少し膨れたボタンのように見せて使う

box-shadowは複数指定できるので、それらをうまく使う事で少し膨れたボタンのように見せて使う事ができます。ボタン系などにワンポイントで使ったりする事が可能です。

box-shadow: 0px 0px 3px 0px #ccc, 0px -3px 5px -3px #777 inset;

影をぼかさず少し離れて表示して使う

実際に影を付けるとなるとドロップシャドウ的にぼかして影っぽく使う使い方が多いですが、全くぼかさず、少し離れた位置に付けて使うこともよく行われます。

自分はよく画像やレイアウトの全体の枠に対して、テーマカラーを付与して設定したりしています。

box-shadow: 20px 20px 0px -10px #999;

ただし、この使い方のように影のサイズの調整でマイナスの値を与えた場合、マイナスの値分だけborder-radiusの効果が消えてしまうので注意が必要です。今回のように-10pxを指定すると、border-radiusが10px未満の場合は、影の部分の枠線の曲がりは消えてしまっています。

例えば、下記のようにマイナスを指定しなければ、当然枠線の曲がり具合も同じまま影が付きます。（わかりやすいように、border-radiusに大きな数値を与えています）

border-radius: 10px;
box-shadow: 10px 10px 0px 0px #999;

ただ見て分かる通り、離れた位置に表示ができなくなってしまいます。
細かいところではありますが、使い方次第で色々と変わるので注意も必要です。

複数設定でカラーを分けてネオンっぽく使う

あまり使う機会も無いと言えばないのですが、たまにちょっと派手目？なサイトなどのときのワンポイントとなるアクセント的に使った事があったので紹介しておきます。

box-shadow: -5px -5px 10px 5px #fea0c6, 5px 5px 10px 5px #f0707e;

こうするとカラーなどによってネオンっぽさを出す事も可能になります。

複数指定して荒いグラデーションに使う

これも使うシーンは限られるかもしれませんが、目立たせたい場所などに使う機会があるかもしれません。

box-shadow: 5px 5px 0px 0px #444, 10px 10px 0px 0px #777, 15px 15px 0px 0px #aaa, 20px 20px 0px 0px #ddd;

まとめ

今回は実務でも多く使われているであろうbox-shadowについて解説してみました。単にちょっとした影を付けるだけという使い方が多いかもしれませんが、実は意外と色々な使い道に溢れたプロパティでもあります。

これを上手く活用できれば、HTMLとCSSだけで思ってる以上に装飾ができますし、特に同じレイアウトが続くような時にメリハリを付けやすくなったりもします。

実際に自分もよく使っていますし、このサイトのページでも多用しています。
裏方ワークスとは？というページや、お客様の声でそれぞれ今回紹介しているような使い方をしています。

使い方次第で色々と見せ方にも工夫できますので、ぜひ使いこなして活用していきましょう。