[Chrome]デベロッパーツールでHTMLとCSSを確認する

このページでは、「Chrome」のデベロッパーツールを使って要素の検証をしていきます。

※Windows10を使用しています。Macでの確認は行っていないので、ショートカットキーや動作が異なることがあります。

デベロッパーツールを開く

ブラウザで確認したいページを開き、F12キー、または「Ctrl+Shift+J」を押します。

キーを押すとページの右側にデベロッパーツールが表示されます。

ツールの右上、閉じるボタンの横に、点が縦に三つ並んだボタンがあります。

そこをクリックすると「Dock side」が出てくるので、ツールを画面から分離、画面左に表示、下へ表示、と切り替えることもできます。

パソコンでブラウザを開いた場合、当然ですがパソコンのページが表示されています。

スマートファンやタブレットで開いたときのページ表示を確認したいときは、ツール画面の左上、二番目のアイコンをクリックすると切り替えることができます。

Yahoo! JAPANのトップページで検証ツールを開きました。

点線で囲われたところを順に説明していきます。

「Elements」というタブが選択されています。
その下にはHTMLのソースコードが表示されています。ソースコード中の点線は、現在選択中の要素です。

中央の点線は現在選択中の要素の階層です。
選択中の要素は、htmlのなか、bodyのなかのdivであり、そのdivにid名wrapper、クラス名がアンダーバーからはじまる長い名前がつけられていることがわかります。

その下では「Styles」が選択され、現在選択中の要素に適用されているCSSが表示されています。

ツール画面の左上、カーソルのついたアイコンをクリックします。

マウスカーソルをページ上で移動させると色が変わるので、調べたいところをクリックします。

該当要素とそのCSSが表示されます。

ページの調べたいところにマウスカーソルを持っていき、右クリックをします。メニューが現れるので、「検証」をクリックします。

ツールが起動し、該当する要素のソースコードが表示されます。

要素のwidth、height、padding、marginはStylesの画面を下にスクロールすると一番下にあります。

または、Stylesタブの右にあるComputedをクリックすることでも表示できます。Computedではプロパティがアルファベット順にならびます。

Stylesタブの下の「Filter」の検索窓で、プロパティや値をしぼりこむことができます。

Filter横の「:hov」では要素の状態を変更できます。
例えば、選択している要素が<a>ならば、「:visited」にチェックを入れると、実際のページのリンクの色が、訪問済みの色に変わります。「:hover」ならマウスカーソルが要素の上を通過した状態を維持します。

f~~ont-size: 100%;~~　のように打ち消し線が入っているものは無効化されています。

Elementsタブ

ソースコードの変更したい箇所をダブルクリックして編集します。
子要素を含めて編集するには、F2キーか右クリックメニューの「Edit as HTML」で行います。

Stylesタブ

選択中の要素にクラスを追加するには、「:hov」のとなりにある「.cls」をクリックし、出てきた枠にクラス名を記入します。

その横の「＋」をクリックすると、セレクタに現在の要素が入った状態のテンプレートが現れるので、プロパティと値を記入します。

プロパティや値を変更するには、プロパティや値をクリックし、選択されたら新しく書き入れます。
削除するにはプロパティや値のどちらかを選択して削除キーを押します。

編集したものはその場で反映されるので、ちょっと試したい場合に最適です。

編集の効果は一時的なものです。
ツールで変更した後、ブラウザでページを更新してみてください。変更前に戻っているでしょう。
安心して試すことができます。

デベロッパーツールでHTMLとCSSを確認してきました。

ツールの起動は、F12キー、Ctrl+Shift+Jを押すか、直接ページの調べたいところで右クリック→検証。

Elementタブの下がhtmlのソースコード、Stylesタブの下がcss。

追加、変更、削除を自由に行うことができ、その場で結果が反映される。

このページが少しでもお役に立てたのなら幸いです。