検証箇所の選択、ブラウザ上でのHTML編集【Chrome検証ツールの使い方入門】

• 検証ツールで確認したい要素を選択する
• 要素パネルでHTMLを確認・編集する
• HTMLの構造を確認する
• ブラウザでHTMLを書き換えてみる

検証ツールで確認したい要素を選択する

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の検証と修正を行います。