このページの目的
CSSのbox-shadowプロパティを使い、要素に影をつけて立体感を出す方法を学びます。
単一の影だけでなく、複数の影を重ねることで、UIをよりモダンで、リアルな質感に見せるテクニックをマスターすることが目標です。
smart_display動作サンプル
以下のボックスにマウスカーソルを乗せると、box-shadowが適用されます。左が単純な影、右が複数の影を重ねた、よりリアルな影です。違いを比べてみてください。
シンプルな影
リアルな影
このサンプルを実装するためのCSSコードは以下の通りです。
build実装方法
1. 基本的な使い方
box-shadowプロパティには、主に以下の値を指定します。
/* box-shadow: [X軸オフセット] [Y軸オフセット] [ぼかし半径] [広がり半径] [色]; */
.element {
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.1);
}- X軸オフセット
- 影を水平方向にどれだけずらすか（正の値で右、負の値で左）
- Y軸オフセット
- 影を垂直方向にどれだけずらすか（正の値で下、負の値で上）
- ぼかし半径
- 値が大きいほど、影の輪郭がぼやけます。
- 広がり半径（任意）
- 影を全方向にどれだけ広げるか。正の値で大きく、負の値で小さくなります。
- 色
- 影の色。
rgba()を使い、少し透明な黒（例:rgba(0,0,0,0.1)）を指定するのが一般的です。
2. 応用：複数の影を重ねてリアルな質感を出す
box-shadowは、カンマ（,）で区切ることで、一つの要素に複数の影を重ねて指定することができます。これにより、単一の影では表現できない、より自然で深みのある陰影を作り出せます。
.card {
transition: box-shadow 0.3s, transform 0.3s;
box-shadow:
/* 1層目: 近くて、うっすらとした影 */
0 1px 2px 0 rgba(0, 0, 0, 0.05),
/* 2層目: 少し離れて、よりぼやけた影 */
0 4px 8px 0 rgba(0, 0, 0, 0.06);
}
.card:hover {
transform: translateY(-5px);
box-shadow:
/* 1層目: ホバー時に少し濃く、はっきりと */
0 4px 8px 0 rgba(0, 0, 0, 0.08),
/* 2層目: ホバー時にさらに広がる影 */
0 10px 20px 0 rgba(0, 0, 0, 0.08);
}ポイント：海外の有名なCSSフレームワーク「Tailwind CSS」などで採用されている、モダンで汎用性の高い影の作り方です。
warningよくある間違い
- 影が濃すぎて不自然に見える
- 影の色に真っ黒（
#000）を使うのではなく、rgba(0,0,0,0.1)のように、アルファ値（透明度）を低く設定した色を使いましょう。 - 影の輪郭がくっきりしすぎている
- 「ぼかし半径」の値を大きくして、影のエッジを柔らかくしましょう。リアルな影には、必ずぼかしが必要です。