影の色は何色が正解ですか？

黒が無難ですが、透明度込みで考えるのがコツです。rgba(0,0,0,0.12)のように薄くし、必要なら影を2枚に分けます。

影が切れるのはバグですか？

多くの場合はoverflow: hiddenなどのクリップによる仕様通りの見切れです。影を見せたいなら外側のラッパーに影を持たせる構造にします。

フォーカスリングはbox-shadowで作ってもいいですか？

可能です。ただし薄すぎると見落とされます。outlineを無闇に消さず、消すなら同等以上の視認性を確保し、focus-visibleと組み合わせるのが安全です。

box-shadowをアニメーションさせても大丈夫？

小さな変化ならOKですが、大きいぼかしや広い影は重くなりやすいです。動きを減らす設定（prefers-reduced-motion）ではアニメーションを切る配慮も入れます。

CSS

この記事では、要素の外側や内側に影を付けるCSSのbox-shadowの書き方と、見やすく使うポイントを説明します。

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プロパティです。

Table Of Contents

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

box-shadow が「どこに、どう描画される影」なのかを説明できる
最短の型で、自然で再現性の高い影をコピペで作れる
複数の影（カンマ区切り）や inset を、用途で使い分けられる
「効かない」「切れる」「重い」などのよくある事故を、原因から切り分けられる
フォーカス表示（:focus-visible）として安全に使う判断ができる
試験で問われやすい“ひっかけ”（outline / filter: drop-shadow() との違い等）を整理できる

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

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

見た目だけを変える（影がついても、要素のサイズや配置は変わりません）
外側だけでなく内側にも影を入れられる（inset）
影を重ねられる（カンマ区切りで複数指定）

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

何のために存在するか

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 などで、影が見切れます。影を見せたい要素に対して、外側のラッパーで影を持たせると解決しやすいです。

影が「重い」

大きい blur と大きい spread はコストが上がりやすい
スクロールに影が追従する要素（固定ヘッダーなど）は特に注意
影のアニメーションは、変化を小さく・時間を短く・回数を少なく

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

フォーカスは消さない：:focus-visible を使い、キーボード操作時に見失わない表示を用意する
薄すぎる影は避ける：背景と同化すると状態が伝わらない。輪郭が必要なら outline や border も併用する
動きは控えめ：transition は短く、小さく。prefers-reduced-motion で無効化する
影だけで意味を伝えない：エラー/必須/選択状態は、色や文言、アイコンなども併用する

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

用語ミニ辞典

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

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

box-shadow はレイアウトに影響しない（押し広げない）
影はクリック領域を広げない（タップしやすさはサイズで作る）
overflow: hidden で切れることがある（“効かない”と勘違いしやすい）
フォーカス用途では outline を無闇に消さない

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

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

解説：overflow: hidden（自分または親）を疑います。影は描かれていても、はみ出しが切られます。
問題：ボタンのフォーカス表示を作りたい。outline: none を付けるのは安全？

解説：基本は非推奨です。消すなら、:focus-visible で同等以上に見えるリングを必ず用意します。
問題：box-shadow: 0 10px red; の指定は有効？

解説：有効です。offset-x と offset-y が揃っているため成立します（blur や spread、色は省略可能）。
問題：影を2つ重ねたい。指定方法は？

解説：カンマ区切りで並べます。box-shadow: 0 1px 2px ... , 0 6px 18px ...; のように書きます。
問題：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 を戻す、リングを太く/濃くする、色・境界線も併用

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

影は 見た目だけ。レイアウトやクリック領域を増やす目的では使わない
最初は 薄い影を1〜2枚。強い影・大きいぼかしは最後に検討
影が見えないときは、Computed → overflow → 透明度 の順に切り分ける
フォーカス用途は :focus-visible を基本にし、outline を無闇に消さない
動きは控えめにし、prefers-reduced-motion で無効化する