overflowのhidden指定で影が消える？ボックスシャドウを表示する対処法を解説

「overflow hidden 影 消える」という問題で悩んでいませんか。Webデザインでよくあるシーンですが、親要素にoverflow:hiddenを指定すると子要素のbox-shadowがクリップされてしまい、影が見えなくなることがあります。この記事では、その原因を分かりやすく解説し、最新のCSS対応策や現場で使える実践的な解決方法を具体例付きで紹介します。影をきちんと表示させたい開発者・デザイナーに向けた内容です。

overflow hidden 影 消える現象とは何か

まず理解したいのは、overflow hidden指定がどのように影（box-shadow）を消してしまうかというメカニズムです。親要素にoverflow:hiddenが設定されると、その要素のパディングボックスを超えた部分の描画が切り捨てられます。この切り捨ての境界が、子要素のシャドウが広がる範囲にも影響を及ぼすため、影が見えなくなるのです。最新のブラウザ仕様にもとづくと、overflow:hiddenは内容がはみ出た部分を完全に隠す動作をします。visibleなどとは異なり、スクロールバーも出ません。
この現象は、特にカードデザインや要素にラウンド角とシャドウを付ける際などによく起きます。

overflow hiddenとは

overflow hiddenは、コンテンツが親要素のパディングボックスを超える際、それを画面外に出さずに切り落とすプロパティ値です。水平方向・垂直方向ともにはみ出した子要素や装飾（シャドウなど）は描画されず、見た目上「消えた」ようになります。visibleやautoとは異なり、スクロールで隠れた部分を閲覧可能にすることもできません。

box-shadowが描画される領域の仕組み

box-shadowは、要素のボックスモデル（content＋padding＋border領域）の外側に装飾的な描画がされるものです。このシャドウ部分は内容の一部ではなく「描画効果」の一部なので、親要素のoverflowによるクリッピング対象となる描画（ink overflow）に含まれます。つまり、シャドウが親要素の枠をはみ出す場合、overflow:hiddenがその部分の表示を妨げるのです。

影が消える典型的なケース

具体的には、以下のようなケースで影が消えることが多いです：

• 親要素にoverflow:hiddenおよび固定高さや幅が指定されているカードレイアウト
• ラウンドコーナーを持つ親要素の内部で子要素にシャドウを付けたとき
• 要素の拡大・アニメーションによってシャドウがはみ出してしまうHover時やScale変形時

これらの状況では、シャドウが完全に親要素の枠内に収まらないため、overflow:hiddenによってクリップされてしまいます。

影が消える原因を技術的に理解する

影が消える現象の正体はCSSの描画モデルとoverflowの仕様にあります。overflow:hiddenは親要素のpadding-boxを超えた描画効果を切る「クリッピング」動作を行います。シャドウはこのpadding-boxの外に描画されることがあるため、クリッピングされて消えてしまうのです。最新仕様ではoverflow:clipとoverflow-clip-marginという新たなプロパティによりクリッピングの範囲調整が可能となりつつあります。これらを使うと、影を完全に消すことなく見せることが可能です。

CSS描画のステージとクリッピング

描画はコンテンツ描画→境界描画→装飾（シャドウ・アウトラインなど）というステージを経て行われます。シャドウはこの最後の装飾ステージで描かれますが、overflow:hiddenが先にクリップ領域を定義しているため、装飾のはみ出た部分が描画されなくなります。この順序が、shadowが見えなくなる根本原因です。

overflowとoverflow:clipの違い

overflow:hiddenはクリッピングを行い、スクロール可否に関係なく要素からはみ出す部分を隠します。一方overflow:clipは、スクロールも禁止された上で同様にクリッピングを行いますが、新しい仕様にてoverflow-clip-marginと組み合わせて使うと、クリッピングの境界を指定可能です。これは、影など装飾的効果がぎりぎり切れてしまう問題を緩和する手段として注目されています。

overflow-clip-marginの最新状況

overflow-clip-marginは、クリップされた領域の境界を要素の枠からどれだけ余裕を持たせるかを設定できるプロパティです。length指定でクリッピング領域を拡張できるため、影が見えるようになることがあります。仕様としてはCSS Overflow Level 4で定義され、主要なブラウザで部分的にサポートされていますが、Safariなどではまだ完全ではないため、フォールバック策を検討すべきです。

overflow hidden影 消える問題を解決する実践的な方法

影が消えて困っている場合の具体的な対処法を紹介します。現場で使えるCSSテクニックやHTML構造の工夫、最新仕様を活用した方法を複数紹介しますので、用途に応じて使い分けて下さい。

