計算済みスタイルとボックスモデルインスペクター

Chrome DevTools → Elements → Computedタブには、カスケード、継承、詳細度の解決後に選択した要素へ適用される、すべてのCSSプロパティの最終的な計算値が表示されます。「何が記述されていたか」ではなく、「実際に何が適用されているか」を確認できます。

Computedパネルには、選択した要素のcontent、padding、border、marginのサイズを示す、操作可能なボックスモデル図が表示されます。任意のサイズをクリックすると、その値を設定したCSSルールが強調表示され、Stylesパネルへ移動します。

フィルターボックスに入力すると、特定の計算済みプロパティをすばやく見つけられます。「Show all」をオンにすると、継承されたプロパティとブラウザーのデフォルトプロパティも含められます。オフにすると、デフォルト以外のプロパティだけが表示され、実際に適用された関連スタイルを最短で確認できます。

Computedで灰色で表示されるプロパティは、親要素から継承されています。継承されたプロパティをクリックすると、その値を設定した要素とルールへ移動できます。マークアップで親要素を手動で調べなくても、カスケードを追跡できます。

margin: 16px 8pxと記述すると、margin-top、margin-right、margin-bottom、margin-leftの4つの計算値に展開されます。Computedパネルには常に個別のロングハンドプロパティが表示されるため、左右や上下で異なる余白の問題をデバッグするのに役立ちます。

Computedでの色の値は、記述時の形式にかかわらず、常にrgb()またはrgba()形式で表示されます。Stylesパネルのカラースウォッチをクリックすると、表示形式（hex、hsl、rgb）を切り替えられます。Computedパネルには常に解決済みの色が表示されます。

計算済みのfont-size、font-family、line-height、letter-spacingを調べて、タイポグラフィのトークンが正しく適用されていることを確認します。指定したフォントの読み込みに失敗すると、計算済みのfont-familyにブラウザーのフォールバックフォントが表示されます。

box-sizing: border-boxでは、widthにpaddingとborderが含まれます。一方、box-sizing: content-box（デフォルト）では含まれません。DevToolsのボックスモデル図には、適用されているモデルが反映されます。contentの幅と全体の幅を比較して、box-sizingの動作を確認してください。

ブロック要素間の垂直方向のマージンは、2つの値のうち大きい方に相殺されます。ボックスモデル図には実効マージンが表示されます。Layout Inspectorと併用して、記述した値とは異なる相殺後のマージンを特定してください。

Stylesパネルには、要素を対象とするすべてのルールが詳細度の順に表示されます。取り消し線の付いたルールは上書きされています。プロパティの競合でどのルールが優先されるかを確認するには、Stylesパネルで最上位にある取り消し線のない宣言を探します。

ブラウザーのユーザーエージェントスタイルシートのルールは、Stylesパネルの下部に「user agent stylesheet」というラベルで表示されます。Computedには、それらの解決済みの値が表示されます。CSSリセットまたはNormalize.cssを使用してこれらをリセットし、ブラウザー間で一貫した基準を設定してください。

Computed Stylesパネルには表示されるが、Stylesパネルには表示されないものは何ですか。

Computed Stylesパネルとボックスモデル図を使うと、カスケードの解決後に得られるすべてのCSSプロパティの最終的な解決値を確認できます。これらを使って継承を追跡し、ショートハンドの展開をデバッグし、box-sizingを調査し、任意の要素で詳細度の競合に勝つルールを特定してください。