要素のCSSスタイルの確認方法について

Question

CSSスタイルの確認方法について教えてください。

AdminLTE で、contentの背景色（以下のイメージ内の赤枠部分の色）を変更したいのですが、Chrome検証ツールのinspectカーソルで指定しても、どのタグ・ファイルで設定されているのかわかりませんでした。
（検証ツールのStylesタブにそれらしい項目を見つけられませんでした）

こういう場合、どういった手順でタグやファイルを特定するのでしょうか？

Answer 1

上の表示では縮こまっていますが、「どのファイルで」セットされているか調べたい場合は、上の画面で言う検証ツールの左側のほうが重要です。

こちらに、どのファイルの何行目に、この要素に当たるスタイルが書かれているかが出てきます。

なお、background-colorの場合、指定した要素自体は透明で、親要素の背景色がそのまま見えているだけ、ということもありますので、ご注意下さい。

Comments

[haru853]

ありがとうございます。
確認方法がわかりました。
おっしゃるとおり、親要素の背景色でした。

Answer 2

［Elements］パネルで確認できます。

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回 詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Comments

[haru853]

ありがとうございます。
Elementsパネルでタグをたどっていくことで確認できました。