要素を調べるツール

ブラウザでサイトを見ているとき、「この部分にどんなスタイルシートが設定されているか」「どんな構造になっているか」を確認したいことがあります。
スタイルシートの勉強をするときや、スクリプトが作り出す要素を調べたいときなどに役立つ方法です。

方法はとても簡単で、ブラウザでサイトを見ているときに、調べたい要素の上で右クリック(Macではカーソルを長押しするか、controlボタンを押しながらクリック)し、「要素を調べる」(ブラウザによってちょっと文言は違います)を選ぶだけです。

スクリーンショット 2015-07-14 21.07.29

選ぶと、下記のような表示が見えます。

スクリーンショット 2015-07-14 21.07.18

すると、上記のように要素とそこに設定されているCSSを調べることができます。
CSSにある「スタイルの優先順位」についても、上書きされたプロパティに打ち消し線がつくなど、競合するものの関係を見ることもできます。
自分が設定したはずのスタイルがかかっていないな、というとき、競合するのほうが優先になっていてかからない、ということがあるときに便利です。

この要素を調べる機能を使ってできるもうひとつのことは、スクリプトで書き出されたHTMLを見ることができることです。
HTMLをみるだけなら「ソースを見る」ではダメなのか?と思われるかもしれないのですが、スクリプトで書き出されるHTMLは「ソースを見る」という機能では見ることができません。
下記の図はソースを見るでHTMLを見た場合です。

スクリーンショット 2015-07-14 21.11.25

ひとつ前の画像では下記の要素が見えていますが、ソースを見る、とした場合は見えていません。

<button class="dropdown-toggle" aria-expanded="false"><span class="screen-reader-text">サブメニューを展開</span></button>

jQueryなどを使うことで、HTML上には書かれていない要素を追加することや、クラス名を追加することができます。そのように追加された要素やクラス名は「ソースを見る」では表示されません。

例えば、クリックして画像がオーバーレイで拡大するようなスクリプトでは、大きな画像がオーバーレイで表示されている部分はスクリプトで追加されたものである場合が多いです。オーバーレイ部分のスタイルを変えたい場合などに「要素を調べる」機能を使うと、どんなCSSが設定されているかやクラス名がわかるので、スタイルを変更することなどができます。

ナビゲーションや変わった動きをする要素を見つけたときに「要素を調べる」機能で見てみることで、どんな仕組みになっているか、スタイルを使っているかを勉強することができます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です