WordPressでサイトを作っていると、
ある日突然「横スクロールが出る」ことがあります。
特に、
- フル幅レイアウトを使った
- デザイン的に要素を少しズラした
- 画像や背景を画面端まで広げた
こうした調整を入れたあとに、
見た目は問題ないのに横スクロールだけが出る、というケースは珍しくありません。
今回は、WordPress制作の実務で実際に遭遇した事例をもとに、
横スクロールが出た時の現実的な対策を整理します。
横スクロールが出る主な原因
WordPressで横スクロールが発生する原因は、ほぼ次のどれかです。
width: 100vwを使っているcalc(50% - 50vw)などで要素を中央基準からズラしている- 画像をマイナスマージンで重ねている
- 固定px幅の要素を flex レイアウトで並べている
- ブロックエディタ（Gutenberg）の自動CSSと自前CSSの併用
重要なのは、
原因が1つとは限らないという点です。
複数の要素がわずかに画面外にはみ出し、
その「合算」で横スクロールが発生していることがほとんどです。
「ここを直せば終わり」にならない理由
横スクロールが出た時、
このセクションが怪しい
ここを直せば消えるはず
と考えて1つずつ修正しても、
なかなか解消しないことがあります。
これは、
- body はページ内の どこか1pxでもはみ出すと反応する
- はみ出している要素が 複数同時に存在する
ためです。
つまり、
犯人探しよりも先に、全体を安定させる必要があるということです。
一番シンプルで確実な対策
結論から言うと、
次の1行で横スクロールが一発で消えるケースが非常に多いです。
html, body {
overflow-x: hidden;
}
この指定は、
- 100vw使用時のズレ
- ブラウザごとの小数点誤差
- 管理バーの有無による幅差
- テーマとブロックCSSの噛み合い
といった 構造的なはみ出し をまとめて防ぎます。
「原因を隠しているだけ」ではないのか？
よくある不安ですが、
この対応は実務的には 逃げではありません。
WordPressでは、
- テーマ側でレイアウトを制御
- ブロックエディタ側でも幅指定が入る
- その上にカスタムCSSを追加する
という多層構造になりがちです。
この状況で
「bodyまで横スクロールを伝播させない」
という判断は、合理的な安全策です。
実際の制作現場では、
overflow-x: hiddenで全体を安定させる- 必要に応じて、個別ブロックを整理する
という順番で対応することが多いです。
CSSはどこに書くべきか
この指定は、サイト全体にかかるCSS に入れるのが適しています。
理由は、
- 特定ページだけの問題ではないことが多い
- 今後追加するページでも再発する可能性がある
ためです。
/* サイト全体の横スクロール対策 */
html, body {
overflow-x: hidden;
}
横スクロール対策で意識しておきたいこと
- フル幅表現（100vw）は横スクロールとセットで考える
- マイナスマージンは「はみ出す前提」で使う
- ブロックエディタの自動CSSを過信しない
ただし、
すべてを完璧に制御しようとしなくていい、というのも事実です。
まとめ
- WordPressの横スクロールは珍しい問題ではない
- 原因は1つではなく、複数の要素が重なって起きる
- まずは
html, body { overflow-x: hidden; }で全体を安定させる - 問題がなければ、そのまま運用してOK
横スクロール対策は、
「きれいに直す」よりも
「再発しない状態を作る」ことが重要。
この1行は、そのための現実解です。
