謎の横スクロールが出る原因と対策まとめ！CSS・HTMLコーディング時のチェックポイント

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトを制作していると、「意図していないのに横スクロールが出てしまう」という現象に遭遇したことはありませんか？

スマホやPCでページを確認すると、右端に謎の余白が生まれ、横にスワイプできてしまう状態になる。
見た目は地味なバグですが、ユーザー体験を大きく損ない、納品直前のチェックで慌てる原因にもなります。

実際、横スクロールが出る原因はひとつではありません。
画像や要素の幅指定、CSSレイアウトのバグ、アニメーションのtransformの影響、ブラウザ特有の挙動など、複数の要因が絡むケースも多々あります。

この記事では、横スクロールが発生する代表的なパターンを洗い出し、原因特定のためのチェック手順と具体的な解決方法をまとめました。
制作現場での実践的なノウハウとして活用いただける内容になっていますので、横スクロールバグで困ったときのリファレンスとしてぜひブックマークしてください。

横スクロールが発生する主な原因

1. 画像や要素の幅指定ミス

一番多い原因が、幅100%指定の画像や要素に余計なマージン・パディングが追加されているケースです。

2. 絶対配置（position:absolute / fixed）によるズレ

絶対配置した要素が意図せず親要素からはみ出し、横スクロールが発生することもあります。

3. transformアニメーションの影響

スライダーやフェードインなど、translateX()を使ったアニメーションが要素を一時的に画面外に動かし、スクロールバーを誘発することがあります。

4. 表やコードブロックのはみ出し

テーブルやコードブロックは長い単語や固定幅のデータが並ぶため、狭い画面で横スクロールが発生しがちです。

5. マイナスmarginやcalc()の誤差

margin-left: -10px;
width: calc(100% + 20px);

といった指定が積み重なることで、意図せず余白が発生するケースがあります。

原因特定のためのチェック手順

よく使う横スクロール対策コード

html, body { 
　overflow-x: hidden;
 }
img { 
　max-width: 100%; 
　height: auto; 
} 
* { 
　box-sizing: border-box; 
} 

まとめ

satokotadesignキャンペーン実施中！