CSSでレイアウトが崩れる原因と直し方まとめ

ホームページを作っていると、

このようなトラブルはよく起きますよね。

そこでこの記事では、初心者でも順番に確認すれば直せるように、
レイアウトが崩れる原因と直し方をまとめて解説します。

CSSのレイアウト崩れには、よくある原因があるので、ぜひ最後までお読みくださいね！

CSSでレイアウトが崩れるときの基本的な考え方

まずは、CSSでレイアウトが崩れるときの基本的な考え方からご紹介します。

• 1か所の指定が全体に影響する
• 原因はだいたい決まっている
• 焦らず順番に確認する

この意識を持つだけで、修正が簡単になりますよ。

横にレイアウトがはみ出る原因と直し方

それでは、横にレイアウトがはみ出る原因と直し方をお伝えします。

固定幅（px）を使っている

.container {
  width: 1000px;
}

パソコンでは問題なくても、
スマホでは画面からはみ出します。

👉 対処法
width: 100% や max-width に変更します。

大きな画像や表が原因

画像や表は、特にはみ出しやすいです。

👉 対処法

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

表は、スクロール対応にします。

.table-wrap {
  overflow-x: auto;
}

スマホだけレイアウトが崩れる原因

ここでは、スマホだけレイアウトが崩れる原因をお伝えします。

レスポンシブを想定していない

パソコン基準のレイアウトは、スマホではそのまま使えません。

スマホ用のCSSが足りない

• 指定が抜けている
• メディアクエリがない

👉 スマホ表示を必ず確認しましょう。

中央寄せ・横並びが崩れる原因

中央寄せ・横並びが崩れる原因をお伝えします。

中央寄せの方法を混同している

• 文字 → text-align
• 画像 → margin
• ボックス → width + margin

対象ごとに使い分けることが大切です。

横並びで幅が足りない

横に並べすぎると、合計の幅が画面を超えます。

👉 数を減らすか、幅を調整します。

margin・paddingが原因で崩れるケース

margin・paddingが原因で崩れるケースをご紹介します。

padding込みで幅が大きくなっている

.box {
  width: 100%;
  padding: 20px;
}

padding分ではみ出すことがあります。

意図しない余白が入っている

bodyや要素には、
最初から余白が入っていることがあります。

body {
  margin: 0;
}

レイアウトが崩れたときのチェック手順（重要）

レイアウトが崩れたときのチェック手順をお伝えします。

レイアウトが崩れたら、次の順で確認しましょう。

1. 横スクロールが出ていないか
2. 固定幅が残っていないか
3. 画像・表が原因でないか
4. margin・paddingを確認
5. スマホ表示で確認

この順で見れば、原因はほぼ見つかりますよ。

初心者がやりがちな失敗まとめ

初心者がやりがちな失敗まとめをご紹介します。

• いきなり全部直そうとする
• CSSを足しすぎる
• 原因を特定せずに触る

1つずつ確認するのが近道です。

困ったときに役立つ基本CSSのまとめ（コピペ用）

最後に、困ったときに役立つ基本CSSのまとめをご紹介します。

画像

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

横幅

.container {
  width: 100%;
}

中央寄せ

.box {
  margin: 0 auto;
}

はみ出し防止

body {
  overflow-x: hidden;
}

まとめ

CSSでレイアウトが崩れる原因と直し方まとめの内容はいかがでしたでしょうか？

CSSのレイアウト崩れは、誰でも経験しますよね。

でも、

これだけ意識すれば大丈夫です！

思ったとおりに表示されていないと、焦る気持ちも出てきてしまいますけど、
この記事を参考にしながら、１つ１つ原因を調べていくようにしましょう。

ちなみに、私の場合は、うまく表示されなくて原因が分からなかったら、
「元の状態に戻す」ということをしています。

バックアップをしっかりとしておくことで、すぐに元の状態に戻すことができるので、
バックアップだけはしっかりとしておくようにしましょうね！