レスポンシブ崩れの犯人は「親要素の制約」だった｜見落としやすいCSSデバッグテクニック

こんにちは！
今日は「レスポンシブデザインで『なぜか子要素が思った通りに動かない』という時の、見落としやすいデバッグ方法」について解説します。

「子要素のCSSが効かない」実は親の制約が原因

僕が現場でめっちゃよく目にするのは、こういった状況なんです。
「スマホでwidth: 100%にしたのに、なぜか親要素からはみ出てる！」とか「flex: 1で均等に並ぶはずなのに、なぜか崩れてる」みたいな。

これ、実は子要素のCSSではなく、「親要素がそれを許さない設定になってる」というパターンがほとんどなんですよ。
つまり親要素のwidthやoverflowやdisplayが子要素の希望を制限してるわけです。

ほんまに気づきにくいんですけど、子要素だけ見て「CSS効いてないやん」って思い込むと、どんどんハマっていくんですよね。
僕も駆け出しの頃、30分も無駄にしたことあります。

具体的には、こんなケースが多いです。

• 親要素がoverflow: hiddenで、子要素がposition: absoluteで飛び出そうとしてる
• 親要素に固定のmax-width: 1200pxがあるのに、子要素でwidth: 100vwを指定してる
• 親要素がflex-wrap: nowrapなのに、子要素の合計幅が100%を超えてる
• 親要素にpaddingがあるのに、子要素でwidth: 100%を使ってる（これ意外と引っかかる）

どれか一つは経験ありませんか？

デベロッパーツールで「親要素の縛り」を見つける方法

これから説明する方法は、現場でめっちゃ役に立ちます。
ぜひ今夜のコーディングから試してみてください。

ステップ1：崩れてる要素を選択して、親を遡る

Chromeのデベロッパーツール（F12キー）を開いて、問題の要素をクリックして選択します。
その時に、「Elements」パネルの左側に表示されるDOM構造を見てください。

そこで、その要素の直接の親、さらにその親…と遡りながら、それぞれのwidthやdisplay、overflowをチェックしていくんです。
「あ、この親要素にmax-width: 300pxがあるんだ」とか「この親にoverflow: autoが付いてるんだ」という発見につながります。

ステップ2：Computedタブで「実際の効き具合」を見る

子要素を選んで、右側の「Styles」タブを見ると、そのCSSが表示されます。
でも僕がいつも見てるのは、その下にある「Computed」タブなんです。

ここには「実際にブラウザが計算した値」が表示されるんですよ。
例えばwidth: 100%と書いても、「Computed」ではwidth: 250pxみたいに実値が出ます。
その値を見て「あ、親要素が250pxしかないんだ」と気づけるわけです。

ステップ3：親要素の「Box Model」を見る

Computedタブの下にはBox Modelの図が出ます。
ここでmargin、border、padding、そしてwidthの実値が視覚的に表示されるんです。

特に、子要素が親のpaddingに邪魔されてないか、親のborder-boxの制約にハマってないか、ここで一発で分かります。

僕が実務でやってる実践的な切り分け手順

毎回テクニックを説明しましたが、実際に問題が起きた時は、こういう順番で僕は調査してます。

その1：子要素のCSSを一度すべて消す

例えばwidth: 100%とflex: 1とmargin: 10pxがあったら、全部消すんです。
そしてbackground: redだけ付けて、その要素がどこまで広がるか見ます。

もしbackground: redだけで親要素いっぱいに広がるなら、「子要素のCSS内に原因がある」と確定します。
逆に、赤い領域がすごく小さかったら「親要素に制約がある」と気づけるわけです。

その2：親要素も同じくbackgroundを付ける

background: blueみたいに別の色を親に付けます。
そうすると「あ、赤い子要素が青い親からはみ出てる」とか「赤い子要素が青い親よりずっと小さい」とか、一目瞭然になるんです。

その3：overflow: visibleを親に付ける

親要素にoverflow: hiddenやoverflow: autoが付いてたら、これを一度visibleに変えてみるんです。
もしそれで子要素が見えるようになったら「親のoverflowが原因」と特定できます。

その4：box-sizingを疑う

「width: 100%なのに親より大きい」という時は、box-sizingをチェックするといいですよ。
box-sizing: border-boxなら、widthにpaddingとborderが含まれます。
それが親と異なる設定だと、計算が合わなくなるんです。

僕のおすすめは、全体に* { box-sizing: border-box; }をグローバルで付けてしまうことです。
これだけで「幅の計算ズレ」がめっちゃ減ります。

その5：一度、親要素のwidthを固定値にしてみる

親がwidth: 100%だと「実際いくつのpxなの？」が分かりにくいんです。
一度width: 500pxみたいに固定にして、子要素がどう見えるか試すんです。
そうすると親の制約が明確に分かります。

まとめ

レスポンシブ崩れって、ほんまに焦るんですよね。
でも実際には「子要素のCSS」よりも「親要素の制約」が原因というケースがめっちゃ多いんです。

大事なのは、デベロッパーツールを使って「親要素は実際にどう制約してるのか」を可視化することなんです。
背景色を付ける、Computedタブで実値を見る、Box Modelを確認する…こ