検証ツールで確認したい要素を選択する
Google Chromeの検証ツールを使って、Webページの中から検証（確認）したいパーツを選んでみましょう。
検証ツールの右上にある矢印のマークをクリック。 青色になったら、選択ツールが有効になっています。
選択ツールが有効の状態で、ブラウザ（Webページ表示部分）にマウスカーソルを移動してみましょう。マウスが重なった部分がハイライト表示されます。 調べたい部分でクリックすると、止まります。
これで確認したい要素の選択が出来ました。
選択ツールを使わずに、要素パネルの側から要素を指定することも可能です。 HTMLで作ったはずのパーツが画面上にない、なんて時はこちらも使用します。
要素パネルでHTMLを確認・編集する
検証したい箇所を選んだら、要素パネルを見てみましょう。
HTMLの構造を確認する
ソースコードの下には入れ子構造が示されています。 下図、オレンジ色の線で囲った部分です。
ulタグ部分の横にある▶をクリックして展開。 li要素をクリックしてみてください。 そうすると表示が切り替わり、ulが親要素になりました。 ulはnavタグの子要素で…と祖先を辿れるわけです。
CSSでは子孫セレクタで、スタイル指定をする箇所を絞り込むことが出来ます。 セレクタの書き方に迷った時に見ると、分かりやすいです。
ブラウザでHTMLを書き換えてみる
要素パネルでは、今のHTMLを書き換えることも出来ます。
コンソールにエラーが出ていた、サイドバーの画像部分を選択してみましょう。
右クリックして「HTMLとして編集」を選ぶと、打ち替えられるようになります。
正しい拡張子に打ち替えると、画像が表示されました。
※正しい画像のパスまでは検証ツールも教えてくれません。 自分でimagesフォルダを確認します。
「HTMLとして編集」はクラスを変更してみたり、テキストが長くなった時にレイアウトが崩れないか確認したりと、使いどころが結構あります。
！注意：検証ツールで上書きは出来きません
検証ツールを使うと画面上でHTMLやCSSを変更し、どうなるか検証できます。
ただし、これはあくまでも検証。 htmlなどのファイルそのものを上書きしているわけではありません。 ページを再読み込みすると元に戻ってしまいます。
次のCSSの検証の方に入ると「最適なスタイル指定がわかったのに、消えてしまった」という事態に陥る可能性もあります。 検証ツール上で直して上手くいったところは、忘れずエディタに書き写すようにしましょう。
早速、index.htmlの画像パスを直しておきましょう。
次回は、CSSの検証と修正を行います。