【CSS box-shadowプロパティ】HTML要素に影をつける方法を例付きで紹介！

はじめに

CSSのbox-shadowプロパティは、要素に影を追加するために使用されます。

このプロパティは、要素に立体感を与えたり、視覚的な分離を提供するために非常に役立ちます。この記事では、CSSのbox-shadowプロパティを使用する方法について説明します。

box-shadowプロパティの構文

box-shadowプロパティは以下のような構文を持っています。

box-shadow: h-shadow v-shadow blur spread color inset;

• h-shadow：水平方向の影の位置。正の値は右方向、負の値は左方向に影をつけます。
• v-shadow：垂直方向の影の位置。正の値は下方向、負の値は上方向に影をつけます。
• blur：影のぼかし効果の強さを指定します。0の場合は影はぼやけずにシャープな線で描画されます。
• spread：影の拡散効果を指定します。正の値は影が広がり、負の値は影が縮小します。
• color：影の色を指定します。
• inset：省略可能な値で、この値を指定することで、要素の内側に影をつけることができます。

これらの値はすべてオプションであり、必要な場合にのみ使用することができます。

以下は、box-shadowプロパティを使用する例です。

.box {
  box-shadow: 2px 2px 6px #000;
}

See the Pen Untitled by supuky (@supuky) on CodePen.

この例では、.boxクラスの要素に、右下に2pxの水平方向の影、2pxの垂直方向の影、6pxのぼかし効果、#000の色を持つ影を追加しています。

box-shadowプロパティの応用

box-shadowプロパティを使用することで、さまざまな効果を作ることができます。以下にいくつかの例を紹介します。

内側に影をつける

box-shadowプロパティにinset値を指定することで、要素の内側に影をつけることができます。

.box {
  box-shadow: inset 2px 2px 6px #000;
}

See the Pen Untitled by supuky (@supuky) on CodePen.

この例では、.boxクラスの要素に、右下に2pxの水平方向の影、2pxの垂直方向の影、6pxのぼかし効果、#000の色を持つ内側の影を追加しています。

外側に複数の影をつける

box-shadowプロパティを複数指定することで、要素に外側の複数の影をつけることができます。

以下は、要素に2つの影を追加する例です。

.box {
  box-shadow: 2px 2px 2px #ccc, 4px 4px 4px #888;
}

See the Pen Untitled by supuky (@supuky) on CodePen.

この例では、.boxクラスの要素に、右下に2pxの水平方向の影、2pxの垂直方向の影、2pxのぼかし効果、#cccの色を持つ影と、右下に4pxの水平方向の影、4pxの垂直方向の影、4pxのぼかし効果、#888の色を持つ影を追加しています。

角丸の影をつける

border-radiusプロパティとbox-shadowプロパティを組み合わせることで、角丸の影をつけることができます。

.box {
  border-radius: 10px;
  box-shadow: 2px 2px 2px #ccc;
}

See the Pen Untitled by supuky (@supuky) on CodePen.

この例では、.boxクラスの要素に、10pxの角丸、右下に2pxの水平方向の影、2pxの垂直方向の影、2pxのぼかし効果、#cccの色を持つ影を追加しています。

テキストに影をつける

text-shadowプロパティを使用することで、テキストに影をつけることができます。

h1 {
  text-shadow: 2px 2px 2px #ccc;
}

See the Pen Untitled by supuky (@supuky) on CodePen.

この例では、h1要素に、右下に2pxの水平方向の影、2pxの垂直方向の影、2pxのぼかし効果、#cccの色を持つ影を追加しています。

まとめ

box-shadowプロパティは、要素に影を追加するために使用されます。水平方向の影の位置、垂直方向の影の位置、ぼかし効果、色などを指定することができます。inset値を指定することで、要素の内側に影をつけることもできます。また、border-radiusプロパティと組み合わせることで、角丸の影をつけることができます。text-shadowプロパティを使用することで、テキストに影をつけることもできます。これらの応用を活用して、デザインに役立ててみてください。