box-shadow：要素の外縁に影を落とすドロップシャドウの効果を追加する

box-shadowプロパティの説明

box-shadowは、要素の外縁に影を落とすドロップシャドウの効果を指定します。影の方向は、要素の外側または内側を選んで追加できます。また、一つの要素に複数の影の指定することも可能です。この場合、単一の影を表す値のまとまりをカンマ区切りで列記します。

影の面積は、要素のサイズや余白には影響しないため、広範囲に渡る影を使う祭は、隣接する要素との干渉に気を配って下さい。影が他の要素の領域に入ると、不自然に切り取られたような表示になります。

box-shadowの値には、複数の操作項目があります。これを組み合わせることで、自在に影を生成することが可能となっています。

• 1つ目の<length>値は、水平方向のオフセット量を表す<offset-x>となります。
• 2つ目の<length>値は、垂直方向のオフセット量を表す<offset-y>となります。
• 3つ目の<length>値は任意で、影のぼかし半径を表す<blur-radius>となります。
• 4つ目の<length>値は任意で、影の拡縮を表す<spread-radius>となります。
• 影の色を表す<color>値を任意で指定できます。
• 要素の内側に影がつくinsetを任意で指定できます。

box-shadowに指定できる値

<offset-x>

<length>値で表す水平方向のオフセット量です。要素の縁から影を横にどの程度移動させるかを指定します。通常、この値は左から右方向への距離を表します。マイナスの値が指定された場合は、影が落ちる方向が要素の左側となり、光源が右方向に置かれた時の効果を表現します。この値に0を指定すると、要素の水平方向の中央に影が配置されます。

<offset-y>

<length>値で表す垂直方向のオフセット量です。要素の縁から影を縦にどの程度移動させるかを指定します。通常、この値は上から下方向への距離を表します。マイナスの値が指定された場合は、影が落ちる方向が要素の上側となり、光源が下方向に置かれた時の効果を表現します。この値に0を指定すると、要素の垂直方向の中央に影が配置されます。

<blur-radius>

<length>値で表す影をぼかす半径です。値が大きくなるほど、影が離散する量が増えて、面積が広がります。この値に0を指定すると、影の輪郭はぼやけません。ここに負の値を指定することはできません。省略された場合は0とみなされます。

<spread-radius>

<length>値で表す影を拡張する量です。値が大きくなるほど、影が拡張されて面積が広がります。負の値を指定すると、影の面積が縮小します。省略された場合は0とみなされます。

<color>

CSSで使える色指定の値です。16進数、RGB値、HSL値などが使えます。初期値はcurrentcolorで、省略された場合も同様の値とみなされます。

inset

影を要素の内側に表示させるキーワードです。記述する場所は先頭あるいは行末です。省略されている上たが初期値で、影が要素の裏側に落ちて立体的に浮き上がったように見えます。この値が指定されると、要素の内側にドロップシャドウが発生し、要素が立体的に凹んだように見えます。

box-shadowの使い方とサンプル

box-shadowプロパティの構文は以下の通りです。

/* キーワード値 */
box-shadow: none;

/* offset-x | offset-y | color */
box-shadow: 5px 5px gray;

/* offset-x | offset-y | blur-radius | color */
box-shadow: 5px 5px 5px #666;

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 5px 5px 5px 1px rgba(0, 0, 0, .3);

/* +inset */
box-shadow: 5px 5px gray inset;
box-shadow: inset 5px 5px gray;

/* 複数の影を指定 */
box-shadow: 5px 5px #ccc inset, -1rem -0.5rem 0.5rem #999;

/* グローバルキーワード */
box-shadow: inherit;
box-shadow: initial;
box-shadow: revert;
box-shadow: unset;

box-shadowの実例

それでは実際にbox-shadowプロパティの書き方を見ていきましょう。まず初めに、最もシンプルなドロップシャドウをCSSで表現してみます。

.samp_box {
	overflow: auto;
	padding: 0 1rem 1rem 1rem;
	text-align: center;
}
.samp_box > div {
	margin: 1rem auto 0 auto;
	padding: 2rem 1rem;
	border: 1px solid #000;
}
#shadow {
	box-shadow: 5px 5px 5px #000;
}

<section class="samp_box">
	<div id="shadow">box-shadow: 5px 5px 5px #000;</div>
</section>

この影を要素の内側へ落とす場合は、box-shadowの値にinsetを追加します。これに背景色や境界線の色を組み合わせることで、画像を使わなくても多彩な表現が可能となります。

これがCSSで要素に影をつける最も基本的なやり方です。続いて、表現の幅を広げる方法を見ていきましょう。例えば、影のぼかし半径を残したままオフセット量を0にすると、上下左右すべての方向に均等に影が描画され、うっすらと浮かび上がったような柔らかい表現になります。

複数の影を一括で指定する

box-shadowには複数の影を一括で指定する機能があります。これを有効にするには、一つの影を表す値のまとまりをカンマ区切りで並べて配置します。影は先頭に書かれたものが画面に対して一番手前に表示されます。重なる順序によって影の見え方が変わるため、ここに気をつけて下さい。

以下の例は、要素の内部に白線の影をつけて、内側と外側に淡い影を落としています。そのため、合計で3つのドロップシャドウを1つのプロパティでコントロールしていることになります。

もちろん、色のついた影を作成することも可能です。以下の例では、パステルカラーを用いた影を複数組み合わせて、ポップな装飾を表現しています。