2026年5月12日
レイアウトが崩れたときの対処法
「CSSを書いたのにレイアウトが崩れる」——初心者が最もつまずくポイントです。でも原因はパターン化されています。
この記事では、よくある10パターンの崩れ方と、それぞれの解決方法をコード例とともに解説します。「なぜこうなるのか」も理解することで、新しい問題にも対処できるようになります。
CSSではじめてのスタイルを書こうを読んだ人が次につまずくポイントを解説します。
まず確認すること：開発者ツールを開く
レイアウトが崩れたら、まずブラウザの開発者ツールを使います。
- ブラウザの開発者ツール（F12）を開く
- 崩れている要素を右クリック→「検証」または「Inspect」
- 右側の「Styles」パネルで、どのCSSが当たっているか確認
- 取り消し線が入っているプロパティは他のCSSに上書きされている
- 「Computed」タブで実際に適用されている値を確認
💡 開発者ツールでCSSを一時的に変更できる
Stylesパネルでプロパティを直接変更して試すことができます。ファイルを保存しなくてもリアルタイムで確認できるので、「この値に変えたらどうなるか」を素早くテストできます。
よくある崩れパターン10選
1. 画像がはみ出る
原因：画像に幅指定がなく、元のサイズのまま表示される。
解決：max-width: 100% を指定して、親要素の幅を超えないようにする。
/* 画像が親要素からはみ出す問題を解決 */
img {
max-width: 100%; /* 親要素の幅を超えない */
height: auto; /* 縦横比を保つ */
display: block; /* 画像の下の余白をなくす */
}2. 横スクロールが出る
原因：要素の幅（width）にpaddingやborderが加算されて、合計幅が画面幅を超えている。
解決：box-sizing: border-box を全要素に適用する。これはほぼすべてのサイトで使う設定です。
/* 全要素に border-box を適用する（ほぼ必須の設定） */
*, *::before, *::after {
box-sizing: border-box;
}
/* border-box の効果：
paddingやborderを追加しても、要素の幅（width）が変わらない
❌ デフォルト（content-box）: width: 200px + padding: 20px = 実際の幅240px
✅ border-box: width: 200px のまま（paddingは内側に */3. Flexboxで横並びにならない
原因：display: flex を子要素に書いてしまっている。
解決：横並びにしたい要素の親要素に display: flex を追加する。
/* ❌ NG: flexboxは子要素ではなく親要素に指定する */
.child {
display: flex; /* ← これは間違い。子要素に指定しても横並びにならない */
}
/* ✅ OK: 親要素に display: flex を指定する */
.parent {
display: flex;
gap: 16px;
}4. marginが効かない（相殺される）
原因：上下のmarginは「相殺（そうさい）」という現象が起き、大きい方だけ適用される。
解決：paddingを使うか、Flexbox/Gridの gap を使う。
/* marginの相殺（マージンの合体）を理解する */
/* ❌ 問題: 上下のmarginが相殺される */
.box1 {
margin-bottom: 30px; /* 下に30px */
}
.box2 {
margin-top: 20px; /* 上に20px */
}
/* この2つの間隔は50pxではなく30px（大きい方だけ適用）になる */
/* ✅ 解決策1: paddingを使う */
.box1 {
padding-bottom: 30px; /* paddingは相殺されない */
}
/* ✅ 解決策2: FlexboxやGridのgapを使う */
.container {
display: flex;
flex-direction: column;
gap: 20px; /* gapは相殺されない */
}5. 要素が重なる（position: absolute がズレる）
原因：position: absolute を使っているのに、親要素に position: relative がない。absoluteは「直近のpositionが指定された祖先要素」を基準にする。
解決：親要素に position: relative を追加する。
/* ❌ NG: position: absolute を使うとき親に relative がない */
.child {
position: absolute;
top: 10px;
left: 10px;
/* 親に position: relative がないと、ページ全体の左上を基準にズレる */
}
/* ✅ OK: 親要素に position: relative を追加する */
.parent {
position: relative; /* ← これで子のabsoluteの基準点になる */
}
.child {
position: absolute;
top: 10px;
left: 10px;
/* これで .parent の左上を基準に10px, 10pxの位置に配置される */
}6. フッターが浮く（画面の途中に来る）
原因：コンテンツが少ないとき、bodyの高さが画面の高さより小さくなりフッターが途中に来る。
解決：bodyにflexboxを使い、mainに flex: 1 を指定する。
/* フッターを常に画面の下部に固定する */
body {
min-height: 100vh; /* 画面の高さ以上を確保 */
display: flex;
flex-direction: column; /* 縦並びにする */
}
main {
flex: 1; /* 余白をすべてmainが受け取る → フッターが下に押し出される */
}
footer {
/* 特に何も指定しなくても、mainが余白を取るので下に固定される */
}7. テキストが改行されない
原因：長い英単語やURLは、途中で自動改行されないことがある。
解決：word-break: break-word を指定する。
/* 長い英単語やURLが折り返されない問題を解決 */
p, li, td {
word-break: break-word; /* 単語の途中で折り返す */
overflow-wrap: break-word; /* 折り返しできない場合も強制的に改行 */
}
/* 例：https://example.com/very/long/path/that/wont/break のような長いURLも改行される */8. paddingで幅が広がる
原因：デフォルト（content-box）ではpaddingは幅に加算される。
解決：box-sizing: border-box（2番目の項目と同じ解決策）
9. スマホで文字が小さい・レイアウトが崩れる
原因：<head> 内に viewport metaタグがない。このタグがないと、スマホでパソコン用の画面がそのまま縮小されて表示される。
解決：viewportメタタグを追加する。
<!-- head内に書くviewport metaタグ（必須！） -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- これがないと、スマホでの表示が崩れます -->
<!-- パソコン用のレイアウトがそのまま縮小されて文字が極端に小さくなる -->10. CSSが効かない
原因：セレクタのスペルミス、ファイルパスの間違い、キャッシュが残っている、など。
解決：開発者ツールで確認。Ctrl+Shift+R（Mac: Command+Shift+R）で強制リロードを試す。
デバッグの手順まとめ
- 開発者ツール（F12）で崩れている要素を選択する
- StylesパネルでどんなCSSが当たっているか確認する
- 取り消し線が入っているプロパティは他に上書きされている
- Computedタブでbox modelを確認（margin/padding/borderの値）
- Stylesパネルでプロパティを一時的に変更して原因を探す
はじめてのHTMLページで基本を復習。marginとpaddingで余白の仕組みを理解。displayプロパティでブロック/インラインの違いを確認。
実際に書いてみよう：崩れにくいレイアウトの基本形
よくある問題をあらかじめ防ぐための「崩れにくいHTML/CSSの書き方」を実践してみましょう。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>レイアウトの練習</title>
<style>
/* ① まず全要素に border-box を適用 */
*, *::before, *::after {
box-sizing: border-box;
}
/* ② 画像のはみ出し防止 */
img {
max-width: 100%;
height: auto;
}
/* ③ フッターを下部に固定 */
body {
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0;
font-family: sans-serif;
}
header {
background-color: #0d9488;
color: white;
padding: 16px 24px;
}
main {
flex: 1;
padding: 24px;
}
/* ④ カードの横並び + 折り返し */
.card-list {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card {
flex: 1 1 200px;
border: 1px solid #ccc;
border-radius: 8px;
padding: 16px;
background-color: #f9fafb;
}
footer {
background-color: #f3f4f6;
padding: 16px 24px;
text-align: center;
color: #6b7280;
}
</style>
</head>
<body>
<header>
<h1>サイトタイトル</h1>
</header>
<main>
<h2>カード一覧</h2>
<div class="card-list">
<div class="card">カード1</div>
<div class="card">カード2</div>
<div class="card">カード3</div>
</div>
</main>
<footer>
<p>© 2026 サイト名</p>
</footer>
</body>
</html>このコードをHTMLファイルとして保存してブラウザで確認しましょう。box-sizing・フッター固定・カードの横並びなど、よく使うパターンが一通り入っています。
まとめ
- ✅ まず開発者ツール（F12）で確認する
- ✅
*, *::before, *::after { box-sizing: border-box; }を全要素に適用 - ✅ 画像には
max-width: 100%; height: auto;をつける - ✅ viewport metaタグを忘れない
- ✅ Flexboxは親要素に
display: flexを指定する - ✅
position: absoluteを使うとき、親にposition: relativeを指定 - ✅ CSSが効かないときはスペルミスとキャッシュを疑う
あわせて読みたい記事
- CSSとは？初心者向けにわかりやすく解説 — CSS基礎に戻る
- CSSフレックスボックス入門 — Flexboxを使いこなす
- marginとpaddingの違いと使い方 — 余白の仕組みを理解
- displayプロパティの使い方 — block/inlineの違い
- CSSの中央揃えができない原因と解決法 — 中央揃えのトラブル解決
- レスポンシブデザイン入門 — スマホ対応の基本