【初心者向け】CSSのbox-shadow完全ガイド｜影の付け方と応用テクニック

はじめに

CSSで要素に影を付けるbox-shadowは、Webデザインに立体感や視覚的な強調を加える重要なプロパティです。

単なるフラットデザインでは情報が伝わりにくいことがあり、ユーザーの目を引くことも難しいです。

本記事では、box-shadowの基本的な書き方から色やぼかし、影の位置指定、複数影の活用方法まで、初心者でも理解できるようコード例を交えて解説します。

box-shadowとは

box-shadowの基本

box-shadowは、要素の周囲に影を付けるためのCSSプロパティです。

基本的には、水平オフセット・垂直オフセット・ぼかし・拡散・色の順で指定します。

基本のbox-shadow例

div {
  width: 100px;
  height: 100px;
  background-color: #47d3ab;
  box-shadow: 5px 5px 10px 3px rgba(0,0,0,0.3);
}

このコードでは、右下方向にぼかし付きの影が付きます。
影の色や透明度を調整することで、デザインの雰囲気を変えることが可能です。

box-shadowの書き方と構成要素

box-shadowは5つの値を順番に指定します。

• 水平オフセット：影の水平移動量
• 垂直オフセット：影の垂直移動量
• ぼかし：影の輪郭のやわらかさ
• 拡散：影の面積の大きさ
• 色：影の色と透明度

上記のうち、拡散は省略可能で、省略した場合は0として扱われます。

そのため、4つの値でも影を付けることができ、拡散を追加することで影のサイズをさらに調整できます。

ぼかしと拡散の違い

ぼかしと拡散の違いについて、「影のやわらかさ」 と 「影の広がり具合」 では具体的にイメージしづらいと思います。以下の図で比較し違いを理解しましょう。

透過や透明度の設定

透明度はrgba()を使って調整可能です。

影を薄くすることで自然な立体感を出し、濃くすると要素を強調できます。

複数の影を重ねる方法

box-shadowは複数の影を重ねることもできます。
カンマで区切ると複数影を同時に設定できます。

div {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3), -5px -5px 10px rgba(0,0,0,0.1);
}

このコードでは、右下と左上に異なる影を付けることで、立体感や光源の方向などのニュアンスを表現しています。

よくある失敗と改善策

影が濃すぎる・目立ちすぎる

影を強く設定しすぎると、要素が浮きすぎて不自然に見えます。

自然な濃さの半透明影を設定することで、柔らかくバランスの取れたデザインになります。

レイアウト崩れの回避

複数の要素に影をつける場合、影が要素の外側にはみ出すため、余白が足りないと隣の要素と重なって見えてしまいます。要素同士の間隔を十分に取り、影が干渉しないように注意しましょう。

また、影によって要素のサイズ感が変化する点に注意して影の大きさを指定することで、レイアウト崩れを避けられます。

box-shadow使用時の確認ポイント

このように、box-shadowを使用する際は濃さ・位置・サイズ感を意識して、自然で見やすいデザインを心がけましょう。

上記のポイントを押さえてbox-shadowを設定すれば、UI（画面の見た目）の立体感や強調効果を適切に演出でき、プロジェクト全体のデザイン品質が向上します。

実務での活用例

カードUIやボタンの立体感演出

影は要素だけでなく、テキストやボタンにも使用可能です。

ボタンに軽く影を付けると、クリック可能な立体的なUI（サイトやアプリの見た目）を演出できます。テキストに影を付けることで、可読性を高めることも可能です。

モーダルやポップアップでの影の利用

影を付けることでモーダルやポップアップが背景から浮き上がって見える効果が生まれます。

ユーザーの視線を自然に誘導できるため、UX（使いやすさ）の改善にも役立ちます。

トランジション・アニメーションとの併用

ホバー時に影を変化させると、滑らかで自然なアニメーションを実現できます。

UIが動きに反応している印象を与え、ユーザー体験を向上させます。

div {
  transition: box-shadow 0.3s ease;
}

div:hover {
  box-shadow: 5px 5px 10px rgba(0,0,0,0.3);
}

まとめ

本記事では、CSSのbox-shadowを使った影の基本から応用、複数影の活用方法まで解説しました。

影を適切に設定することで、要素の立体感や視覚的強調が生まれ、より見やすく魅力的なデザインを作れます。
複雑な影の設定も、正しい書き方を覚えることで安全に実装できます。

こうしたHTML/CSSの基礎からWeb制作を学びたい方には、WEBMASTERS がおすすめです。
現役エンジニアのマンツーマン指導により、独学だけでは気づきにくいポイントも効率よく習得できます。

初歩から段階的に学び、コーディングスキルを着実に身につけていきましょう。