Google Chrome Developer Toolsで要素を確認

Google Chrome Developer Tools

各ブラウザにはWeb開発者向けにとっても便利なツールがあります。

Internet Explorerだと開発者ツール、Firefoxだと要素を調査、Safariだと要素の詳細を表示、Google Chromeだと要素を検証などです。

どれも似たような感じなんですが、Google Chromeの要素を検証(Developer Tools)が一番使いやすいような感じなので、Developer Toolsを元に要素を確認する方法を紹介します。

ソースで各要素を確認するのは大変な作業

ブログのソースを見るとかなり長いコードが書いてあります。この中でどんな要素のブロックにより構築してあるのかを確認するのはかなり大変な作業になります。

下記図はアメブロのソースです。

アメブロのソース

カスタマイズしてない状態でもなんと約500行以上もこのようなコードが記述してあります。
カスタマイズなどをしていくと1000行以上になっていく場合もあります。

そんな中からどこにどんな要素が使ってあって、どんなブロックになっているのかを確認するのは、物凄く大変な作業になります。

そこで便利なのがDeveloper Toolsです。
親子要素が確認しやすく、各要素が折りたたみになっているので、どこにどんな要素が入っているのかも分かりやすくなっています。

文章だけでは分かりづらいので、実際に使った状態を図などを含めて説明していきます。

Developer Toolsは「F12」で表示されます

Google Chromeでブログなどを表示したらキーボードの「F12」をクリックするとDeveloper Toolsが表示されます。

Developer Tools2

Developer Toolsを拡大したのが下記図のような感じです。

Developer Tools3

Developer Toolsの①の箇所にソースの中身が表示されています。今回は①の箇所を メインに説明していきます。

Developer Toolsで折りたたみを試してみる

ソースは折りたたみが出来るようになっているので、どこにどんな要素が入っているのかを確認できます。

Developer Tools4

Developer Tools5

Developer Tools6

Developer Tools7

折りたたんでいくと分かると思いますが、<html>が一番外側にあり全ての要素を囲んでいます。
これを開いていくと幾つもの色んな要素があり、要素が要素を囲み親子関係になっています。

Developer Toolsで親子要素を確認する

それではもう一度開いていきます。
※ここではアメブロで使われているclass名を元に解説してあります。

<div class=”skinBody2″>は<div class=”skinBody”>に囲まれていて親子関係になっています。

Developer Tools8

もっと下の階層まで開いていき親子関係を確認してみましょう。

Developer Tools9

このようにどんな要素で囲まれていて、何がその要素に入っているのかが分かるので親子関係も簡単に確認できます。

Developer Toolsの便利さは、まだまだこんな程度ではありません。
なんと要素にマウスを乗せるとその箇所が見た目で色がつき簡単にどんなレイアウトで囲まれているかを確認できます。

これはかなり便利なことです。

Developer Toolsで要素のレイアウト確認

Developer Toolsでブログ全体を囲んでいる<div class=”skinBody”>の所にマウスを乗せてみます。するとブログ全体が青色に変化し表示されます。

Developer Tools10

次に<div class=”skinBody”>の下の層を確認してみます。
アメブロのソースだとskinBodyのしたの層にはskinBody2→skinBody3→skinFrame→skinFrame2→skinContentsFrame→skinContentsArea と、こんなに多くの要素が親子関係にあります。

<div class=”skinContentsArea”>にマウスを乗せてみます。
すると今度は上部の白い箇所、オレンジの箇所、青い箇所に分かれて表示されました。

Developer Tools11

各色の色の意味は下記のような感じです。

  • 上部の白い箇所・・・要素に関係ない箇所
  • 真ん中の青い箇所・・・マウスを載せてる要素の箇所(要素が囲んでいるレイアウト箇所)
  • 最後にオレンジの箇所ですが、マウスを載せてる要素の箇所のレイアウト幅が980pxで設定してあるとします。その際に残りのマージン( ページの周囲にある空白部分)が出てきます。その残りのマージン( ページの周囲にある空白部分)を示してるのがオレンジの箇所になります。

このように見た目で要素がどのように反映していて、どんなレイアウトになっているのかが分かります。

又反映されている要素の幅や高さも表示されます。

Developer Toolsを上手く使えば要素を確認することはもちろん、間違いも見つけやすくなるので、カスタマイズをするなら是非使っておきたいツールです。

最終更新日: 2013年3月8日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

Google Chrome Developer Toolsで要素を確認の関連記事

コメントを残す

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


*