Chrome DevToolsで打ち消し線のCSSに勝った指定を探す

​2026年11月14日​Chrome DevTools​CSS

Chrome DevTools の Elements パネルで、Styles ペインの宣言に打ち消し線が付いていて、行の左に警告アイコンがなければ、その宣言は別の指定に負けて効いていません。どの指定が勝ったのかは、同じプロパティを Styles ペインの上のほうで探すか、Computed タブでプロパティを開くと、ファイル名と行番号つきで分かります。CSS を書いたのにスタイルが反映されない、色や余白が思った値にならない、というときの調べ方として、検証環境で実際に操作した結果を載せます。

検証に使ったページ

ボタンが1つだけのページに、CSS のファイルを2つ（base.css、theme.css）読み込ませました。ボタンには id="save" と class="button" を付け、style 属性でも余白（padding）を指定しています。

<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="theme.css">
<!-- 中略 -->
<div class="toolbar">
  <button id="save" class="button" style="padding: 12px 24px">保存する</button>
</div>

/* base.css */
body {
  font-family: sans-serif;
}
.toolbar {
  color: #1f2a30;
  font-size: 18px;
}
.button {
  color: #067a98;
  background: #ffffff;
  border: 1px solid #00c8e8;
  font-size: 14px;
  padding: 4px 8px;
}
#save {
  color: #d85878;
}

/* theme.css */
.button {
  font-size: 16px;
  background: #eefafd;
  margin: 10 px;
}
.toolbar .button {
  padding: 8px 16px !important;
}

ページの中で getComputedStyle を実行してボタンの値を読むと、文字の色は rgb(216, 88, 120)（#d85878）、文字の大きさは 16px、上の余白（padding-top）は 8px、margin-top は 0px でした。base.css の .button に書いた色・大きさ・余白は、どれも効いていません。

Stylesペインで、打ち消し線の宣言より上を見る

Elements パネルの DOM ツリーでボタンの要素（<button id="save" …>）をクリックすると、右の Styles ペインに、この要素に当たるルールが並びます。検証用のページでは、上から次の順でした。

1. element.style（style 属性の指定）
2. #save（base.css:15）
3. .toolbar .button（theme.css:6）
4. .button（theme.css:1）
5. .button（base.css:8）
6. button（user agent stylesheet。ブラウザが最初から持っているスタイル）
7. 「Inherited from div.toolbar」の見出しの下に .toolbar（base.css:4）
8. 「Inherited from body」の見出しの下に body（base.css:1）

打ち消し線が付いたのは、element.style の padding、base.css:8 の color・background・font-size・padding、.toolbar の color と font-size、body（base.css:1）の font-family でした。打ち消し線の付いた宣言を見つけたら、同じプロパティ名の宣言を、そのルールより上で探します。打ち消し線の付いていないものが、実際に効いている指定です。右端の base.css:15 のようなリンクが、その指定を書いたファイルと行番号です。

この例では、次のように探せました。

CSS の仕様（CSS Cascading and Inheritance Level 5 の、宣言を並べる順番の節）では、@layer などの条件を除くと、宣言の出どころ（ページの CSS か、ブラウザの CSS か）と !important の有無を最初に比べ、次に style 属性かどうか、その次に詳細度、最後に書かれた順番（後のものが勝つ）を比べます。表の3つは、この順番どおりの結果になっていました。

style 属性の指定（element.style）はいちばん上に出ますが、この例では打ち消し線が付いていました。効いているのは !important の付いた宣言で、こちらのほうが下に並んでいます。いちばん上だから勝つ、とは限らないので、打ち消し線の有無で判断します。

.toolbar の color と font-size は、親の div.toolbar に書いた指定で、「Inherited from div.toolbar」の下に出ます。ボタンには #save と theme.css の .button の指定があり、そちらの値（rgb(216, 88, 120) と 16px）が効いていて、こちらには打ち消し線が付きました。

プロパティ名で絞り込む

ルールが多いページでは、Styles ペインの上にある Filter の欄にプロパティ名を入れると探しやすくなります。検証用のページで font-size と入れると、font-size を含む宣言の行に水色の背景が付き、font-size を含まないルール（element.style、#save、.toolbar .button、body（base.css:1））は表示から消えました。残った行の中で、打ち消し線の付いていないものを探します。

セレクターにカーソルを合わせて、詳細度を比べる

セレクターの上にカーソルを合わせると、そのセレクターの詳細度が吹き出しで出ます。#save は「Specificity: (1,0,0)」、base.css:8 の .button は「Specificity: (0,1,0)」でした。3つの数は、左から ID に当たるもの、クラスに当たるもの、要素名に当たるものの数です。吹き出しの左の三角を押すと、#save では2行目に「(a) ID-like: #save」という内訳が出ました。

この例では、ID を1つ含む (1,0,0) の #save が、クラスだけの (0,1,0) の .button に勝ち、color は #save の #d85878 になりました。詳細度が同じ .button 同士（theme.css:1 も base.css:8 も (0,1,0)）では、後に読み込んだ theme.css の宣言が効いていました。

Computedタブで、そのプロパティを指定した宣言を一覧にする

Styles ペインの隣の Computed タブには、最終的に効いている値が、プロパティごとに1行で並びます。プロパティの左の三角を開くと、そのプロパティを指定している宣言が、値・セレクター・ファイル名と行番号の形で一覧になります。打ち消し線の宣言を上のルールから探す手間がなく、どの指定が関わっているかを1か所で見られます。

検証用のページでは、次のように並びました。プロパティの行の右の値が、実際に効いている値です。

color では、いちばん上の宣言が、効いている宣言でした。ところが padding-top では、いちばん上は効いていない element.style の 12px で、効いている 8px !important は2行目でした。

Computed タブでは padding が padding-top のような個別の名前で並んでいたので、その名前で探します。プロパティが多くて見つけにくいときは、Computed タブにも Filter の欄があり、プロパティ名を入れて絞り込めます。

警告アイコン付きの打ち消し線は、上書きではなく値の誤り

theme.css:1 の margin: 10 px; は、行の左に三角の警告アイコンが出て、値の「10 px」にだけ打ち消し線が付きました。プロパティ名の margin には線が付いていません。アイコンに付いている説明の文字（title 属性）は「Invalid property value」で、値として正しくないために無視された、という意味です。

この場合は、ほかの指定に負けたわけではないので、上のルールを探しても勝った宣言は見つかりません。実際、ボタンの margin-top は 0px で、10 px は効いていませんでした。DevTools の公開されているソース（main ブランチ）でも、打ち消し線を付ける CSSでは、上書きされた宣言（overloaded）は行全体に、値が正しくない宣言（invalid-property-value）は値（.value）にだけ打ち消し線を付けるように書き分けられています。

打ち消し線を見つけたら、まず行の左に警告アイコンがあるかを見ます。アイコンがなければ上書きなので、Styles ペインの上のルールか Computed タブで勝った宣言を探します。アイコンがあれば、値の書き方を直します。この例では、10 と px の間の空白を消して margin: 10px; に直すと、警告アイコンと打ち消し線が消え、Computed タブの margin-top は 10px になりました。