CSSで学ぶChromeブラウザディベロッパーツールの使い方

WEBページ開発にはデベロッパーツールを使います。Chromeブラウザは開発に必要なツールが標準で付いているので、この記事ではCSS初心者へ向けてデベロッパーツールの簡単な使い方を説明しています。

デベロッパーツールの呼び出し方
CSSのボックスモデル
padding と margin の違い

デベロッパーツールの呼び出し方

Chromeブラウザを開いたら、ブラウザの画面右上に・が３つ縦に並んだマークがあるのでクリックします。メニューが表示されるので、その他のツール → デベロッパーツールとクリックしていきます。

また、開発時にはデベロッパーツール呼び出しを頻繁に行うと思うので、ショートカットキーも覚えておくと作業効率が良いです。

デベロッパーツール呼び出しショートカットキー

Ctrl + Shift + c
Ctrl + Shift + i

デベロッパーツールを開くとこのような画面になりますが、画面左下に書いているのがそのページのHTMLで、右下に書いているのがCSSになります。HTMLとCSSでページを作る際はElementsの項目を使います。

要素に当てられたCSSを確認する方法１

例として、HTML側でh1タグ/令和一郎と書かれた場所をクリックします。クリックすると右側のCSS欄にh1はcolor:blueで設定されていると確認ができます。また、選択された要素がブラウザ表示のどの部分なのかブラウザに色が付くので確認することができます。

要素に当てられたCSSを確認する方法２

上の画面で説明すると、クリックと書かれた場所に箱に矢印が被さっているマーク（小さいです）があるのでこれをクリックします。あとはブラウザの調べたい要素部分にマウスを持って行くと吹き出しが表示され要素のCSSが見れます。さらに要素をクリックすると、デベロッパーツールのCSS側で詳細が見れます。

要素に当てられたCSSを確認する方法３

デベロッパーツール画面を開いていない状態で、ブラウザの調べたい要素を左クリックで選択状態にし、右クリックで検証をクリックします。

そうすると自動でデベロッパーツールが開き、先ほどと選択画面になりその部分のCSSが確認できます。

user agent stylesheet とは？

要素のCSSを調べた時に、 user agent stylesheet とありますが、これはブラウザが持っているCSSです。これがあるおかげで指定したタグがそれっぽく表示されるようになっています。

要素に当てられた全てのプロパティを確認する方法

デベロッパーツールの Computed をクリックすると、要素に当てられているプロパティ一覧が確認できます。また、Show allにチェックを入れると親要素から引き継いでいるスタイルも全て確認することが可能です。

CSSのボックスモデル

先ほど同様、Computed の項目をみてもらうと分かりますが色の付いた四角い箱が表示されています。今、HTMLの方では header 要素を選択しているので、表示されている四角い箱は header 要素のサイズを示しています。ブラウザで表示されている header も見えないだけで、実はこのように四角い箱で囲まれているので、CSSではこれをボックスモデルと言います。