CSSで影を付ける：box-shadowプロパティの完全ガイド

ウェブデザインにおいて、要素に影をつけることで要素に立体感を出したり強調することができます。CSSのbox-shadowプロパティを使うと、簡単に要素に影を付けることが可能です。この記事では、box-shadowの基本的な使い方から応用までを紹介します。

box-shadowの基本構文

box-shadowプロパティは以下の形式で指定します。

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

• 水平方向のオフセット：影が水平方向にどれだけずれるかをピクセルで指定。
• 垂直方向のオフセット：影が垂直方向にどれだけずれるかをピクセルで指定。
• ぼかしの範囲：影のぼかしの程度をピクセルで指定。
• 広がりの半径：影のサイズがどれだけ広がるかをピクセルで指定。
• 色：影の色を指定。

シンプルな影の例

以下は、ボックスに軽い影をつける基本的な例です。

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

このコードは、ボックスの右下にグレーの影をつけます。

複数の影

box-shadowプロパティでは、カンマを使って複数の影を指定することができます。これにより、より複雑で美しい効果を生み出すことが可能です。

.box {
    box-shadow: 3px 3px 5px rgba(0,0,0,0.2), -3px -3px 5px rgba(255,255,255,0.5);
}

この例では、ボックスに2つの影をつけています。一つは外向きの暗い影、もう一つは内向きの明るい影です。

内側に影を付ける

box-shadowにinsetキーワードを追加することで、影を要素の内側に描画することができます。これは、凹んだ効果を作り出すのに便利です。

.box {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.5);
}

この設定は、要素内部に深い影を作り、凹みのある見た目を実現します。

まとめ

box-shadowプロパティは、CSSにおいて非常に強力なツールです。これを駆使することで、ページの各要素に奥行きを加えたり、ユーザーの注意を引く視覚的なエフェクトを簡単に追加することができます。デザインの幅を広げるために、さまざまな影のスタイルを試してみましょう。