レイアウトが崩れる原因、上位3つ

レイアウトの崩れは、初心者がいちばん時間を溶かすところです。ただ、原因は思っているほど多くありません。よく出る3つを、見つけ方とセットで押さえておきましょう。

1. 横スクロールが出る — 中身が幅を超えている

スマホで見たときに横に動いてしまう現象です。どこか1か所、画面より広い要素があります。犯人の多くは次のどれかです。

• width: 100% に padding や border を足している（合計が100%を超える）
• はみ出す長いテキストやURL（改行できずに広がる）
• 画像に max-width を指定していない（元の大きさのまま表示される）
• 100vw を使っている（縦スクロールバーのぶんだけ超えることがある）

1つ目は box-sizing で解決します。次の指定を最初に書いておくと、padding や border を含めた大きさで計算されるようになり、この種の崩れが起きなくなります。

*, *::before, *::after {
  box-sizing: border-box;
}

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

2. 余白が思ったとおりにならない — 相殺と、二重指定

上下に隣り合う margin は、足し算ではなく「大きいほうだけ」が採用されます。これがマージンの相殺です。仕様どおりの動きなので、余白は下方向だけに付けると決めてしまうのが実用的です。

もうひとつ多いのが二重指定です。親に padding、子に margin を両方書いていて、想定の倍空いているケース。検証ツールで要素を選ぶと、余白がオレンジ（margin）と緑（padding）で色分けされて表示されるので、どちらが効いているか一目で分かります。

3. 要素が重なる・消える — position の指定

position: absolute を付けた要素は、通常の並びから外れます。すると場所を取らなくなるため、後ろの要素が下に潜り込んで重なります。

• absolute を使うときは、基準にしたい親に position: relative を付ける
• 付け忘れると、ページ全体を基準に配置されて予想外の場所に飛ぶ
• 重なり順を変えたいときは z-index。ただし position が指定されていないと効かない

そもそも、横並びや中央揃えのために position を使う必要はほとんどありません。Flexboxで済むことが大半です。position を使いたくなったら、まず「Flexboxでできないか」を考えてみてください。

崩れたときの調べ方

原因の場所を絞る簡単な方法があります。検証ツールで、すべての要素に枠線を出してしまうやり方です。

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

どの箱がどこまで広がっているかが見えるので、はみ出している要素がすぐ分かります。outline は border と違って場所を取らないため、貼ってもレイアウトが変わりません。確認が済んだら消してください。