2026/01/05

【保存版】HTML/CSSでよくあるレイアウト崩れの原因と解決策まとめ

HTML/CSSの学習中、「なぜか画像がはみ出る…」「意図しない横スクロールバーが出現する…」といったレイアウト崩れに直面し、時間を溶かしてしまった経験はありませんか？
レイアウト崩れは、Web制作初心者なら誰もが通る道です。この記事では、よくあるレイアウト崩れの代表的なパターンとその原因、そして具体的な解決策をコード付きで徹底的に解説します。この記事をブックマークしておけば、あなたのデバッグ作業が格段にスピードアップするはずです！

ケース1：画像が親要素・コンテナからはみ出る

配置した画像が親のdiv要素などを突き抜けて表示されてしまう、非常によくある現象です。

・サンプル：サイドバーに配置した画像が、サイドバー領域からはみ出してしまう

See the Pen
Untitled by saku (@web-saku)
on CodePen.

原因

画像（imgタグ）は、CSSでサイズを指定しない限り、元々の画像の幅と高さを保とうとします。そのため、親要素の幅より画像の幅が大きい場合に、はみ出してしまいます。

対策

はみ出している画像に対し、max-width: 100%; を指定します。これにより、「画像の最大幅は親要素の100%まで」という制限がかかり、親要素より大きい画像は自動的に縮小され、コンテナ内に収まります。高さは自動で調整（height: auto;）されるため、アスペクト比も維持されます。

CSS
img {
  max-width: 100%;
  height: auto; /* 書かなくても通常は自動で調整されます */
}

ケース2：謎の横スクロールバーが出現する

コンテンツは画面幅に収まっているはずなのに、なぜかブラウザの最下部に横スクロールバーが出てしまい、ページが左右に「ガタつく」現象です。

・サンプル：横スクロールバーが出てしまう

See the Pen
Untitled by saku (@web-saku)
on CodePen.

原因

画面幅（ビューポート）を超える幅を持つ要素が存在することが原因です。特にwidth: 100vw; を安易に使うと、スクロールバー自体の幅（約15px〜17px）を含まずに計算するため、結果として画面幅をはみ出してしまいます。

対策

まず、横幅を指定する際は vw 単位よりも、親要素を基準とする width: 100%; を基本としましょう。また、CSSの基本設定として、すべての要素に box-sizing: border-box; を適用することを強く推奨します。これにより、padding や border を含んだ値で幅が計算されるようになり、レイアウト計算が非常に直感的になります。

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

.some-element {
  width: 100%; /* 100vw ではない */
}

ケース3：横に並べたい要素が縦に落ちてしまう

divなどを横に並べようとしても、改行されて縦に並んでしまうパターンです。

・サンプル：カードが縦並びになってしまう

See the Pen
Untitled by saku (@web-saku)
on CodePen.

原因

div, p, h1 などの多くの要素は、デフォルトで display: block; となっています。ブロックレベル要素は、幅が親要素いっぱいまで広がり、前後に改行が入る性質を持つため、そのままでは横に並びません。

対策

親要素に display: flex; を指定するのが現代の最も簡単で強力な解決策です。これだけで、子要素は自動的に横並びになります。要素間のスペースは gap プロパティで簡単に追加できます。

CSS
.parent {
  display: flex;
  gap: 20px; /* 要素間の隙間 */
}

ケース4：`position: absolute` を使ったら要素が画面外に飛んでいった

特定の要素を基準に配置しようと position: absolute; を指定したら、画面の左上を基準に配置されてしまった、というケースです。

・サンプル：「サイドバー」の文字の下に画像を配置したくて記述したつもりが…

See the Pen
Untitled by saku (@web-saku)
on CodePen.

原因

position: absolute; を指定した要素は、position: static; 以外の値（relative, absolute, fixed, sticky）が指定された、最も近い親要素を基準に位置が決まります。そのような親要素が見つからない場合、最終的にbody要素が基準となります。

対策

