概要

CSSのbox-shadowプロパティを使うと、HTML要素に影をつけることができます。この影によって要素に奥行きや立体感を与え、デザインを引き立てる効果があります。box-shadowは非常に柔軟で、簡単な影から複雑な複数の影まで表現できます。

基本構文

box-shadowプロパティの基本的な構文は次の通りです。

box-shadow: 水平オフセット 垂直オフセット ぼかし半径 広がり半径 色;

• 水平オフセット (x-offset): 影を水平方向にどれだけずらすかを指定します。正の値で右、負の値で左に影が移動します。
• 垂直オフセット (y-offset): 影を垂直方向にどれだけずらすかを指定します。正の値で下、負の値で上に影が移動します。
• ぼかし半径 (blur-radius): 影のぼかし具合を指定します。数値が大きいほど影がぼやけ、数値が小さいほど影がシャープになります。
• 広がり半径 (spread-radius): 影の大きさを調整します。正の値で影が大きくなり、負の値で影が小さくなります。
• 色 (color): 影の色を指定します。任意の色指定が可能で、rgba形式で透明度を設定することもできます。

例

box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);

この例では、要素の右下にぼんやりとした黒い影がつきます。影は10px右、10px下に移動し、ぼかし半径が5px、広がりが0px、そして透明度50%の黒（rgba(0, 0, 0, 0.5)）です。

各パラメータの詳細

水平オフセットと垂直オフセット

box-shadowの最初の2つの値は、影を水平方向と垂直方向にどれだけずらすかを決めます。例えば、以下のコードでは影が右下に移動します。

box-shadow: 5px 5px;

この場合、影は5px右、5px下にずれます。

ぼかし半径（blur-radius）

ぼかし半径は、影がどれだけぼんやりするかを決定します。値が大きいほど影が柔らかく広がり、小さい値だとシャープになります。

box-shadow: 5px 5px 10px;

このコードでは、ぼかし半径が10pxの影が生成され、柔らかい影となります。

広がり半径（spread-radius）

広がり半径は、影のサイズを拡大または縮小します。正の値で影が広がり、負の値で影が縮小します。

box-shadow: 5px 5px 10px 3px;

ここでは、広がり半径3pxの影が作られ、通常より少し大きな影が生成されます。

色

影の色は自由に指定可能です。以下のように、rgba形式を使うと透明度を調整できます。

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);

この例では、50%の透明度を持つ黒い影が表示されます。

内側の影 - inset

通常、box-shadowは要素の外側に影を描画しますが、insetキーワードを使うと内側に影をつけることができます。

box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.5);

このコードでは、要素の内側に影ができ、凹んだようなエフェクトを作ることができます。

複数の影をつける

box-shadowでは複数の影を同時に適用することも可能です。各影の設定をカンマで区切って指定します。

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5), -5px -5px 10px rgba(255, 0, 0, 0.5);

この例では、右下に黒い影、左上に赤い影が追加され、要素が浮いているように見えます。

使用例

基本的な影をつける

.box {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3);
}

このコードは、四角いボックスに淡い影をつけ、立体感を演出します。

内側に影をつける

.inner-shadow {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: inset 5px 5px 15px rgba(0, 0, 0, 0.3);
}

このコードでは、ボックスの内側に影ができ、凹んだような効果を持つデザインを作れます。

複数の影を組み合わせる

.multi-shadow {
    width: 200px;
    height: 200px;
    background-color: #fff;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(0, 0, 255, 0.2);
}

複数の影を使って、より複雑で興味深いデザインを作成できます。

まとめ

CSSのbox-shadowは、要素に奥行き感や立体感を与える非常に便利なプロパティです。box-shadowを活用することで、単純なボックスが視覚的に魅力的なデザインに変わり、UI全体の印象を大きく向上させることができます。基本的な影から複雑な多重影まで、さまざまなスタイルを試して、独自のデザインを作り上げてみてください。