CSSの影表現：box-shadow-colorプロパティの応用例：ナビゲーションメニューに影を追加して項目を強調

2024-05-31

CSSにおける「box-shadow-color」プロパティ

CSSのbox-shadowプロパティは、要素に影を付けるために使用されます。このプロパティには、影の色、オフセット、ぼかし半径、広がり半径を指定するオプションがあります。

従来、影の色はbox-shadowプロパティの最初の値として直接指定されていました。しかし、CSS3では、より柔軟な制御を可能にするために、専用のbox-shadow-colorプロパティが導入されました。

「box-shadow-color」プロパティの利点

可読性の向上: box-shadowプロパティの構文がより明確になり、コードを読みやすくする
メンテナンス性の向上: 影の色を後で簡単に変更できる
一貫性の向上: 同じ色の影を複数の要素に簡単に適用できる

box-shadow-colorプロパティは、box-shadowプロパティの最初の値として指定します。色の値は、CSSで許容される任意の色形式で指定できます。

box-shadow: <color> [offset-x] [offset-y] [blur-radius] [spread-radius]

例

以下の例では、要素に赤い影を付けます。

box-shadow: red 5px 10px 5px 0px;

注意点

一部の古いブラウザでは、box-shadow-colorプロパティをサポートしていない場合があります。
Safari（PC版）では、box-shadowプロパティに色を指定しないと影が表示されない場合があります。

補足

box-shadowプロパティの詳細については、以下のリソースを参照してください。

box-shadow-colorプロパティは、CSSにおける影のスタイリングをより柔軟かつ効率的に行うための便利な機能です。このプロパティを積極的に活用することで、より洗練されたデザインを作成することができます。

CSS box-shadow-color プロパティを使ったサンプルコード

この例では、box-shadow-color プロパティを使用して、要素に赤い影を付けます。

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  box-shadow: red 10px 15px 5px;
}

影の色を変更

.box1 {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  box-shadow: red 5px 10px 5px,
              blue 10px 20px 10px,
              green 15px 30px 15px;
}

影のぼかしと広がり

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

疑似要素と box-shadow-color

この例では、疑似要素を使用して、要素に内側の影を付けます。

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  position: relative;
}

.box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ccc;
  box-shadow: inset rgba(0, 0, 0, 0.2) 5px 10px 10px 5px;
}

応用例

ボタンにホバー効果として影を追加する
カード要素に立体感を出す
画像にドロップシャドウ効果を適用する
ナビゲーションメニューに影を追加して、項目を強調する

これらの例はほんの一例です。box-shadow-color プロパティを使用して、様々な種類の影を作成することができます。

CSSで影を表現するその他の方法

疑似要素とborderプロパティを使用して、影をシミュレートすることができます。この方法は、比較的シンプルな影を作成する場合に有効です。

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  position: relative;
}

.box::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  width: 190px;
  height: 90px;
  background-color: #ccc;
  z-index: -1; /* 影を要素の下に表示 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

利点

シンプルで分かりやすい
古いブラウザでも比較的互換性がある

短所

複雑な影を作成するのが難しい
ぼかしや広がりのような詳細な制御ができない

SVGフィルターを使用して、影を含む複雑なエフェクトを作成することができます。この方法は、より高度な影表現が必要な場合に有効です。

.box {
  width: 200px;
  height: 100px;
  background-color: #ccc;
  filter: url(#shadow);
}

svg {
  display: none;
}

#shadow {
  filter: url(#feDropShadow);
}

#feDropShadow {
  filter: drop-shadow(
    dx=5 dy=5 color="#000" opacity=0.2
  );
}

非常に複雑な影を作成できる
ぼかし、広がり、色など、影の詳細な制御が可能

記述量が多くなる
古いブラウザではサポートされていない場合がある

画像

影を表現するPNG画像を用意して、要素の背景として使用する方法もあります。この方法は、シンプルな影を素早く簡単に実装したい場合に有効です。

.box {
  width: 200px;
  height: 100px;
  background-image: url("shadow.png");
  background-repeat: no-repeat;
}

実装が簡単
デザインを完全に制御できる

画像ファイルが必要
ファイルサイズが大きくなる可能性がある
応答性が低い

Canvasを使用して、動的な影を生成する方法もあります。この方法は、高度なインタラクションやアニメーションが必要な場合に有効です。

const canvas = document.getElementById("shadowCanvas");
const ctx = canvas.getContext("2d");

canvas.width = 200;
canvas.height = 100;

ctx.fillStyle = "#ccc";
ctx.fillRect(0, 0, 200, 100);

ctx.shadowColor = "#000";
ctx.shadowOffsetX = 5;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 10;
ctx.fillRect(10, 10, 180, 80);