ブラウザの開発ツールを利用しよう

開発ツールとは

ブラウザには標準で開発ツールなるものがついています。
html や css でコーディングを行う際には、開発ツールの機能がいろいろ助けてくれます。
今回はその中の一つをご紹介します。

※当記事ではブラウザは Chrome を想定しています。

ページの要素を特定する

よく、他のホームページを見ていて、「このデザインいいなぁ」と思った際に、そのデザイン(対象の要素)がどのようにhtml/cssでコーディングされているのかを確認したい場合があります。そんな時も、開発ツールは助けてくれます。

手順

1)ブラウザで F12 を押して、開発ツールを起動します

開発ツール紹介01

2)以下の画像を参考に、”矢印のようなマーク”をクリックします。(画像の赤で囲まれた部分です)

開発ツール紹介02

3)ホームページ内の、気になるデザインをクリックします。

開発ツール紹介03

4)開発ツールに対応する html の要素と、css が表示されます。

開発ツール04