【Chrome Developer Tools入門】Stylesタブでスタイルを確認してみよう！

Stylesタブでは主に下記を確認することができます。

●スタイルの確認

・要素をクリックすることで文字・背景色などを確認することが可能です。

・ブラウザがデフォルトで持っているスタイルを確認することが可能です。ブラウザがデフォルトで持っているスタイルは「user agent stylesheet」と表記されています。

・継承されたスタイルを確認することが可能です。例えばbodyから継承されたスタイルであれば「inherited from body」と表記されています。

・一番下にその要素のサイズに関する画像があり、paddint やmarginを確認できる。

ComputedタブはStylesタブの内容を纏めて表示している。

●スタイルの変更

・チェックボックスで有効無効をOFF/ONできる。

・要素を選択して「＋」をクリックするとスタイルを追加することが可能です。

・マウスオーバーをクリックした際のスタイルも確認することができる。