横スクロールが出てしまうときの直し方

横スクロールが出る原因は、ほぼ必ず「画面より幅の広い要素がどこかに1つある」ことです。直し方は、その犯人を見つけて幅を収めるだけ。この記事では、犯人を30秒で見つける方法と、よくある原因6つの直し方をまとめます。

まず犯人を見つける

当てずっぽうでCSSを足す前に、どの要素がはみ出しているかを見ます。

方法1：全部の要素に枠線を付ける

開発者ツール（右クリック→検証）のConsoleに次の1行を貼って、Enterを押します。

document.querySelectorAll('*').forEach(el => el.style.outline = '1px solid red');

すべての要素に赤い枠が付くので、画面の右端を越えて伸びている枠を探します。それが犯人です。ページを再読み込みすれば枠は消えます。

方法2：はみ出している要素をConsoleに一覧で出す

ページが長くて目で探しにくいときは、こちらを貼ります。

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

画面の右端より右まで伸びている要素が、Consoleに並びます。名前の上にマウスを乗せると、ページ上のその要素が青く光ります。

よくある原因と直し方

1. 固定の幅（width: 800pxなど）

パソコンでは収まっていた固定の幅が、スマホの画面では入りきらずにはみ出します。

/* ✕ スマホで画面より広くなる */
.box { width: 800px; }

/* ○ 最大800pxまで。狭い画面では画面幅に合わせる */
.box { max-width: 800px; width: 100%; }

2. 画像や動画が大きすぎる

画像は何も指定しないと元のサイズのまま表示されます。横幅2000pxの写真なら、2000pxの幅になります。

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

この指定はリセットCSSにも入っていることが多いので、まだ書いていなければ最初に入れておきます。

3. width: 100%とpaddingを一緒に使っている

width: 100%にpaddingやborderを足すと、その分だけ幅が100%を超えます。

/* 全部の要素で、padding と border を幅の内側に数える */
*, *::before, *::after {
  box-sizing: border-box;
}

box-sizing: border-boxにすると、width: 100%は「余白も枠線も込みで100%」になり、はみ出しません。

4. 100vwを使っている

100vwはスクロールバーの幅も含めた画面幅です。Windowsのパソコンなど、縦スクロールバーが場所をとる環境では、その分（15px前後）だけはみ出します。

/* ✕ スクロールバーの分はみ出す */
.hero { width: 100vw; }

/* ○ 親の幅いっぱい */
.hero { width: 100%; }

Macではスクロールバーが場所をとらない設定が多いため、自分のパソコンでは出ないのに、Windowsで見ると出るという形で見つかりやすい原因です。

5. 長い英単語やURLが折り返されない

日本語は1文字ずつ折り返されますが、英単語やURLは区切りのない1語として扱われ、途中で折り返されません。

p {
  overflow-wrap: anywhere;
}

overflow-wrap: anywhereを付けると、収まらないときだけ単語の途中でも折り返されます。

6. 横に並べた要素が折り返さない

Flexboxで横に並べたカードが、画面が狭くなっても1列のまま押し出されているパターンです。

.cards {
  display: flex;
  flex-wrap: wrap; /* 入りきらなければ次の行へ */
  gap: 16px;
}

position: absoluteで右側に置いた飾りや、margin-rightがマイナスの要素も、同じようにはみ出しの原因になります。

overflow-x: hiddenで隠すのは最後の手段

body { overflow-x: hidden; }と書けば、横スクロールは見た目のうえでは消えます。ただし、

• はみ出している要素はそのまま切れて見えなくなるだけで、直ってはいない
• position: stickyが効かなくなることがある
• スマホによっては横スクロールが残る

という副作用があります。まず犯人を直し、どうしても切ってよい飾りだけに使う、という順番にしてください。

まとめ

1. 横スクロールの原因は画面より広い要素が1つあること
2. Consoleで全要素に枠線を付けるか、はみ出している要素を一覧で出して犯人を探す
3. よくある原因は固定幅・大きい画像・padding込みの100%・100vw・長い英単語・折り返さないFlexbox
4. overflow-x: hiddenは原因を隠すだけ。直すのが先