CSSのbox-shadowで要素に影をつける方法とデザインの工夫を解説

box-shadowプロパティは、要素に影を付けるために使用します。影のオフセット、ぼかしの強さ、色、広がりなどを細かく設定でき、デザインに奥行きや立体感を加えることができます。

box-shadowプロパティの値とその効果

• オフセットX (px): 水平方向の影の位置を指定します。
• オフセットY (px): 垂直方向の影の位置を指定します。
• ぼかし半径 (px): 影のぼかし具合を指定します。0にするとぼかしがなく、影がくっきり表示されます。
• 広がり半径 (px): 影の広がりを指定します。正の値で影を広げ、負の値で影を縮めます。
• 色 (rgba, hex, etc.): 影の色を指定します。
• inset: 内側の影を指定します。

注意点と関連情報

box-shadowプロパティは、影のオフセット、ぼかし、広がり、色を組み合わせて、さまざまな視覚効果を作り出すことができます。insetを使用することで、内側に影を作ることが可能です。また、複数の影を重ねることもできるため、より複雑な効果を実現できます。rgbaを使うことで、影に透明度を加えて柔らかい効果を出すこともできます。

box-shadowプロパティが効かない時の原因と対策

要素に背景色が指定されていない

box-shadowは要素に影をつけるプロパティですが、要素に背景色が設定されていない場合、影が背景に溶け込んで見えなくなることがあります。特に背景色が透明な場合、影が効果を発揮しないように見えます。
対策: background-colorを指定して、要素の影が見えるようにしましょう。例えば、background-color: white;やbackground-color: #f0f0f0;などを使用して、影が目立つようにします。

影の色が背景と同じ

box-shadowの影の色が背景色と同じ場合、影が見えにくくなります。特に、影が薄い色や透明な色で設定されている場合、背景に溶け込んで影が認識できなくなります。
対策: 影が視認できる色で指定しましょう。例えば、box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);のように、適切な色や透明度を設定します。

影のオフセットが小さすぎる

box-shadowのオフセット（xやyの値）が小さすぎる場合、影が要素のすぐ隣に表示されるため、影が目立たないことがあります。
対策: オフセットの値を適切に設定し、影が明確に見えるようにしましょう。例えば、box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.5);のように、大きめのオフセット値を指定します。

共通するCSSコード

.css-sample-container {
        width: 100%;
        max-width: 600px;
        padding: 20px;
        margin: 20px auto;
        border: 1px solid #ccc;
        background-color: #f9f9f9;
        text-align: center;
    }
    .css-sample-item {
        width: 100%;
        padding: 20px;
        margin: 20px 0;
        background-color: #4CAF50;
        color: white;
        text-align: center;
        font-size: 18px;
    }
    

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

この基本的なbox-shadowは、5pxの水平オフセット、5pxの垂直オフセット、10pxのぼかし半径で黒い影を作成します。影の透明度は30%です。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-box-shadow-basic">基本的な影</div>
    </div>

CSSコード

.css-sample-box-shadow-basic {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

表示結果

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

insetを使用すると、影が要素の内側に表示されます。この例では、影が内側に5pxのオフセットと10pxのぼかしで適用されています。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-box-shadow-inset">内側の影</div>
    </div>

CSSコード

.css-sample-box-shadow-inset {
    box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

表示結果

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

この影は、10pxの水平・垂直オフセット、20pxのぼかし半径、5pxの広がり半径を持ち、より強い影を表現します。透明度は50%です。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-box-shadow-spread">影の広がり</div>
    </div>

CSSコード

.css-sample-box-shadow-spread {
    box-shadow: 10px 10px 20px 5px rgba(0, 0, 0, 0.5);
}

表示結果

box-shadow: 0 0 15px rgba(255, 0, 0, 0.8)

色付きの影の例です。赤い色でぼかし半径15pxの影を要素に付けています。透明度は80%で、鮮やかな効果があります。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-box-shadow-color">色付きの影</div>
    </div>

CSSコード

.css-sample-box-shadow-color {
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
}

表示結果

box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), 10px 10px 20px rgba(0, 0, 0, 0.2)

複数の影を同時に適用する例です。1つ目は基本的な影、2つ目はやや大きく広がる影を追加しています。重ねて使用することで、深みのあるデザインが可能です。

HTMLコード

<div class="css-sample-container">
    <div class="css-sample-item css-sample-box-shadow-multiple">複数の影</div>
    </div>

CSSコード

.css-sample-box-shadow-multiple {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), 10px 10px 20px rgba(0, 0, 0, 0.2);
}

表示結果

まとめ

box-shadowプロパティを使用することで、要素にさまざまな影をつけ、奥行きや立体感を演出できます。影の色、オフセット、ぼかしの強さ、広がりを調整することで、微妙な陰影から大胆なデザインまで幅広く表現できます。また、複数の影を重ねることで、より複雑な効果も作り出すことが可能です。