開発者ツールの利用

ブラウザに標準で搭載されている開発者ツールを使用すると、表示されているウェブサイトの構造を簡単に分析できます。

開発者ツールを開く

Chromeの場合図のように「その他のツール」「デベロッパーツール」の順で選択するか、Ctrl (Cmd) + Shift (Option) + I、F12といったショートカットキーを利用します。

要素の検証

また、Webページ上で右クリックすれば、そこにあるHTML要素を直接開発者ツール上で開くこともできます。ChromeだけでなくSafariやFirefoxなどのブラウザにも同じような機能が搭載されています。