box-shadowプロパティの説明
CSSの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で表現してみます。
<section class="samp_box">
<div id="shadow">box-shadow: 5px 5px 5px #000;</div>
</section>
.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;
}
この影を要素の内側へ落とす場合は、box-shadowの値にinsetを追加します。これに背景色や境界線の色を組み合わせることで、画像を使わなくても多彩な表現が可能となります。
これがCSSで要素に影をつける最も基本的なやり方です。続いて、表現の幅を広げる方法を見ていきましょう。例えば、影のぼかし半径を残したままオフセット量を0にすると、上下左右すべての方向に均等に影が描画され、うっすらと浮かび上がったような柔らかい表現になります。
複数の影を一括で指定する
box-shadowには複数の影を一括で指定する機能があります。これを有効にするには、ひとつの影を表す値のまとまりをカンマ区切りで並べて配置します。影は先頭に書かれたものが画面に対して一番手前に表示されます。重なる順序によって影の見え方が変わるため、ここに気をつけて下さい。
以下の例は、要素の内部に白線の影をつけて、内側と外側に淡い影を落としています。そのため、合計で3つのドロップシャドウを1つのプロパティでコントロールしていることになります。
もちろん、色のついた影を作成することも可能です。以下の例では、パステルカラーを用いた影を複数組み合わせて、ポップな装飾を表現しています。