2018.05.31

11. Chromeのデベロッパーツールを活用しよう

目次

デベロッパーツールとは

Chromeのデベロッパーツールは、今開いているwebページのHTML・CSS要素を見たり、自分で要素の編集をしてその挙動を確かめたりできる機能です。

デベロッパーツールは、今開いているページ上で右クリック→「検証」を選ぶか、ショートカットキーのF12(Macでは Option + Command + I)を押すことで起動できます。

要素を検証してみよう

HTMLが表示されている部分では、をクリックすれば展開して子要素を表示でき、をクリックすればしまい込めます。

divやpなどの要素にカーソルを合わせると、ブラウザでは、該当するコンテンツのサイズやpadding・marginが色付けされて表示されます。

このように、コンテンツ部分は水色、paddingは薄緑、marginはオレンジで表示してくれます。
これは非常に便利で、例えば「要素が思った通りの位置に配置されない!」というような場合、デベロッパーツールで確認すると、余計な余白が設定されていたと分かることがあります。

また、CSS関連のComputedタブでは、もっと細かくピクセル単位で指定が確認できます。


要素を編集してみよう

Computedタブの隣のStylesタブでは、CSSを編集して一時的に変更することができます。

プロパティやその値をクリックすれば自由に値を入力できるようになりますし、色の変更もできます。左のチェックボックスでは、チェックを外してプロパティを無効にすることができます。

また、ここで編集した内容はテキストエディタやHTML・CSSファイルには反映されないので、思う存分試してみるのもありでしょう。

参考にしたいwebページをのぞいてみよう

例えば、他の人が作ったサイトの「この部分の配色がいい」と思ったら、要素を表示してカラーコードをゲットできますし、「この部分のコードがどうなっているか分からない」という場合もコードを表示すれば一発で解決できます。

home

scroll