2026年4月16日
box-shadowとは？カードUIに自然な影をつけたいあなたへ
「カードUIに影をつけたいけど自然に見えない」「box-shadowの値が多すぎて意味がわからない」——影をつけるのは簡単そうに見えて、実は奥が深いです。
CSSの box-shadow（ボックスシャドウ） プロパティを使うと、要素に影をつけて立体感を出せます。この記事では、各値の意味を理解し、自然な影を自在に作れるようになることを目指します。
基本構文：5つの値の意味
/* box-shadow: X軸 Y軸 ぼかし 広がり 色; */
.card {
box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}| 値 | 意味 | 例 |
|---|---|---|
| X軸（offset-x） | 影の横方向のずれ。正=右、負=左 | 4px |
| Y軸（offset-y） | 影の縦方向のずれ。正=下、負=上 | 8px |
| ぼかし（blur） | 影のぼかし具合。大きいほどぼんやり | 16px |
| 広がり（spread） | 影のサイズ拡大/縮小。省略可 | 0 |
| 色 | 影の色。rgba()で透明度指定が一般的 | rgba(0,0,0,0.1) |
insetキーワードで内側の影
/* 内側の影（凹んだ見た目） */
.input {
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}inset を先頭に書くと、影が要素の内側に表示されます。入力フィールドの凹み表現に使えます。
複数の影を重ねる
/* カンマ区切りで複数の影を指定 */
.card {
box-shadow:
0 1px 2px rgba(0, 0, 0, 0.05),
0 4px 16px rgba(0, 0, 0, 0.1);
}近い影（シャープ）と遠い影（ぼんやり）を重ねると、より自然な立体感が出ます。
実践コード例①：カードUIに自然な影をつける（Material Design風）
/* レベル1: 軽い影（通常状態） */
.card {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.08),
0 4px 12px rgba(0, 0, 0, 0.06);
}
/* レベル2: 中程度の影（ホバー時） */
.card:hover {
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.1),
0 8px 24px rgba(0, 0, 0, 0.12);
}
/* レベル3: 強い影（モーダルやドロップダウン） */
.modal {
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.12),
0 16px 48px rgba(0, 0, 0, 0.16);
}影の強さを段階的に使い分けると、要素の「高さ」（画面からの距離）を表現できます。
実践コード例②：ボタンの:hover時に影を強くして浮き上がる効果
.btn {
background-color: #0d9488;
color: white;
padding: 12px 24px;
border: none;
border-radius: 8px;
cursor: pointer;
box-shadow: 0 2px 8px rgba(13, 148, 136, 0.3);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.btn:hover {
box-shadow: 0 6px 20px rgba(13, 148, 136, 0.4);
transform: translateY(-2px); /* 少し上に移動 */
}
.btn:active {
box-shadow: 0 1px 4px rgba(13, 148, 136, 0.3);
transform: translateY(0); /* 押し込む */
}影の色にブランドカラーを使うと、ボタンが光っているような効果が出ます。hoverの詳しい使い方はCSSのhoverで動きをつける方法を参照してください。
実践コード例③：insetで凹んだ入力フィールド
.input {
padding: 10px 14px;
border: 1px solid #d1d5db;
border-radius: 6px;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.06);
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.input:focus {
border-color: #0d9488;
box-shadow:
inset 0 2px 4px rgba(0, 0, 0, 0.06),
0 0 0 3px rgba(13, 148, 136, 0.15); /* フォーカスリング */
outline: none;
}insetの影とフォーカスリング（外側の影）を組み合わせると、入力フィールドのフォーカス状態がわかりやすくなります。
よくある間違い・注意点
❌ 影が濃すぎる/大きすぎると不自然
/* NG: 影が強すぎて不自然 */
.card { box-shadow: 0 10px 50px rgba(0, 0, 0, 0.5); }
/* OK: 自然な影の目安 */
.card { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); }影の透明度は0.05〜0.15が自然に見える目安です。色の指定方法はCSSで色を指定する方法で復習できます。
❌ box-shadowはレイアウトに影響しない
影はレイアウト計算に含まれません。影が隣の要素に重なっても、要素の位置は変わりません（marginとは違います）。
パフォーマンスの注意
大量の要素に複雑な影（blur値が大きい、複数の影）をつけるとレンダリングが重くなることがあります。リスト表示では影を控えめにしましょう。
box-shadowとdrop-shadowの違い
/* box-shadow: 要素の「箱」に影をつける */
.card {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
/* filter: drop-shadow(): 要素の「形」に影をつける */
.icon {
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
}透過PNG画像に影をつけたい場合はdrop-shadow()を使います。詳しくはCSSのfilterプロパティを参照してください。
ブラウザ対応状況
box-shadowは全モダンブラウザで対応しています。ベンダープレフィックスは不要です。
box-shadowを使うときのコツ
影をつけるとカードやボタンが浮いて見え、デザインに奥行きが出ます。ただし、使いすぎると画面がごちゃごちゃして見にくくなります。影を使うときのコツを紹介します。
コツ1：影は薄くする
影の色は真っ黒（#000）ではなく、rgba(0, 0, 0, 0.1)のように透明度を下げましょう。薄い影のほうが自然で上品に見えます。透明度0.1〜0.2くらいがおすすめです。
コツ2：ぼかしを大きめにする
blur（3番目の値）を大きくすると、影がふんわりと広がります。くっきりした影よりも、ぼかした影のほうがモダンなデザインに見えます。8px〜20pxくらいを試してみましょう。
コツ3：影の方向を統一する
ページ内で影の方向がバラバラだと不自然です。すべての要素で「右下に影」のように方向を揃えましょう。光源が一つの方向から来ているイメージです。
コツ4：ホバー時に影を変える
ボタンやカードにカーソルを乗せたとき、影を大きくすると「浮き上がった」ように見えます。transitionプロパティと組み合わせれば、滑らかに変化するアニメーションになります。クリックできる要素だとわかりやすくなるので、ユーザーにとっても親切です。
影は「少しだけ」が基本です。迷ったら控えめにしておきましょう。
まとめ
- ✅
box-shadow: X Y ぼかし 広がり 色の5つの値で影を作る - ✅
insetで内側の影（凹み表現） - ✅ カンマ区切りで複数の影を重ねると自然な立体感
- ✅ 影の透明度は0.05〜0.15が自然な目安
- ✅
transitionと組み合わせてホバー時に影を変えると効果的
まずはカードUIの影から練習しましょう。CSSの基礎全体はCSSとは？初心者向け解説で学べます。実践で試したい場合はCSS練習問題に挑戦してみてください。
関連記事
- CSSとは？初心者向け解説 — CSS基礎に戻る
- CSSで色を指定する方法 — 影の色指定を復習
- CSSのhoverで動きをつける方法 — hover時の影変化
- CSSトランジション入門 — 影のアニメーション
- CSSのfilterプロパティ — drop-shadowとの違い
- CSS練習問題 — 実践で影を使ったUI作成