「スマホで見ると右に少し余白ができて、横にスクロールしちゃうんですが……」——制作会社のディレクターから、既存サイトの改修でこういう連絡をもらうことがよくあります。デザインカンプ通りに作ったはずなのに、実機で見ると崩れている。原因が分からず「レスポンシブ全体を作り直したほうがいいのか」と身構えてしまう方も少なくありません。

先に結論を言うと、この手の崩れの多くは「どこかの要素が画面幅を超えている」一点に集約されます。ページ全体をやり直す必要はほとんどなく、はみ出している箱を1つ見つけて直せば収まる。実装者が現場で何を見て、どう直しているのかを順番に書きます。

横スクロールを生む4つの原因と直し方。固定px幅、画像・動画・埋込、flex・gridの子、100vwの幅指定

「崩れ」の正体は、たいてい“はみ出し”ひとつ

横スクロールが出るということは、ページのどこかに「画面より横に広い箱」が存在する、というのがほぼ唯一の意味です。文字が詰まって見えたり、要素が右にずれて見えたりと症状はさまざまでも、犯人は「幅をはみ出した1要素」であることが大半。

だから実装者が最初に考えるのは「レイアウト全体をどう組み直すか」ではありません。「何が画面幅を超えているのか」を特定することです。ここさえ分かれば、直し方は数パターンに絞られます。

犯人を特定する——実装者が最初にやること

ブラウザの開発者ツール（DevTools）を開き、はみ出している箱を探します。手っ取り早いのは、全要素に一時的な枠線を引いて、画面の外へ飛び出している箱を目で見つける方法です。

* { outline: 1px solid rgba(255, 0, 0, 0.4); }

この1行を当てると、どの箱が右端をはみ出しているかが一目で分かります。要素が入れ子だと親をたどる手間はありますが、飛び出した箱の色枠が右にはみ出て見えるので、範囲はすぐ絞れる。

もう一段はっきりさせたいときは、コンソールで「画面幅より広い要素」を直接洗い出します。

document.querySelectorAll('*').forEach((el) => {
  if (el.offsetWidth > document.documentElement.clientWidth) {
    console.log(el);
  }
});

返ってきた要素が、はみ出しの発生源。ここから原因のパターンを見ていきます。

よくある4つの原因と、直し方

改修で遭遇する「はみ出し」は、だいたい次の4つのどれかです。

  • 固定のpx幅が残っている：width: 320px のように数値で幅を決めている箱が、画面幅より広くなって溢れる。max-width: 100% を足すか、幅指定自体を % や可変値に変えると収まります。
  • 画像・動画・iframeがそのまま：元サイズが大きい画像や埋め込みが親を突き破る典型パターン。img, video, iframe { max-width: 100%; height: auto; } を効かせておけば、親の幅に合わせて縮みます。
  • flex / grid の子が縮まない：flexアイテムやgridアイテムには初期値で min-width: auto が効いていて、中身より小さくならない、という仕様があります。長い文章や大きな子要素があると、親を無視して広がる。min-width: 0 を子に当てれば縮むようになります。gridなら 1fr を minmax(0, 1fr) にするのも同じ狙いです。
  • `100vw` を幅に使っている：width: 100vw は縦スクロールバーの幅を含んだ値になるため、その分だけ画面より広くなり、横スクロールを生みます。素直に width: 100% にすれば、スクロールバーを除いた幅に収まる。（Chrome 145以降など一部の環境では 100vw がスクロールバー分を差し引くよう改善されていますが、全ブラウザで揃うわけではないので 100% が無難です。）

特にflex/gridの min-width: auto は、カンプ通りに組んだのに崩れる原因として見落とされがちです。CMSで可変になる長いテキストや、横並びのカードで起きやすい。

overflow-x: hidden で隠すのは、応急処置にすぎない

横スクロールを消したいとき、body { overflow-x: hidden; } で蓋をする対処をよく見かけます。確かにスクロールバーは消えますが、はみ出している箱はそのまま残っている。画面外に切れたコンテンツが読めなかったり、タッチ操作で右に少し動く違和感が残ったりします。原因を消したわけではなく、見えなくしただけです。

もう一つ、副作用があります。ある要素に overflow を付けると、その要素はスクロールの基準（スクロールコンテナ）になり、内側の position: sticky が効かなくなる。追従させたいヘッダーやサイドバーが、親の overflow: hidden のせいで固定されない、という不具合につながります。どうしても隠す必要があるなら、スクロールを完全に無効化する overflow: clip のほうが副作用が小さい。

ただ、本筋はあくまで「はみ出している箱そのものを直す」ことです。犯人を1つ特定して幅を収めれば、蓋をしなくても横スクロールは消えます。

表示速度と同じで、崩れも「なんとなく全体が悪い」ように見えて、実際は具体的な一箇所が原因であることがほとんどです（表示が遅い原因の切り分け方も同じ考え方で診ています）。

他社が作った既存サイトの改修でも、崩れの特定と部分的な修正だけを切り出してお請けできます。「スマホで崩れていると指摘されたが、原因が分からない」「フルリニューアルはせず、崩れだけ直したい」——そういうときは、お問い合わせからデザインデータや対象URLを添えてご相談ください。実機で崩れの原因を切り分けて、どこを直せばよいかからお伝えします。デザインデータからの新規コーディングについてはFigma・XDからの依頼の流れもどうぞ。

本記事は2026年7月時点の情報です。ブラウザの仕様（100vw の挙動など）は変わることがあります。