overflow:hiddenが何を切るのか
overflow:hiddenは、要素の枠（パディングボックス）からはみ出した子要素を切り取って非表示にする指定です。横スクロールを抑えたり、角丸の内側に画像を収めたりするのに便利な反面、枠から外に出したい要素まで一律に切ってしまいます。
よくあるのは、カードに角丸とoverflow:hiddenを付けた結果、ホバーで出るツールチップやドロップダウンメニュー、要素の外側に広がるドロップシャドウまで切れてしまうケースです。意図したクリップと意図しないクリップを区別することが出発点です。
親子関係を見直して切れる範囲を限定する
中身が切れる場合、まずどの祖先要素にoverflow:hiddenが付いているかを特定します。直接の親だけでなく、何階層も上の要素のoverflowが効いていることもあるため、開発者ツールで上位要素を順にたどると見つけやすくなります。
対処の基本は、overflow:hiddenの適用範囲を、本当にクリップが必要な部分に限定することです。たとえば角丸の画像だけを別のラッパーで囲み、そこにだけoverflow:hiddenを付ければ、外に出したいツールチップは親要素の外で自由に表示できます。
症状別チェック表
overflow:hiddenで中身が切れて見えないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
外に出したい要素はポップアップ層に逃がす
ツールチップやメニューのように要素の外へ大きく広がるものは、クリップされる親の内側に置かないのが確実です。bodyの直下など切り取られない場所に描画し、表示位置だけをスクリプトで合わせると、親のoverflowに左右されません。
新しいブラウザではpopover属性や、最上位に表示する仕組みを使うと、こうした「親の枠を越えて表示したい要素」を扱いやすくなります。影の切れだけが問題なら、overflow:hiddenをやめてborder-radiusとともにクリップ範囲を調整する方法も検討できます。
切れる問題を切り分ける手順
次の順で確認すると、どこで切られているか特定しやすくなります。
- 切れている要素を選択し、祖先をたどってoverflowがhiddenの要素を探す
- そのoverflowが横スクロール抑制や角丸クリップなど、本当に必要か判断する
- 必要なら、クリップ対象だけを別ラッパーで囲んでoverflowをそこに限定する
- 外に広がるツールチップやメニューはクリップされない層へ移す
- 影が切れるだけならoverflow指定の要否を見直す
- 複数の画面幅で、必要な要素が表示され不要なはみ出しが消えたか確認する
意図どおりの表示を共有で確認する
overflowの調整は、ある画面幅では直っても別の幅で再び切れる、ということが起こりがちです。複数の画面サイズや実機での確認が欠かせません。
修正版を関係者に見てもらうなら、ギガサイト便にHTMLやZIPをドロップして共有URLを発行すると、各自が手元の端末でツールチップやメニューが正しく表示されるか確かめられます。同じURLのまま中身を差し替えられるため、クリップ範囲を調整するたびに見比べてもらえます。一時公開ページにはnoindexが付くので検索結果に出ず、必要に応じてパスワードや公開期限を設定して共有範囲を絞れます。
よくある質問
横スクロールを消したいのですが、overflow:hidden以外に方法はありますか。
まず横にはみ出している原因要素を特定し、widthの指定ミスやnegative marginを直すのが根本対処です。それでも残る場合はbodyやラッパーにoverflow-x:hiddenを限定して付けると、縦方向のクリップを避けつつ横スクロールだけ抑えられます。
角丸の中に画像を収めつつ、影は外に出したいです。
角丸とoverflow:hiddenは画像用のラッパーだけに付け、影はそのラッパーの外側にある親要素に設定すると両立できます。クリップが必要な範囲と影の範囲を別の要素に分けるのがポイントです。
overflow:clipとoverflow:hiddenの違いは何ですか。
どちらもはみ出しを切り取りますが、overflow:clipはスクロールを生まず、より純粋にクリップだけを行います。スクロール領域を作りたくない場合はclipが適することがあります。ブラウザ対応を確認したうえで使い分けてください。
ドロップダウンが親に切られます。スクリプトを使わず直せますか。
切っている親のoverflowを外せるなら、それが最も簡単です。外せない場合は、ドロップダウンをその親の外に配置するか、popover属性など最上位に表示する仕組みを使うと、スクリプトでの位置合わせを最小限にできます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。