親要素のoverflowをvisibleに変更する

最もシンプルな解決策は、親要素のoverflowをhiddenではなくvisibleにすることです。こうすれば親要素の枠外にはみ出すshadowが全て表示されます。ただし、visibleにすると子要素が意図せず親枠を超える表示になることもあり、レイアウト崩れや予期せぬ重なりが起こる可能性があります。用途に応じて実装を慎重に検討する必要があります。

paddingやマージンで余白を確保する

親要素に十分なpaddingやmarginを持たせて、シャドウが収まる物理的スペースを作る方法です。例えば、親要素にpadding: 10pxなどを設定すれば、シャドウのぼかしやスプレッドで外にはみ出す部分が中に収まる可能性があります。これは互換性が高く、すぐに試せる方法です。ただしpaddingを入れると内側の配置が変わるため意図しないデザイン調整が必要になるかもしれません。

overflow:clipとoverflow-clip-marginを活用する

最新仕様を活用するなら、overflow:clipとoverflow-clip-marginの組み合わせが有効です。overflow:clipを指定すると、overflow:hiddenと同様にクリップされつつも、そのクリップ境界をoverflow-clip-marginで設定可能になります。これにより影が見えるようにクリッピング領域を調整できます。ブラウザサポート状況を確認して、必要に応じてフォールバックを用意しておくことが重要です。

filter: drop-shadow関数を使う

box-shadowではなくfilterのdrop-shadowを使う方法もあります。filter:drop-shadowは要素の透明部分や形状に沿って影を描画する特性があり、描画後のピクセル単位で影を付けるため、親要素によるクリッピングの影響を回避できるケースがあります。特にSVGや透過PNGのロゴなど、不規則な形の影を付けたいときに有効です。

偽要素(::before・::after)やラッパー要素を使う構造の工夫

影部分を別の要素や偽要素で描画し、親要素のoverflow指定の影響を受けにくくする方法です。例えば、子要素の周囲にposition:absoluteのラッパーを設けて、そのラッパーにbox-shadowを付与することで、親要素のoverflow:hiddenが直接影に影響を及ぼさないようにできます。ただしこの方法ではレイアウト構造やz-indexの調整が必要になり、その分複雑さが増します。

実例付き比較：対処法の効果と注意点

ここでは、複数の対処法を比較して、どの方法がどの状況に向いているか見ていきます。実例での効果と、注意すべきことを整理します。

ブラウザ対応とフォールバック戦略

最新仕様にもとづくoverflow:clipやoverflow-clip-marginはサポートが進んでいますが、すべてのブラウザで完璧に動作するわけではありません。特にSafariや古いモバイルブラウザでは挙動が不完全なことがあります。実務レベルでは、それらを考慮したフォールバック戦略を持つことが重要です。

サポート状況の確認

overflow-clip は多くのモダンブラウザでサポートされており、主要なレンダーエンジンでも使用可能なものが増えています。overflow-clip-marginも部分的に対応していますが、指定はoverflow:clipと組み合わせる必要があります。未対応ブラウザではこのプロパティが無視されるため、別の方法で対応できるように準備しておく必要があります。

フォールバック策を準備する方法

フォールバックとしては、親要素のoverflowをhiddenにしたままpaddingを追加する方法、偽要素を使う方法などがあります。またCSSに@supportsルールを使ってoverflow:clipが使えるかを判定し、使えない場合はoverflow:hiddenやpaddingによる処置を適用すると良いでしょう。こうすることで、新旧ブラウザ両方に適切に対応できます。

実装例：CSSのコード例

以下はシャドウが消える問題に対応したCSSコード例です。overflow:clipとoverflow-clip-marginを使える環境と使えない環境での使い分けを示しています。
例えば：

親要素にoverflow:clipとoverflow-clip-marginを指定し、子要素にbox-shadowを付与する。

フォールバックとして親要素のpaddingを追加し、overflow:hiddenでも影が見えるようにゆとりを持たせる。

まとめ

親要素にoverflow:hiddenを指定すると子要素のbox-shadowがクリップされて消える現象は、CSSの描画モデルとoverflowのクリッピング仕様に起因しています。影をきちんと表示させるには、親要素のoverflowをvisibleに変更するか、paddingやmarginで隙間を作るか、最新仕様であるoverflow:clipとoverflow-clip-marginを活用するなどの方法があります。
またfilter:drop-shadowや偽要素を使う構造的な工夫も有効です。ブラウザサポートに注意しつつ、フォールバック策を用意することがデザイン品質を保つ鍵です。これらの対処法を状況に応じて選び、影の消える問題を根本的に解消しましょう。