思い通りに配置できない！
CSSレイアウト崩れの「よくある原因」と検証ツールの使い方

検証ツール(デベロッパーツール)の使い方｜崩れたときに見るのは4か所

崩れた要素を選択して、[スタイル]、ボックスモデルの図、[計算済み]、[レイアウト]の4か所を見ます。レイアウト崩れで使うのは、ほぼ[要素]パネルの中だけです。なお「検証ツール」「デベロッパーツール」「DevTools」は、どれも同じものを指します。

開き方と要素の選び方

崩れている箇所を右クリックして[検証]を選ぶと、[要素]パネルが開き、その要素が選択された状態になります。ショートカットはMacがCommand+Option+C、Windows/LinuxがCtrl+Shift+Cです(Chrome公式: Chrome DevToolsを開く)。

[要素]パネルの左側は、ブラウザーが解釈した後のHTML(DOMツリー)です。行にカーソルを載せると、ページ側でその要素の範囲がハイライトされます。右クリックで狙いにくい要素は、パネル上部の矢印アイコンを押してから、ページ上でクリックします。

見る場所は4つ

見る順番は、[スタイル]で「効いているか」、ボックスモデルの図で「実寸はいくつか」、それで分からなければ親要素を選んで同じ2つ、です。ボックスモデルの図に出るのは、CSSに書いた数字ではなくブラウザーが実際に描いた寸法です。「widthを300pxにしたのに340pxある」と分かれば、原因はほぼ絞れます(Chrome公式: CSSの表示と変更)。

[スタイル]タブの表示の読み方

[スタイル]タブは、宣言の見た目で「効いていない理由」を教えてくれます。

3行目のヒントには、効かない理由が「〜プロパティによって〜の適用がブロックされています。」(英語表示では The 〜 property prevents 〜 from having an effect.)のように書かれます(Chrome公式: CSSの問題を見つける)。

症状から逆引き｜疑う原因と検証ツールで見る場所

崩れ方が分かれば、疑う原因は数個に絞れます。自分の症状の行を見てください。

背景画像が見切れる、位置がずれるという症状は、background-size と background-position の設定が原因で、系統が別です。背景画像のレスポンシブ対応の記事にまとめています。

症状別｜崩れる例と直した例

以下のコードは、2026年10月に検証用のページを作り、Chromium(Chromeと同じ描画エンジン)で崩れることと直ることを確かめたものです。

横スクロールが出る・要素がはみ出す

先に疑うのは、paddingを足したぶん幅が増えているケースです。

/* 崩れる例: 親が300pxのとき .card は340pxになる */
.card { width: 100%; padding: 20px; }

/* 直した例: paddingを幅の内側に含める */
.card { width: 100%; padding: 20px; box-sizing: border-box; }

box-sizing の初期値は content-box で、width が指すのはコンテンツ領域だけです(MDN: box-sizing)。ボックスモデルの図を見ると、中央が300、その外側のpaddingが左右20ずつで、合計340と読めます。

もう1つが、flexで並べた子が縮まないケースです。画像と .media-body を横に並べ、その中のタイトル(.media-title)を1行に収めて「…」で省略したい場面で起きます。

.media { display: flex; gap: 16px; }
.media-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 崩れる例: 省略されず、.media-body が親の外まで伸びる */
.media-body { flex: 1; }

/* 直した例 */
.media-body { flex: 1; min-width: 0; }

min-width の初期値は auto で、フレックスアイテムでは、幅の指定がなければ中身の最小幅より小さくなりません(MDN: min-width)。親の幅300px、画像の幅80pxの検証用ページでは、タイトルを長くすると .media-body が600px以上に伸びました。min-width: 0 を足すと204px(300−80−16)に収まり、タイトルは「…」で省略されます。

厄介なのは、この原因が[スタイル]にエラーとしては表示されないことです。min-width は自分で書いていない初期値で、書き間違いでも上書きでもありません。ボックスモデルの図で「子の実寸が親より大きい」と気づき、そこから逆算することになります。

どの要素がはみ出しているのか見当が付かないときは、[コンソール]に次のコードを貼って実行します。画面の幅より外に出ている要素が一覧で出ます。

const vw = document.documentElement.clientWidth;
document.querySelectorAll('*').forEach(el => {
  const r = el.getBoundingClientRect();
  if (r.right > vw || r.left < 0) console.log(el);
});

出てきた要素にカーソルを載せると、ページ側でハイライトされます。親は子より先に出るので、上から順に見てください。スマホ幅で確かめるときは、デバイスのツールバーで幅を狭めてから実行します。

横に並ばない・1つだけ下に落ちる

