【Chrome Developer Tools入門】Elementsパネルで要素や要素のマージンやパディングを確認しよう！

Elementsパネルでは主に下記のことができます。

①タグやスタイルの確認

Elementsパネルで要素をクリックどするとどのようなタグで構成されているか、確認することが出来ます。右側のstyleタブを開くとどのようなstyleで構成されているか、確認することができます。また、クリックするとブラウザ上での該当箇所が反転するようになっています。

②要素を編集

下記の操作でブラウザ上、どのように表示が変化するのか確認することが出来ます。

・ダブルクリックして編集

・Deleteキーを押すことで要素を削除

・ドラッグアンドドロップで要素を移動

※大元のHTMLファイルを編集しているわけではないため、リロードすると元に戻る。

⓷マージンやパディング、サイズの確認

Elementsパネルで要素をクリックし、右側のComputedタブを開くと、要素自身のサイズや、マージン、パディングを確認することが可能です。