WordPressの横スクロールを止める：原因を特定する実践チェックリスト

WordPressサイトで「スマホやPCで少し横に動かさないと全体が見えない」という症状が出たとき、overflow-x: hidden だけで隠すと原因を残したままになります。この記事では、はみ出している要素を特定して根本修正する手順をまとめます。

1. まず原因要素を可視化する

ブラウザの開発者ツールで、ページ幅を超える要素を確認します。コンソールに次を入力します。

[...document.querySelectorAll('*')].filter((el) => {
  const rect = el.getBoundingClientRect();
  return rect.right > document.documentElement.clientWidth || rect.left < 0;
}).map((el) => ({
  tag: el.tagName,
  class: el.className,
  left: el.getBoundingClientRect().left,
  right: el.getBoundingClientRect().right
}));

一覧に出た要素を順番に確認します。スライダー、表、画像、固定幅のコンテナ、負のマージンが典型的な原因です。

2. 画像と動画を親幅に収める

img, video, iframe {
  max-width: 100%;
  height: auto;
}

WordPressの画像ブロックだけでなく、埋め込み動画や地図にも適用します。幅属性がHTMLに直接入っている場合でも、max-width で画面内に収められます。

3. 固定幅を見直す

width: 1200px のような指定は小さい画面ではみ出します。最大幅と可変幅を組み合わせます。

.content-container {
  width: min(100% - 32px, 1200px);
  margin-inline: auto;
}

これなら左右16pxの余白を保ちながら、広い画面では1200pxを上限にできます。

4. GridとFlexの最小幅を確認する

GridやFlexの子要素は内容によって縮まらないことがあります。

.grid-item,
.flex-item {
  min-width: 0;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(16px, 3vw, 32px);
}

特に長いURL、コード、表があるカードでは min-width: 0 が効きます。

5. 表とコードだけ横スクロールを許可する

ページ全体ではなく、必要な部分だけスクロールさせます。

.wp-block-table,
pre {
  max-width: 100%;
  overflow-x: auto;
}

6. 100vwの落とし穴

width: 100vw はスクロールバー幅を含むため、デスクトップでわずかにはみ出すことがあります。通常のセクションでは width: 100% を優先します。全幅表現が必要な場合は、テーマ側のレイアウトと負のマージンをセットで点検します。

7. 最後の安全策

根本原因を修正したうえで、保険として次を追加します。

html, body {
  max-width: 100%;
  overflow-x: clip;
}

clip に未対応の環境も考慮する場合は、フォールバックとして hidden を先に書きます。

確認する画面幅

• 320px
• 375px
• 390px
• 768px
• 1024px
• 1440px

ヘッダー、固定ボタン、スライダー、フォーム、表、フッターまで確認します。横スクロールはCSSだけでなく、JavaScriptが付与するインラインスタイルで発生することもあるため、操作後の状態もテストすると安心です。