前回はConsoleでエラーを確認しました。 今回はElementsとStylesの部分を使って、HTMLとCSS部分を見てみましょう。
HTMLとCSSを見てみよう
Webページを開いて、検証ツールを立ち上げます。
左端に表示されている矢印のアイコンをクリックしてください。
分かりにくいですが、アイコンの色が青っぽく変化します。
ここは通称「選択モード」と呼ばれている部分で、色が付いている時は機能が有効になっています。
選択モードONの状態で、ページの気になるところにカーソルを重ねてみましょう。
重ねた要素に適応されているスタイルの情報が表示されます。
今度はカーソルを重ねるだけではなく、クリックしてみましょう。
Elementsの方ではクリックした部分に相当するHTML部分がハイライト表示されました。
Stylesの方では適用されているスタイルが表示され、 最下部にはブロック本体、margin,border,paddingの幅が表示されます。
もっとcssの設定部分が多いヘッダーメニューの「HOME」を見てみましょう。
選択モードONの状態で「HOME」の文字をクリックすると<a>タグが選択されます。
Elementsの方で、一つ上にある<li>タグ部分をクリックして選択し直してください。
liタグ全体に指定されたスタイルと、
#headerの中のliタグのみ対して設定されたスタイルがあることが分かりますね。
スタイルの指定がどのファイルの、何行目で書かれているのかも表示してくれています。
更にStylesの部分を最下部までスクロールすると、ボックスサイズの表示部分があります。
marginを設定したはずなのに効かない！ 妙な余白が出来てボックスがはみ出している！ という場合にはここでmarginやpaddingを確認すると、原因が分かることが多いです。