display: flex は、並べたい要素そのものではなく、その親に付けます。DOMツリーでは、flexが付いた要素の横に flex というバッジが出ます。バッジが子の側に付いていたら、付ける場所が1階層ずれています。バッジをクリックすると、ページ上に並びの枠線(オーバーレイ)が出て、どこまでが1つの子なのかが見えます(Chrome公式: Flexboxの検査)。

3列のつもりが3つ目だけ下に落ちるときは、幅とgapの合計を計算します。

.list { display: flex; flex-wrap: wrap; gap: 24px; }

/* 崩れる例: 33.333%×3 に gap 24px×2 が足されて100%を超える */
.item { width: 33.333%; }

/* 直した例: gapの合計48pxを先に引いてから3等分 */
.item { width: calc((100% - 48px) / 3); }

親が300pxなら、崩れる例は100px×3+48px=348pxで、3つ目が入りません。直した例は(300−48)÷3=84pxになり、3つが1行に収まります。

高さが潰れる・背景色が消える

親に付けた背景色が出ないときは、親を選んでボックスモデルの図を見ます。高さが0なら、中身が親の高さに数えられていません。

/* 崩れる例: 中身がfloatだけなので .box の高さが0になる */
.box { background: #eef5f8; }
.box img { float: left; }

/* 直した例 */
.box { background: #eef5f8; display: flow-root; }

floatした要素と position: absolute の要素は通常のフローから外れるので、親の高さに含まれません。display: flow-root は、内部のfloatを包含する指定です(MDN: ブロック整形コンテキスト)。

height: 100% が効かないのも同じ系統です。親の高さが明示されていなければ、パーセントの高さは auto として扱われます(MDN: height)。子ではなく、親の高さの指定を確かめてください。

余白が思ったとおりに付かない

見出しの上に余白を付けたら、背景ごと下にずれた。これはマージンの相殺です。

/* 崩れる例: 余白が .hero の外に出て、背景色の内側は空かない */
.hero { background: #0b3a5b; }
.hero h2 { margin-top: 40px; }

/* 直した例: 内側の余白は親のpaddingで作る */
.hero { background: #0b3a5b; padding-top: 40px; }
.hero h2 { margin-top: 0; }

親に border-top や padding-top がなく、親と最初の子の間にテキストもない。この条件がそろうと、子の margin-top は親の margin-top と相殺されて、親の外側に出ます(MDN: マージンの相殺)。検証用ページでは、見出しの高さが30pxのとき、崩れる例の .hero は30pxのまま、直した例で70pxになりました。親が display: flex か grid なら、相殺は起きません。

これも[スタイル]にエラーとしては表示されません。仕様どおりの挙動だからです。h2のボックスモデルの図にはmargin 40が出ているのに、親の高さは増えていない。この食い違いが目印です。

もう1つは、spanやaなどインライン要素への指定です。インラインのままでは width、height、上下のmarginが効かないので(MDN: ボックスモデル)、display: inline-block に変えます。

CSSが効かない・途中から全部ずれる

CSSが効かないときは、[スタイル]タブの読み方の表をそのまま使います。打ち消し線なら上書きです。詳細度が同じ宣言どうしでは、後に書いたほうが勝ちます(MDN: 詳細度)。勝っている宣言のセレクタを見て、自分のセレクタか書く順番を直します。

何を書き換えても画面が変わらないなら、編集中のファイルと読み込まれているファイルが違うか、キャッシュが残っています。[スタイル]の各ルールの右に出るファイル名を確かめ、[ネットワーク]パネルの「キャッシュを無効化」(Disable cache)にチェックを入れて再読み込みします。

ある位置から下が全部ずれるなら、CSSより先にHTMLの閉じタグを疑います。divだけで組んだ検証用ページで内側の div を1つ閉じ忘れたところ、後ろのフッターのdivが、メインのdivの中に入った形で解釈されました。DOMツリーの字下げで、入れ子が想定どおりかを確かめてください。

スマホだけ崩れる

検証ツール上部の「デバイスのツールバーを切り替え」(Toggle device toolbar)を押すと、ページがスマホ幅の表示になります。「サイズ」(Dimensions)で「レスポンシブ」を選べば、幅を375などに変えられます。「その他のオプション」から「メディアクエリを表示」を選ぶと、CSSに書いたブレークポイントが画面の上に表示されます。

スマホで全体が縮小されて見えるなら、headにviewportの指定があるかを見ます。

<meta name="viewport" content="width=device-width, initial-scale=1">

この指定がないと、モバイルブラウザーは画面より広い仮想ビューポート(たとえば980px)でページを描いてから縮小します(MDN: viewport)。ページの幅が画面より広いものとして扱われるので、スマホ用のメディアクエリが働きません。

メディアクエリが効かないときは、書く順番も見ます。スマホ用の @media を通常の指定より前に書くと、詳細度が同じなので、後ろにある通常の指定が勝ちます。[スタイル]では、スマホ用の宣言に打ち消し線が付きます。

デバイスのツールバーで問題がないのに実機で崩れることもあります。この機能はパソコンのChromeで画面幅などをまねているだけで、Chrome公式も、判断に迷う場合は実機で確認するよう案内しています(Chrome公式: デバイスモード)。

検証ツール上で直してから、エディタに戻す

原因の見当が付いたら、エディタに戻る前に検証ツールの上で直します(操作の詳細はChrome公式: CSS機能リファレンス)。

• 宣言をオフにする: [スタイル]で宣言の左にあるチェックボックスを外すと、その1行だけ無効になります。崩れが直れば、その宣言が原因です
• 値を動かす: 数値をクリックして上下の矢印キーを押すと1ずつ、Shiftを押しながらだと10ずつ変わります
• 宣言を足す: [スタイル]の一番上にある element.style をクリックすると、その要素だけに効く宣言を仮に書けます。min-width: 0 などを足して、直るかを先に確かめます

検証ツール上の変更は、ページを再読み込みすると消えます。直ったと分かった宣言は、その場でエディタのCSSに書き写してください。

当校の講師が受講生のコードを添削するときも、見る順番は同じです。検証ツールは、その要素に関係するルールだけを集めて見せてくれるからです。

それでも原因が分からないとき

4か所を見ても分からないときは、崩れた部分のHTMLとCSSだけを新しいファイルに写して、範囲を狭めます。写した先で崩れなければ、原因は写さなかった側(親や別のCSSファイル)にあります。

生成AIに聞くときは、コードを丸ごと貼って「直して」と頼むのではなく、検証ツールで見た事実を付けます。どの要素が崩れているか、ボックスモデルの図で幅と高さはいくつか、どの宣言に打ち消し線が付いているか。この3点を添えて「なぜこの寸法になるのか」を聞けば、返ってきた説明を自分の画面で確かめられます。原因を見ずに丸投げする使い方を勧めない理由は、独学ロードマップ本編の「生成AIはHTML/CSS学習にどう使うか」に書いています。

メニューを開いたときやスライダーが動いたときだけ崩れるなら、JavaScriptが要素のクラスやstyle属性を書き換えている可能性があります。学び方はJavaScript区間の記事に書いています。

人に聞く場合も、添える内容は同じ3点です。AddedPallasでは質問の回数に制限がなく、コード添削や質問への回答は1営業日以内に返しています(サポート体制)。

よくある質問

CSSのレイアウトが崩れる原因で多いのは何ですか？

確かめる対象は3系統です。書いたCSSが効いていない、箱の大きさが想定と違う、親子関係が想定と違う。検証ツールの[スタイル]タブとボックスモデルの図を、この順に見ると切り分けられます。

CSSが効かないときは、どこを確認すればいいですか？

検証ツールで要素を選び、[スタイル]タブを見ます。打ち消し線があれば他の宣言に上書きされており、警告アイコンがあればプロパティ名か値のタイプミスです。ルール自体が出てこなければ、セレクタの綴り違いかCSSファイルの読み込みを疑います。

デベロッパーツール(検証ツール)はどうやって開きますか？

Chromeでページ上の調べたい箇所を右クリックして[検証]を選びます。ショートカットはMacがCommand+Option+C、Windows/LinuxがCtrl+Shift+Cです。F12(MacはCommand+Option+I)でも開けます。メニューからは[その他のツール]→[デベロッパー ツール]です。

検証ツールのスマホ表示と実機で、見た目が違うのはなぜですか？

検証ツールのデバイスモードは、パソコンのChromeで画面幅などをまねているだけで、スマートフォン上で実際に動かしているわけではないからです。

まとめ｜原因を覚えるより、見る順番を決める

レイアウトが崩れたときにやることは4つです。

• 崩れた要素を右クリックして[検証]。[スタイル]で、CSSが効いているかを先に確かめる
• ボックスモデルの図で実寸を見る。書いた値と違えば、box-sizing、min-width、マージンの相殺を疑う
• 分からなければ親を選んで、同じ2つを見る
• 検証ツール上で直してから、エディタに書き写す

min-widthの初期値やマージンの相殺は検証ツールにエラーとして出ませんが、実寸と書いた値の食い違いまでは自分で辿れます。詰まっている箇所を一緒に確かめたい方は、無料カウンセリングで今の学習状況を聞かせてください。