CSSのbox-shadowプロパティ：影を使ったスタイリングの基本と応用

Posted on by

CSSのbox-shadowプロパティは、要素に影を追加してデザインを向上させるためのスタイリング手法です。
適切な影を使用すると、要素に立体感を加えたり、視覚的な階層を作ったりすることができます。
本記事では、box-shadowプロパティの基本的な使い方から応用例まで、
具体的なコードとともに解説します。

box-shadowプロパティとは？

box-shadowプロパティは、HTML要素のボックスに影を追加するためのプロパティです。
この影は、方向、ぼかし、広がり、色などを細かく設定できます。

基本構文

selector {
  box-shadow: h-offset v-offset blur spread color;
}

各パラメータの説明

  1. h-offset（必須）: 影を水平方向にどれだけ移動させるか（正の値は右方向、負の値は左方向）。
  2. v-offset（必須）: 影を垂直方向にどれだけ移動させるか（正の値は下方向、負の値は上方向）。
  3. blur（任意）: 影のぼかし半径（デフォルトは0で、値が大きいほどぼかしが強くなる）。
  4. spread（任意）: 影の広がり（正の値で拡大、負の値で縮小）。
  5. color（任意）: 影の色（デフォルトは透明）。

box-shadowの基本的な使い方

基本的な影の設定

影を右下方向に追加する簡単な例です。

コード例

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

説明

  • 10px: 水平方向に10px移動
  • 10px: 垂直方向に10px移動
  • 5px: ぼかし半径
  • rgba(0, 0, 0, 0.3): 半透明の黒色

ぼかしをなくす

ぼかしを設定しない影は、シャープでエッジの効いた印象を与えます。

コード例

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

内側の影（inset）

insetを指定すると、影がボックスの内側に描画されます。

コード例

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

用途

  • 押し込まれたボタンやカードのようなデザインを作成。

box-shadowの応用

複数の影を設定

コンマ区切りで複数の影を指定できます。

コード例

.box {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3), -5px -5px 10px rgba(255, 255, 255, 0.8);
}

用途

  • 光と影を組み合わせた立体感のあるデザイン。

ホバーエフェクト

マウスホバー時に影を変化させて、インタラクティブなデザインを作成。

コード例

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

.box:hover {
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

カードデザイン

影を使ってカードデザインに立体感を加える例です。

コード例

.card {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

box-shadowのベストプラクティス

4.1 影の色を調整する

影の色を要素の背景色や全体のテーマに合わせて調整することで、自然な見た目を作ることができます。

例

背景色が明るい場合

.box {
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2);
}

背景色が暗い場合

.box {
  box-shadow: 10px 10px 20px rgba(255, 255, 255, 0.2);
}

レスポンシブデザインで影を調整

デバイスサイズに応じて影の強さを変更することで、適切なデザインを保つことができます。

コード例

@media (max-width: 768px) {
  .box {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
  }
}

影を使いすぎない

影を多用すると要素が浮きすぎて、不自然なデザインになることがあります。
控えめに使い、自然な階層を作りましょう。

よくある質問

Q1. 影が表示されないのはなぜ？

背景色と影の色が同じ場合、影が目立たなくなることがあります。
overflow: hiddenが設定されていると、影が切り取られることがあります。

Q2. box-shadowはどの程度のパフォーマンスに影響がありますか？

影のぼかしや広がりが大きい場合、パフォーマンスに影響を与えることがあります。
軽量化したデザインを意識しましょう。

まとめ

box-shadowプロパティを使うことで、要素に立体感や深みを加え、
デザイン全体を引き立てることができます。
本記事で紹介した基本的な使い方や応用例を参考に、実際のプロジェクトで試してみてください。

特に、ホバーエフェクトやカードデザインでは、
影を適切に使うことでユーザーにとって直感的なデザインを提供できます。
また、影の強さやぼかしを細かく調整することで、より洗練された見た目を実現できます。

さらに具体的な質問やカスタマイズ例が必要な場合は、お気軽にお問い合わせください！