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

更新日: 2020年08月13日

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

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

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

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

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

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

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

スライド3.png

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

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

スライド2.png
　　

「filter: drop-shadow()（ドロップシャドウ）」なら万事解決？

そこで登場するのが、*filter: drop-shadow()*です。

filterプロパティのdrop-shadow()は、W3Cが勧告したフィルターエフェクトモジュールのうちの1つで、一見するとbox-shadowプロパティに似ています。

しかし、実際にはbox-shadowとdrop-shadow()には注目すべき違いがあります。

Photoshopはもう使わない!? 場所を問わず画像編集できるCSSデザインフィルターの画像編集エフェクト9選

CSS3では、Photoshopのようなフィルター効果を再現するイメージフィルターという機能があります。Photoshopを使用すれば画像加工を行うことができますが、外出先などで画像の編集が行えない……そのような経験、Photoshopを使用するデザイン関連の仕事をされている方なら一度や二度ありますよね。そんな時に、少しのコードをCSSに足すだけで画像編集できてしまう機能がイメージフィルターです。今回は、画像の明度や彩度などを簡単に調整することができる、CSSイメージフィルターについてご紹介します。

まずは、基本的な使い方について確認していきましょう。

*filter: drop-shadow()*の指定は基本的にはbox-shadowと同じように使ってあげればOKです。括弧の中に指定する値は、box-shadowと同じです。

例えば以下のように指定していきます。

filter: drop-shadow(10px 10px 10px rgba(0,0,0,0.6));

ただし、insetキーワードはこのフィルターでは指定できないことに留意しておく必要があります。

スライド4.png

こうして指定したfilter: drop-shadow()は、PNG画像の透過性やSVG図形にも対応しているので、オブジェクトの形に沿って影を落とすことができます。

対応しているブラウザのサポート状況ですが、Can I useによれば、Internet Explorerを除く最新ブラウザのほぼ全てでCSSフィルターを使えるようになっています（カバー率は2017年11月現在90.38％）。
※ ベンダープレフィックスを除くと74.91％

ただし、このbox-shadowとfilter: drop-shadow()は、似て非なるものです。ぼかしの長さの計算方法や、insetキーワードの使用可否、影の見え方などが異なりますので、ブラウザを使いながら見え方を確認してみるといいでしょう。
　　

filterプロパティを使いこなそう

See the Pen Drop-shadow vs box-shadow (3) en png´s by Ryo Sakai the ferret Web Writer (@ferretxryoxsakai) on CodePen.

今回は*filter: drop-shadow()*をご紹介しましたが、CSSフィルターはPhotoshopを使わずとも実に様々な効果を演出することができます。

複数のフィルターを組み合わせる場合のほとんどはフィルターの順序が問われることはありませんが、基本的にフィルターはCSSの行番号の順番に適用されるので、中には他のフィルターを上書きしてしまうものもあります。

また、フィルターはアニメーションにも対応しています。アニメーションを上手に使いこなせば、非常に面白い効果を演出することができます。

例えば、キーフレーム50％のところで影を付けたり、写真をセピア調に変えてドラマチックに演出したりすることも可能です。
　　

ボックスシャドウだけではなく、ドロップシャドウも覚えておこう

影の落とし方の選択肢としてbox-shadowだけではなく、*filter: drop-shadow()*を覚えておけば、状況に応じて使いわけることができるようになります。

実際のところ、前者と後者では役割が違います。しかし、適材適所で使いこなすことができれば、よりリッチな表現を演出することができるでしょう。

CSSフィルターは、影だけではなく、明度や彩度も気軽に変えられることのできる注目技術です。この機会にぜひマスターしてみてはいかがでしょうか。
　　

知っておくと便利なCSSの知識

CSS

Webページを構築する際、テキストへの下線配置や矢印など、コンテンツをよりわかりやすくする工夫をしたくなるものです。CSSを使うと、簡単なコードを書くだけでテキストの装飾などが思いのままにできます。今回ご紹介するCSSの書き方は、コンテンツの中でユーザーに注目してほしいところを示せる便利なものです。矢印や三角の作り方など、この機会にチェックしてみてください。