HTMLとCSSでデザインに立体感を加えたいと思ったことはありませんか？
そんなときに便利なのがbox-shadowプロパティです。この記事では、box-shadowの基本から応用までをやさしく解説します。

box-shadowとは？

box-shadowは、要素に影をつけるためのCSSプロパティです。影を加えることで、カードやボタンなどの要素が浮き上がって見えるようになります。

基本の書き方

構文は以下の通りです。

box-shadow: 水平距離 垂直距離 ぼかし 拡がり 色;

たとえば次のように記述します。

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

各パラメータの意味

• 5px（水平距離）：右方向に影を5pxずらす
• 5px（垂直距離）：下方向に影を5pxずらす
• 10px（ぼかし）：影のぼかし具合
• 0（拡がり）：影のサイズを広げる（正数）または縮める（負数）
• rgba(0, 0, 0, 0.3)：影の色（透過あり）

応用：複数の影を重ねる

カンマで区切ることで、複数の影を重ねることもできます。

.card {
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2),
              0 8px 20px rgba(0, 0, 0, 0.1);
}

実用例：ボタンにホバー時の影をつける

.button {
  background: #007bff;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: box-shadow 0.3s;
}

.button:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

おわりに

box-shadowを使いこなすことで、Webデザインに奥行きや高級感を加えることができます。
少しの工夫で見栄えが大きく変わるので、ぜひ積極的に活用してみましょう！

次回はtext-shadowとの違いや、影のアニメーション演出にも触れていきます。