意図しない横スクロールが出るときの原因と対処

横スクロールは必ず何かが幅を超えている

意図しない横スクロールが出るとき、ページのどこかに画面幅（ビューポート幅）より大きい要素が必ず存在します。逆に言えば、その一つを見つけて収めれば横スクロールは消えます。

症状が軽いと、右に数ピクセルだけ動く程度のことも多く、原因の要素は画面外にはみ出していて目視では見つけにくいのが厄介です。そこで、当てずっぽうではなく順序立てて切り分けるのが近道です。

ありがちな原因のパターン

経験的に、横スクロールの原因は限られたパターンに集中します。心当たりがないか、まず次を見比べてください。

• 幅 100% の要素に左右の padding や border を足し、box-sizing 未指定で合計が画面を超えている。
• 100vw を使っており、縦スクロールバーの幅ぶん実際の表示領域を超えている。
• 画像や動画、iframe、長い URL の文字列が折り返されず親をはみ出している。
• 負の margin や absolute 配置の要素が画面右側へ飛び出している。
• 幅の広い table やコードブロックが折り返しもスクロールもされずに伸びている。

症状別チェック表

意図しない横スクロールが出るときの原因と対処は、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。

確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。

• 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
• 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
• 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
• 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する

原因の要素を特定する手順

パターンに当てはまらないときは、開発者ツールを使って機械的に犯人を絞り込みます。安易に overflow-x: hidden で蓋をする前に、原因そのものを直すのが理想です。

1. 開発者ツールをスマホ表示にし、横スクロールが出る幅を再現する。
2. コンソールで全要素の幅を調べ、ビューポート幅より大きい要素を一覧化する。
3. 見つかった要素をハイライトし、どこが画面右へはみ出しているか目視で確認する。
4. 原因の要素に max-width: 100% や box-sizing: border-box、折り返し指定を加えて収める。
5. 横スクロールが消えたか、別の原因要素が残っていないかを再確認する。

overflow-x: hiddenは最後の手段

body や html に overflow-x: hidden を当てると、横スクロール自体は消せます。しかしこれは原因を隠すだけで、はみ出した要素は依然として存在し、要素の一部が見えなくなったり、position:sticky が効かなくなったりする副作用があります。

まずは原因の要素を特定して幅を収めること。box-sizing: border-box を全体に適用しておくと、padding や border による幅オーバーをまとめて防げるため、予防策として有効です。

どうしても原因を一つに絞り切れず、応急処置として hidden を使う場合でも、後から原因要素を直して hidden を外せるよう、何を抑え込んだのかは記録しておくのが安全です。

修正版を実機幅で確認してもらう

横スクロールの有無は端末や画面幅で差が出るため、修正後は実機で確かめてもらうのが確実です。特に右端のわずかなはみ出しは、エミュレーションでは見落とすことがあります。

ギガサイト便なら、修正した HTML をドロップして発行された 〇〇.giga-site.com の URL を相手のスマホで開いてもらうだけで、その場で横方向に動かないかを試せます。エッジ配信で表示が速く、確認のテンポを保てます。

同じ URL のままファイルを差し替えられるので、原因の切り分けで何度も修正版を出しても、リンクを送り直す手間がありません。確認用ページには noindex が付き検索結果には出ませんが、関係者以外に見せたくないときは認証方式の併用も検討してください。