CSS でボックスシャドウをつける方法

CSS で影（ボックスシャドウ）をつける方法を紹介します。
例えば、Adobe Photoshop のようなドロップシャドウを CSS で再現したいときに便利な方法です。

1. ボックスシャドウをつける方法
   1. 各値の詳しい説明
   2. ブラウザの対応状況
2. filter の drop-shadow じゃだめなの？

ボックスシャドウをつける方法

CSS で特定の要素にボックスシャドウをつける方法を紹介します。
ボックスシャドウをつけるには CSS セレクタの box-shadow を使用します。
実際の見た目はこんな感じです。

ベースの HTML は次の通りです。

<div class="boxshadow">ボックスシャドウ</div>

CSS はこちら。

.boxshadow {

  position: relative;

  width: 240px;

  margin: 0 auto;

  padding: 15px;

  font-size: 16px;

  line-height: 1.3;

  text-align: center;

  letter-spacing: 0.05em;

  background-color: #fff;

  border-radius: 8px;

  box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2);

}

ボックスシャドウだけの記述はこちら。

.dropshadow {

  box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2);

}

指定している各数値は左から、影の水平方向、垂直方向、ぼかしの具合、ぼかしの広がり、色（色+透明度）を指定できます。
box-shadow ( 水平 垂直 ぼかしの具合 ぼかしの広がり 色（色+透明度） );

各値の詳しい説明

ボックスシャドウは6個の値を設定することができます。
例えば、全部の指定を加えると次のようになります。

.dropshadow {

  /* inset | offset-x | offset-y | blur-radius | spread-radius | color */

  box-shadow: inset 1px 3px 5px 0px rgba(0, 0, 0, 0.2);

}

カンマで区切ることでボックスシャドウを複数設定することも可能です。

ropshadow-double {

  /* inset | offset-x | offset-y | blur-radius | spread-radius | color */

  box-shadow: 1px 3px 5px 0px rgba(0, 0, 0, 0.2), inset 1px 3px 5px 0px rgba(0, 0, 0, 0.2);

}

ブラウザの対応状況

CSS セレクタの box-shadow は大体どのブラウザーも対応しているようです。
対応状況はこちらで確認できます。

filter の drop-shadow じゃだめなの？

CSS で影を付ける方法は他にもあります、たとえば filter プロパティの関数 drop-shadow でも影を付けることができます。
こちらは擬似要素を含めて影を付けることができるので、吹き出しのようなデザインに影をつけたい場合は、こちらを選択してもよいかもしれません。
ただ、box-shadow で指定できる inset（外側の影を内側に変更）とぼかしの広がり具合を指定できないのが難点です。
例えば、擬似要素を使った場合に、親要素に box-shadow を使うとこんな感じ。

そしてこちらが drop-shadow の場合。

吹き出し下の三角形（擬似要素）に影がついていませんね。
なので、box-shadow で擬似要素にも影をつけたい場合は、三角形に ::before を、影には ::after を使って表現する必要があります。
ちなみに、三角形の作り方はCSS で三角形を作る方法で、
吹き出しの作り方はCSS で吹き出しを作る方法で紹介しています。

まとめ

CSS で影（ボックスシャドウ）をつける方法を紹介しました。
ドロップシャドウで影をつける場合はCSS でドロップシャドウをつける方法をご覧ください。