基準としたい親要素に position: relative; を指定してください。これだけで、子要素の position: absolute; は、その親要素の左上を基準として配置されるようになります。

CSS
.parent {
  position: relative; /* 子要素の基準点になる */
}

.child {
  position: absolute;
  top: 10px;
  left: 10px;
}

ケース5：上下の `margin` が効かない、またはくっついてしまう（マージンの相殺）

要素の上下に margin-top や margin-bottom を指定しても効かなかったり、隣り合う要素のマージンが意図通りに足されず、どちらか大きい方の値になってしまったりする現象です。

・サンプル：マージン相殺の例。上段と下段のマージンを70pxにしたくて記述したつもりが…

See the Pen
Untitled by saku (@web-saku)
on CodePen.

原因

原因は主に2つあります。1つは、spanなどのインライン要素には上下のmarginが効かないこと。もう1つは、隣接するブロックレベル要素の上下マージンが重なると、大きい方の値のみが適用される「マージンの相殺」というCSSの仕様です。

対策

インライン要素に上下マージンを効かせたい場合は、display: inline-block; や display: block; に変更します。マージンの相殺を避けたい場合は、前述のdisplay: flex;やdisplay: grid;を親要素に使い、子要素間の隙間を gap プロパティで制御するのが最も簡単で確実です。マージンの相殺を気にせず、直感的にレイアウトを組むことができます。

CSS
.parent {
  display: flex;
  flex-direction: column; /* 縦並びにする場合 */
  gap: 20px; /* 要素間のマージンが20pxになる */
}

レイアウト崩れの原因追及と対策のためのツール

ここまで、いくつかのレイアウト崩れのパターンを見てきましたが、ここからはレイアウトが崩れている時の原因を見つけたり、対応策を見つけたりする時に役立つツールや方法について紹介していきます。

デベロッパーツールを活用しよう

デベロッパーツールにはいろいろな機能がありますが、HTML/CSSのレイアウトが崩れた時の原因を見つけたりするときにもとても便利に使えるツールです。
デベロッパーツールの使い方などについては下記の記事で詳しく紹介していますので、興味のある方は見てみてください。

最強のデバッグ術：`outline`で要素の範囲を可視化する

レイアウト崩れの原因を特定する上で最も効果的な方法の一つが、要素の範囲を可視化することです。border を使うと要素のサイズ自体が変わってしまい、さらなる崩れを招くことがありますが、outline ならレイアウトに影響を与えずに境界線を描画できます。

CSS
/* 怪しい要素すべてに適用してみる */
* {
  outline: 1px solid red;
}

まとめ：レイアウト崩れはパターンを知れば怖くない

今回は、HTML/CSSで頻発するレイアウト崩れのパターンと、その解決策を紹介しました。

画像のレスポンシブ対応は max-width: 100%;
横並びや中央揃えは display: flex; で解決
`absolute`の基準には親要素の position: relative; を忘れずに
原因不明の崩れは outline と デベロッパーツール で原因を特定する

最初は難しく感じるかもしれませんが、これらのパターンを覚えておくだけで、問題解決のスピードは劇的に向上します。レイアウト崩れは経験を積むことで必ず乗り越えられます。この記事を参考に、デバッグ作業に取り組んでみてください。

コメントを残すコメントをキャンセル

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

【保存版】HTML/CSSでよくあるレイアウト崩れの原因と解決策まとめ

ケース1：画像が親要素・コンテナからはみ出る

原因

対策

ケース2：謎の横スクロールバーが出現する

原因

対策

ケース3：横に並べたい要素が縦に落ちてしまう

原因

対策

ケース4：`position: absolute` を使ったら要素が画面外に飛んでいった

原因

対策

ケース5：上下の `margin` が効かない、またはくっついてしまう（マージンの相殺）

原因

対策

レイアウト崩れの原因追及と対策のためのツール

デベロッパーツールを活用しよう

最強のデバッグ術：`outline`で要素の範囲を可視化する

まとめ：レイアウト崩れはパターンを知れば怖くない

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル