CSS

The CSS box-shadow property draws shadows around an element’s frame. It can add depth, highlight focus states, and improve UI clarity when used subtly and consistently.

box-shadow

box-shadow は「要素の外側（または内側）に影を描く」ためのCSSプロパティです。

このページでできるようになること

まずは直感：box-shadow って何？

ざっくり言うと、box-shadow は「要素の箱（ボックス）のまわりに、にじむ影を描いて、奥行きや区切りを作るスイッチ」です。

正確な定義（仕様に沿った説明）

何のために存在するか

box-shadow は、要素の枠（ボックス）に対して影を描き、境界・階層・状態を分かりやすくするために存在します。境界線（border）だけでは硬い印象になりやすい場面で、柔らかい区切りとして使えます。

何に適用されるか（対象）

基本的に 要素のボックスに適用されます（ブロック/インラインブロック/置換要素など）。擬似要素（::before / ::after）にも、ボックスを持つ形で生成していれば適用できます。

できること / できないこと（制約）

できること
  • 外側の影（通常）と内側の影（inset）
  • 影の位置（オフセット）、ぼかし（blur）、広がり（spread）、色の調整
  • 影を複数重ねる（カンマ区切り）
できないこと（重要）
  • 影でレイアウトを押し広げる（影は“描画”なので、サイズ計算には入りません）
  • text-shadow のように文字そのものに影をつける（文字は text-shadow）
  • 透明なPNGなど「画像の形」そのものに影をつける（画像の外形に沿う影は filter: drop-shadow() が近い）

影響範囲（レイアウト/描画/ユーザー操作/アクセシビリティ）

レイアウト
影は描画だけなので、要素の 幅・高さ・配置には影響しません（見た目の“はみ出し”は起きます）。
描画
overflow: hidden などで 影が切れることがあります。これは「効かない」のではなく「描かれているが見えない」状態です。
ユーザー操作
影自体はクリック領域（ヒットボックス）を増やしません。タップしやすさは padding やサイズで確保します。
アクセシビリティ
フォーカス可視化に使えますが、影だけで状態を伝えると見落とされることがあります。必要に応じて outline や色・形の変化も併用します。

基本の書き方（最短の型）

最小サンプル（コピペ用）

CSS

.card {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

0 6px 18px は順に、offset-x（横方向）, offset-y（縦方向）, blur-radius（ぼかし）です。色は rgba() などで透明度を足すと、強さを調整しやすいです。

よく使う値／典型パターン

UIカード（浮かせる）
0 1px 2px + 0 6px 18px のように、薄い影を重ねると自然になりやすいです。
入力欄（へこみ/奥行き）
inset 0 1px 2px のような内側影は、境界線より柔らかい“奥行き”を作れます。
フォーカスリング（強調）
:focus-visible と組み合わせ、0 0 0 3px のように“外側に広げる影”で囲むと視認性が上がります。

どこに書くか（外部CSS/ページ内style/インライン）

基本：外部CSS（推奨）
影はデザイン方針（トーン）に直結します。実務では、共通クラスやコンポーネント単位で外部CSSにまとめるのが安全です。
ページ内 <style>
学習用デモや、単独ページで完結させたい場合に便利です（このページのデモもそうしています）。
インライン（例外）
style="box-shadow: ..." は検証には便利ですが、運用では差分管理が難しくなりやすいので、最後の手段に寄せます。

コピペで動く最小デモ（このページ内で表示）

デモは「悪い例 → 良い例」で、差が一目で分かるようにします。

悪い例：影が強すぎる

濃い影・大きいぼかし・大きい広がりは、UIだと“汚れ”や“古さ”に見えやすく、描画コストも上がりがちです。

ポイント：まずは小さく薄く。必要なら重ねる。

良い例：薄い影を重ねる

薄い影を2枚重ねると、境界が自然になりやすく、デザイン変更にも強いです。

ポイント：rgba() で透明度を調整しやすい。

inset：内側の影

入力欄やパネルなど、“へこみ”を出したい時に便利です。

ポイント：境界線（border）と合わせると安定。

切れの例：overflow: hidden の容器の中だと外側の影は切れます（効かないのではなく、見えていない）。

この要素の影は、外側が容器で切れます。

フォーカス例：キーボード移動でフォーカスが当たるときだけ、見失わないリングを出します（:focus-visible）。

ホバー例：影の変化は控えめに。動きを減らす設定の人にはアニメを切ります。

HTML

<div class="demoShadowCard demoShadowGood">
    <p class="demoShadowCardTitle">良い例：薄い影を重ねる</p>
    <p>薄い影を2枚重ねると、境界が自然になりやすく、デザイン変更にも強いです。</p>
</div>

<button class="demoShadowButton" type="button">Tabキーでここにフォーカス</button>

CSS

.demoShadowGood {
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 6px 18px rgba(0, 0, 0, 0.10);
}

.demoShadowButton:focus-visible {
    outline: 2px solid transparent;
    box-shadow:
        0 0 0 3px rgba(1, 136, 255, 0.35),
        0 1px 2px rgba(0, 0, 0, 0.15);
}

仕様として押さえるポイント（初心者が事故りやすい所）

継承する？（inheritance）
box-shadow は 継承しません。親に影をつけても、子に自動ではつきません（子に必要なら子にも指定します）。
初期値は？（initial）
none（影なし）です。
適用対象は？（applies to）
基本的に 全ての要素に適用できます（ボックスを持つ擬似要素にも適用可能）。
％の基準は？（percentages）
box-shadow の長さは px や em などの長さで指定します。% は基本的に使いません（使える前提で考えると事故ります）。
算出値/使用値の考え方（computed/used value）
ブラウザは指定を解釈して、rgba() などの色や長さを“確定”させて描画します。DevTools の Computed で最終的な box-shadow を見ると、効いている/上書きされているが分かります。
省略時の扱い、無効値の扱い
最低限、offset-x と offset-y は必須です。順番が崩れると無効になることがあります。color は省略でき、既定の色（多くは currentColor 相当）になります。
アニメーション可能？（animatable）
はい。transition で box-shadow を変えられます。ただし大きいぼかしや広い影は重くなりやすいので、変化は小さく・短くが安全です。

よくある勘違い・混同ポイント

box-shadow と text-shadow
box-shadow はボックス、text-shadow は文字です。文字の可読性を上げたいなら、まずは背景色やコントラストを見直し、必要なら text-shadow を検討します。
box-shadow と outline
outline は“線”で、フォーカス可視化の王道です。box-shadow は“にじみ”なので、デザインに馴染ませやすい反面、薄すぎると見落とされます。フォーカス用途では outline を消さない、消すなら同等以上に目立つ代替を作る、が安全です。
box-shadow と filter: drop-shadow()
drop-shadow() は“画像や要素の描画結果”に対して影を落とします。透明部分を持つアイコン画像に沿った影を作りたい場合は drop-shadow() の方が近いです（ただしフィルターは重くなりやすいので注意）。
「動くけど危ない書き方」
影を inset だけで区切りにすると、背景色が変わった時に境界が消えることがあります。境界が必要なら border とセットにすると崩れにくいです。

実務でよくある使用例（制作会社の現場を想定）

カードUI：情報の塊を“ひとまとまり”に見せる

要素同士の境界を作る目的で、border の代わりに薄い box-shadow を使うことがあります。背景が写真やグラデーションでも、影は“柔らかい区切り”として機能しやすいです。

ボタン：押せることを伝える（ただし影だけに頼らない）

影で押せそうに見せるのは効果がありますが、押せるかどうかは 形・ラベル・余白でも伝えます。影は補助として扱うと安定します。

フォーム：フォーカス可視化とエラー強調

フォーカスリングは :focus-visible とセットにするのが基本です。エラーは影だけでなく、border-color、説明文、アイコンなどを併用して“見落としにくさ”を上げます。

実務で起きがちな事故と回避策

影が「効かない」

原因候補：上書きされている
DevTools の Computed で box-shadow を見て、どのルールが勝っているか確認します。box-shadow: none が後から当たっていないかチェックします。
原因候補：影が薄すぎる / 背景と同化
rgba() の透明度が小さすぎたり、背景が暗い/明るいと影が見えにくいです。まずは色・透明度を少し上げ、必要なら影を2枚に分けます。

影が「切れる」

overflow: hidden / clip-path / mask などで、影が見切れます。影を見せたい要素に対して、外側のラッパーで影を持たせると解決しやすいです。

影が「重い」

アクセシビリティ／UX観点での注意（必要な範囲で）

関連プロパティ・関連セレクタとの組み合わせ・相互作用

border-radius
角丸と影は相性が良いです。ただし overflow: hidden と併用すると影が切れます（角丸クリップのため）。
outline / outline-offset
フォーカス可視化の基本です。box-shadow でリングを作る場合も、outline を残す/同等の視認性を確保する判断が重要です。
:focus-visible
マウスクリック時には出さず、キーボード操作時にだけフォーカスリングを出したい場合に便利です。
filter: drop-shadow()
SVGや透過PNGの外形に沿った影をつけたい時に候補。ただしフィルターは重くなりやすいので、使う範囲は絞ります。
position と重なり
影は重なり順の影響を受けます。想定外に影が“下に隠れる”場合は、要素の重なり（スタッキングコンテキスト）を疑います。

試験（Webクリエイター能力認定試験）で得点できる整理

用語ミニ辞典

offset-x / offset-y
影をどれだけ横/縦にずらすか。マイナスもOK。
blur-radius
にじみ（ぼかし）の大きさ。大きいほど柔らかいが、重くなりやすい。
spread-radius
影の大きさを広げる/縮める値。マイナスで小さくできる。
inset
内側の影にするキーワード。

ひっかけポイント（短く）

「問われ方」っぽいミニ確認（解説付き）

  1. 問題：box-shadow を付けたのに、要素の外側の影が見えません。最初に疑うべきCSSはどれ？

    解説：overflow: hidden（自分または親）を疑います。影は描かれていても、はみ出しが切られます。

  2. 問題：ボタンのフォーカス表示を作りたい。outline: none を付けるのは安全？

    解説：基本は非推奨です。消すなら、:focus-visible で同等以上に見えるリングを必ず用意します。

  3. 問題：box-shadow: 0 10px red; の指定は有効？

    解説：有効です。offset-x と offset-y が揃っているため成立します（blur や spread、色は省略可能）。

  4. 問題：影を2つ重ねたい。指定方法は？

    解説：カンマ区切りで並べます。box-shadow: 0 1px 2px ... , 0 6px 18px ...; のように書きます。

  5. 問題：text-shadow と box-shadow の違いを一言で。

    解説：text-shadow は文字、box-shadow は要素の箱に影をつけます。

よくある質問（FAQ）

影の色は何色が正解ですか？
黒が無難ですが、透明度込みで考えるのがコツです。rgba(0,0,0,0.12) のように薄くし、必要なら2枚に分けます。背景が暗い場合は透明度を下げる/色相を少しずらすなどで馴染ませます。
影が切れるのはバグですか？
多くの場合は仕様通りです。overflow: hidden などで“はみ出し”がクリップされています。影を見せたいなら、外側の要素に影を持たせる構造にします。
フォーカスリングは box-shadow で作ってもいいですか？
可能です。ただし薄すぎると見落とされます。outline を消さない、消すなら同等以上に見える表示を作る、:focus-visible を使う、を守ると安全です。
box-shadow をアニメーションさせても大丈夫？
小さな変化ならOKです。ただし大きなぼかしや広い影は重くなりやすいので、変化は控えめに。prefers-reduced-motion で無効化する配慮も入れます。
影で“押せそう”に見せたのにクリックされません
影はクリック領域を増やしません。タップしやすさは、padding やボタン自体のサイズ、cursor、ラベル表現で作ります。

よくあるエラー／症状 早見表

症状：影が見えない
原因候補：上書き（box-shadow: none）/ 透明度が低すぎる / 背景と同化
最短確認：DevTools の Computed で box-shadow を確認
解決の方向性：勝っているルールを直す、透明度を上げる、影を2枚にする
症状：影が途中で切れる
原因候補：overflow: hidden、clip-path、角丸クリップ
最短確認：親要素/自分の overflow を確認（DevTools の Styles）
解決の方向性：外側のラッパーに影を持たせる、クリップをやめる/範囲を広げる
症状：スクロールが重い
原因候補：大きい blur、広い影、固定要素に影、影のアニメーション
最短確認：影のサイズを減らして体感が変わるか試す
解決の方向性：影を小さく薄く、枚数を減らす、アニメは控えめに
症状：フォーカスが見えない/分からない
原因候補：outline: none を入れた、影が薄い、背景と同化
最短確認：キーボード操作（Tab）で確認、DevTools で :focus-visible を強制
解決の方向性：outline を戻す、リングを太く/濃くする、色・境界線も併用

まとめ：迷ったときの判断軸