CSSシャドウの使い方：ボックスシャドウとテキストシャドウの効果

Webデザインにおいて、シャドウ（影）を適用することで要素を際立たせたり、立体感を出したりすることができます。CSSでは、box-shadowとtext-shadowの2つのプロパティを使用して、ボックス要素やテキストにシャドウを追加できます。本記事では、それぞれの使い方を詳しく解説します。

1. box-shadow の基本

box-shadowは、要素のボックス（ボーダーやパディングを含む領域）に影を適用するプロパティです。基本的な構文は以下のとおりです。

box-shadow: [水平オフセット] [垂直オフセット] [ぼかしの半径] [影の広がり] [色];

box-shadow の具体例

div {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

この設定では、右下方向に10pxずつオフセットされ、20pxのぼかしを持つ黒い影が適用されます。

複数の影を追加する

box-shadowはカンマ（,）で区切ることで複数の影を追加できます。

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

2. text-shadow の基本

text-shadowはテキストに影を適用するためのプロパティです。基本の構文は次のようになります。

text-shadow: [水平オフセット] [垂直オフセット] [ぼかしの半径] [色];

text-shadow の具体例

h1 {
  font-size: 36px;
  color: navy;
  text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
  }

この設定では、右下方向に3pxずつオフセットされた、ぼかし5pxの黒い影が適用されます。

ネオン風のシャドウ効果

複数の影を重ねることで、ネオン風の効果を作ることもできます。

h1 {
  font-size: 36px;
  color: white;
  text-shadow: 0 0 5px blue, 0 0 10px cyan;
}

3. box-shadow と text-shadow の活用例

シャドウを活用することで、カードデザインの立体感を演出したり、文字をより目立たせたりできます。適切に使うことで、視覚的な魅力が向上し、ユーザーの注目を集めやすくなります。

まとめ

• box-shadow を使うとボックス要素に影を適用できる。
• text-shadow を使うとテキストに影を適用できる。
• 影のぼかしや色を調整して、デザインに適したシャドウ効果を作れる。

CSSシャドウを活用して、洗練されたWebデザインを作成してみましょう！

最後まで読んでいただきありがとうございます！

このブログは初心者向けwebデザイナー向けにHTML、CSSの基礎知識を発信しています。
この記事を読んだ方に少しでもお役に立てれば幸いです。