デザイン 2024.03.10

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

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

1 box-shadowの基本構文
2 シンプルな影の例
3 複数の影
4 内側に影を付ける
5 実用例
6 まとめ

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の実用的な例をいくつか示します。

ボタンにシャドウを追加

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Button Box Shadow</title>
    <style>
        .button {
            padding: 10px 20px;
            background-color: #4CAF50;
            color: white;
            border: none;
            cursor: pointer;
            box-shadow: 0 4px #999;
        }
        .button:active {
            background-color: #45a049;
            box-shadow: 0 2px #666;
            transform: translateY(2px);
        }
    </style>
</head>
<body>
    <button class="button">Click Me</button>
</body>
</html>

カードデザインにシャドウを追加

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card with Box Shadow</title>
    <style>
        .card {
            width: 300px;
            padding: 20px;
            margin: 50px auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }
    </style>
</head>
<body>
    <div class="card">
        <h2>Card Title</h2>
        <p>This is a simple card with a box shadow.</p>
    </div>
</body>
</html>

リッチなシャドウ効果

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Rich Box Shadow</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: lightblue;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
            margin: 50px;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>