mhWebページのデザイン調整や表示崩れの原因調査には、CSSの動作を正確に把握する必要があります。
DevToolsの Styles パネルと Computed パネルは、CSSのルールや計算結果を視覚的に確認できる強力なツールです。
この章では、スタイルの優先順位や状態シミュレーション、レイアウトの視覚化など、CSSに関するデバッグスキルを身につけましょう。
4.1 CSSルールの適用順序と上書きの確認
同じ要素に対して複数のCSSルールが定義されている場合、どのルールが適用され、どれが無視されたのかが重要になります。
Stylesパネルでできること：
- 現在選択中のDOM要素に適用されたすべてのCSSルールを一覧表示
- 上書きされたプロパティは打ち消し線（
line-through）で表示 - ルールの出典（style.css や inline style など）を確認
- プロパティの値をリアルタイムで変更し、即時反映
例：
h1 {
color: blue;
}
h1.special {
color: red;
}.special クラスが付与された <h1> 要素を選択すると、Stylesパネルには color: red が有効、color: blue は打ち消し線付きで表示されます。
💡 活用シーン：
- 想定外の色やフォントが表示されるときに、どのルールが競合・上書きしているかを確認
- 重要度の高い
!importantの有無を視覚的に把握
4.2 疑似クラスのシミュレーション（:hover, :active など）
リンクやボタンのホバー状態やクリック状態は、実際に操作しないとCSSが反映されません。
しかし、DevToolsでは疑似クラスの状態を強制的に適用することができます。
操作方法：
- 対象の要素を Elements パネルで選択
- Styles パネル右上の
:hovボタンをクリック :hover,:active,:focusなどをチェック
➡ :hover 状態でボタンがどう変化するか、CSSが正しく効いているかを確認できます。
ユースケース例：
- リンクに
:hoverのスタイルが適用されない → 対象要素を疑似クラスで固定し、スタイルの漏れを確認
4.3 Box Model の視覚化と余白の確認
Stylesパネルの下部には「Box Model（ボックスモデル）」が図で表示されます。
含まれる要素：
margin（外側の余白）border（枠線）padding（内側の余白）content（実際のコンテンツ）
操作方法：
- 要素を選択すると、サイズや余白が色付きの図として表示されます
- マウスオーバーでそれぞれの部分に色が付き、実ページ上でもハイライト表示されます
💡 活用シーン：
- 余白が広すぎてレイアウトが崩れているとき → margin/padding の過剰指定を発見
- インライン要素なのに予期せず高さがある →
line-heightやpaddingの影響を確認
📝 まとめ
- Stylesパネル：CSSの定義・適用状態・優先順位を確認・編集できる
- Computedパネル：最終的に適用されたCSS値を一覧表示（複数のCSSルールの合成結果）
- Box Model：margin/padding/borderの影響を図で確認でき、レイアウトバグの調査に役立つ
CSSのバグ調査やUIの微調整には、まず DevTools で見る癖をつけることが大切です。
手探りのスタイル修正から一歩進み、視覚的・論理的にCSSを操作できる力を身につけましょう。
