CSS講座 / 開発者ツールでCSSを調べる：StylesとComputed

ブラウザーの開発者ツールでは、要素に一致するCSS宣言と最終的な値を調べられます。Stylesは一致した規則や競合を、Computedは計算後のプロパティ値を確認する場所で、ツール上の変更は通常一時的です。

実習ファイルと最初の表示を用意する

次の全体をUTF-8のindex.htmlとして保存し、ブラウザーで開きます。営業時間の案内は緑、一般の段落は灰色です。案内には16pxの内側の余白と薄い背景も指定しています。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; }
    h1 { color: #087f5b; }
    p { color: #666; }
    .notice {
      color: #087f5b;
      padding: 16px;
      border: 1px solid #087f5b;
      background-color: #e9f7ef;
    }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>A place to grow plants and take a break.</p>
  <p class="notice">We open at 9 a.m. every day.</p>
</body>
</html>

この例はHTML内のstyle要素を使うため一ファイルで実行できます。外部CSSを使う場合も同じ規則を書けますが、ツールで表示されるファイル名や行番号は異なります。まず予想どおりの文章が表示されることを確かめてから検証を始めます。

Elementsで対象の要素を選ぶ

「We open at 9 a.m. every day.」を右クリックして検証を選びます。WindowsのChromeやEdgeでは通常F12またはCtrl+Shift+Iでも開けます。メニュー名や配置は言語・バージョンで変わることがあります。

Elementsで<p class="notice">が選ばれたか確認します。違う要素なら要素選択ツールで選び直し、横または下のStylesを開きます。狭い画面ではパネルが別の位置や追加タブのメニューに入ることがあります。

Elementsが示すのは、ブラウザーが解釈した文書構造であるDOM（Document Object Model）です。HTMLの補正やJavaScriptの変更により、元のソースと完全には同じでないことがあります。CSSの対象はこの実際の構造で判断します。

図は、選択した要素に対する規則と計算後の値の関係を示しています。実際のパネル位置が違っても、対象の要素と宣言を対応させる手順は同じです。

StylesとComputedを使い分ける

Stylesには対象に一致する規則、インラインスタイル、継承に関係する規則などが表示されます。例ではp { color: #666; }と.notice { color: #087f5b; }の両方が一致しますが、同じ出所・重要度・レイヤーの条件ではクラスセレクターの詳細度が高いため案内は緑です。

打ち消し線は、必ずしも構文エラーを意味しません。別の宣言が勝った可能性を調べ、警告の意味は宣言にポインターを重ねて確認します。色とpaddingは別のプロパティなので、一方が競合しても他方は適用できます。

Computedでcolorを絞り込み、最終的な計算値を確認します。#087f5bとrgb(8, 127, 91)は同じ色です。プロパティを展開すると関連する規則や適用元を追える場合があります。表示されないプロパティは表示オプションも確認します。

操作の詳細はChrome DevToolsのCSS機能リファレンス、競合の順序はカスケードと詳細度を参照してください。

宣言を外し、値を一時的に変える

Stylesで.noticeのcolor: #087f5bのチェックを外すと、その宣言だけが一時的に外れます。案内文がpの規則による灰色になることを確認し、チェックを戻して緑へ戻します。

次に値を#1d4ed8に変えてEnterを押します。案内文だけが青くなり、薄緑の背景はそのままです。Computedのcolorがrgb(29, 78, 216)なら変更した青に一致します。背景は別のbackground-colorです。

この実習はワークスペース連携やLocal Overridesを設定していないため、再読み込みすると元の緑に戻ります。チェックを戻す、元の値を入力する、通常の再読み込みを行う、という方法で変更を戻せます。保存連携を有効にしている場合は挙動が変わるため、必ず一時的とは決め付けないでください。

確かめた変更を元ファイルに保存する

1. Stylesにあるファイル名と行番号を見て、どのファイルが適用元か調べます。この例なら元のindex.htmlです。外部CSSならそこで示されたファイルを開きます。
2. ブラウザーのアドレスと編集するファイルのパスが同じか確認します。別フォルダーの同名ファイルを編集しないようにします。
3. 元ファイルの.noticeの色を#1d4ed8に変えて保存します。
4. 再読み込みしても青いままなら元ファイルに反映されています。実習後は#087f5bに戻して保存します。

ファイルを分けた場合の接続は内部CSSと外部CSSで確認できます。ツールの表示だけが変わった状態と、配布するファイルが変わった状態を区別します。

よくある三つの失敗を切り分ける

一度に一条件だけ変え、保存・再読み込み・確認・復元を繰り返します。「規則がない」「規則はあるが競合している」「宣言自体が無効」を分けると、修正すべき場所を絞れます。警告の表示方法はブラウザーや編集場所によって異なります。