レスポンシブ編 04 / 10 実践 約6分
横スクロールが出る原因と直し方
スマホで横に動いてしまう症状の原因を5つに分類し、上から順に潰していく手順を解説します。レスポンシブ対応で最初に直すべき不具合です。
この教材で学べること
- 横スクロールが起きる5つの原因
- 犯人を特定する探し方の順番
- 原因別の直し方
スマホで画面が横に動いてしまう——レスポンシブ対応で最初に直すべき不具合です。原因は必ず「画面幅より大きい要素が、どこかに1つある」ことです。感覚で直そうとせず、犯人を特定してください。
5つの原因
| 原因 | 起きている状態 | 直し方 |
|---|---|---|
| 幅が固定の要素 | 320pxなど数値指定のまま | 可変（親に合わせる）に変える |
| 横並びが解除されていない | 3枚のカードが横に並んだまま | スマホ幅で縦積みに変える |
| 画像が大きい | 画像の幅指定が画面より大きい | 幅を可変にする |
| 長い英数字・URL | 途中で折り返されず1行のまま伸びる | 折り返しの設定を入れる |
| 左右の余白の足し算 | 幅100%＋左右余白で画面を超える | 外側ではなく内側の余白にする |
頻度としては上2つで大半を占めます。まずここから疑ってください。
犯人の探し方
探すときは、セクション単位で上から順に非表示にしていく方法も有効です。非表示にした瞬間に横スクロールが消えたら、その中に犯人がいます。範囲を半分ずつ絞ると数分で特定できます。
原因別の直し方
| 症状 | 確認する場所 | 変更内容 |
|---|---|---|
| 特定のセクションだけ横に動く | そのセクション内の幅指定 | 固定 → 可変 |
| 全ページで少しだけ動く | ヘッダー・フッター | ロゴやメニューの固定幅を見直す |
| 画像のある箇所で動く | 画像の幅・最小幅 | 幅を可変、最小幅の指定を外す |
| 文章の箇所で動く | URLや英字の長い文字列 | 折り返しを許可する |
実機で確認する：ブラウザの幅を狭めるだけでは、スマホ特有の挙動を再現しきれないことがあります。公開前に必ず実機で開いて、指で横に動かないかを確かめてください。
次は横並びを縦積みに変えるです。