box-shadow（ボックスシャドウ）はもう古い？CSSで「影（シャドウ）」を付ける方法

長い間Webデザイナーが愛してやまないものの1つに「box-shadow（ボックスシャドウ）」があります。

Photoshopのような特殊なソフトウェアを使わなくとも、コードだけで影を落とすことができるという点で、Webデザイナーの中で大変重宝されていたプロパティです。

box-shadowの歴史は長く、2005年時点でW3C内でbox-shadowの草案が発表されました。影を落とす時に、影の長さや角度、色や透明度まで指定することができるので、この技術が登場した当初は感動した方も多いのではないのでしょうか。

しかしながら、box-shadowを使った影の落とし方は、登場から10年以上経過した現在、その使い所を考えていく必要があります。それはブラウザが様々なプロパティをサポートしたことが理由であり、影の落とし方を再考してみるのも大切です。

そこで本稿では、CSS新時代の影の落とし方について、考えてみることにしましょう。
　　

いろんなところで活躍した「box-shadow（ボックスシャドウ）」

box-shadowプロパティは、ボックスに1つ、または複数の影を付ける際に使用するもので、画像処理ソフトを使ってスライスを作らなくても、コードだけで影を落とすことができるので、頻繁に活用している方もいるでしょう。

ここで、box-shadowの使い方をおさらいしておきましょう。

このプロパティでは、例えば以下のように影を指定します。

1. box-shadow: 10px 10px;
2. box-shadow: 10px 10px 10px rgba(0,0,0,0.6);
3. box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.6);
4. box-shadow: 10px 10px 10px 10px rgba(0,0,0,0.6) inset;

通常、影は2～4つの長さで定義されます。また、任意で色やinsetキーワードを追加することもできます。

insetを指定すると、影がボックスの外側ではなく、内側で落とすことができるようになります。長さの指定は省略すると0となり、色の指定は省略するとブラウザの規定値となります。複数の影を指定する場合には、カンマ区切りで影をリスト形式で並べます。
　　

四角形はOK！そのほかの図形には影を上手く落とせない？

box-shadowは短いコードで影を生成することができるので便利ですが、いくつか予期せぬ問題点も発生しています。

例えば、透過PNGにbox-shadowで影を落とす場合です。

box-shadowはあくまでもボックス要素に影を落とすためのプロパティなので、以下のように、画像の周りに上手く影が付きません。

また、SVGの登場で、Web環境にベクターデータを持ち込むことも、次第に増えてきました。

こちらも同様に、四角形であればボックス要素とぴったり当てはまることも多いので、そのままbox-shadowで影を落とせばよいのでしょうが丸や三角形といった、そのほかの図形には四角い影が付いてしまうのです。