HTMLやCSSのコードがWebサイトのどこに対応しているかが、わかりにくいなぁとずっと思っていました😅
「このsection-innerってどこまでの範囲なの？」とか、そんなのばっかりです。
そんな初心者泣かせのわかりくいコードですが、無料で使える「Chrome DevTools（検証ツール）」を使えば、コードの範囲や内容がグラフィカルに確認できる。
ただ、検証ツールは基本英語で、「どの部分がどういう役割があるのか」がパッと見わかづらいので、今回各項目の要素を確認していこうと思います🧐
※このブログはキャラクター同士の会話形式で進みます。 → 登場キャラクター紹介はこちら
Chrome DevTools（検証ツール）はどうすれば使えるのか？
「Chrome DevTools（検証ツール）」は簡単に起動できます。
GoogleChromeでWebサイトを開いているときに、右クリックのメニューで「検証」を選ぶか、キーボードのF12を押すことで表示できます。
実際に「プログラム初心者のつぶやき」のLPを、検証ツールで開くとこんな感じになります。
う〜ん、
右側が英語ばっかで
よくわかんないですね😅
「Chrome DevTools（検証ツール）」で、HTMLやCSSの内容を確認できるって聞いたけど、各項目はどういう役割なんだろう？
英語が多くてよくわからないよね〜。
英語に惑わされたらあかんで。一個ずつ、何のためにあるか確認してみぃ。
では画面の構成から確認していきましょう。
Chrome DevTools（検証ツール）の画面構成を確認してみた
おお、こういう感じなんだ。左に元のページがあって、右で細かいところを確認するんだね。
HTMLとCSSも両方確認できるんだ。一番下のConsoleパネルってのは、おかしいところを教えてくれるところなの？
そうです。エラーや警告が赤文字で流れてくるので、何かおかしいときはまずここを見る習慣をつけると良いですよ。
まずは順に見ていこか。
ブラウザのプレビュー画面について
個人的には以下の2つを使ってます。
右クリックからの「検証」で指定箇所の詳細を表示
確認したい箇所にカーソルを合わせて右クリック→「検証」を選択します。
すると以下のようにカーソルを合わせた箇所の内容が、ElementsパネルとStylesパネルに表示されます。
気になるところをパッと見たいときに便利ですね。
指定箇所の詳細をプレビュー画面で確認
プレビュー画面で指定箇所の情報を知りたい場合は、Elementsパネルで右のアイコンをクリックしましょう。
色が変わったあとに指定箇所をクリックすることで、指定箇所の情報をプレビュー画面で確認できます（下動画参照）。
解除したい場合は、もう一度アイコンをクリックしてください。
コードだけ見てると画面上のどこの情報かわかりにくいから、この機能助かるよ。
タグの範囲や大きさも、見た目でわかるからいいよね。
地図で言うたら、等高線や。数字だけ見ててもわからんけど、地形図で見たら一発でわかる。
まさにそうです。コードと画面を行き来しながら確認することで、HTMLの構造が立体的に見えてきます。
Elementsパネルについて
①HTMLの構造部分
編集したものは、基本的にページを再読み込みすれば元に戻ります。
表示アイコンの説明
| 表示 | 意味 | 操作 |
|---|---|---|
| ▶ <div> | 子要素が折りたたまれている状態 | クリックで展開 |
| ▼ <div> | 子要素が展開されている状態 | クリックで折りたたむ |
class="header-inner" |
その要素に付いているクラス名。CSSのセレクタと対応している | ダブルクリックすることで、クラス名・属性・ 値も編集できる |
⋯（三点リーダー） |
クリックすると右クリックメニューと同じ操作メニューが開く | クリックでメニューを開く |
== $0 |
現在選択中の要素を示すマーク。ConsoleパネルでJavaScriptを試すときに使う | Consoleパネルで要素を指定して、指示を入力すると要素を操作できる |
| flex | その要素に display: flex が適用されていることを示すバッジ |
クリックするとプレビュー画面でFlexboxのガイドライン（点線）が表示される |
<!-- コメント --> |
HTMLのコメント。ページには表示されない説明文 | 右クリック → 「Edit as HTML」で編集できる |
右クリックメニュー（⋯ クリックでも同じメニューが開く）
| メニュー名 | 意味・使い方 | よく使うかどうか |
|---|---|---|
Add attribute |
その要素に新しい属性（classやidなど）を追加する | |
Edit as HTML |
HTMLを直接書き換えて、見た目の変化を試すことができる。保存はされないので確認用 | よく使う |
Duplicate element |
選択中の要素をそのまま複製する | |
Delete element |
選択中の要素を一時的に削除して見た目を確認する | |
Cut / Copy / Paste |
要素の切り取り・コピー・貼り付け | |
Hide element |
要素を一時的に非表示にして確認する。チェックマークを外すと元に戻る | よく使う |
Force state |
hoverなどの状態を強制的に再現してCSSを確認できる | よく使う |
Break on |
JavaScriptのデバッグ用。要素が変更されたときに処理を止めて確認する（上級者向け） | |
Expand recursively |
選択中の要素の子要素をすべて一気に展開する | よく使う |
Collapse children |
展開されている子要素をすべて折りたたむ | よく使う |
Capture node screenshot |
選択中の要素だけをスクリーンショットとして保存する | |
Scroll into view |
選択中の要素が見える位置までページを自動スクロールする | |
Focus |
入力欄をアクティブにする（カーソルが入った状態にする） | |
Badge settings |
Elementsパネルに表示される「flex」などのラベルの表示・非表示を切り替える | |
Store as global variable |
選択中の要素をConsoleパネルで操作できる変数として登録する（上級者向け） | |
Debug with AI |
ChromeのAI機能を使ってデバッグのヒントをもらう |
② パンくずリスト
現在選択中の要素が、HTMLのどこにあるかを示す道しるべ
こんな表示のこと
何を表しているか
選択中の要素の「住所」を示している
Elementsパネルで要素をクリックすると、その要素がHTMLのどの階層にあるかが左から右へ順番に表示されます。一番右が現在選択中の要素です。
表示の読み方
header.page-header のように「タグ名.クラス名」の形で表示されます。クラスがない要素は nav や li のようにタグ名だけ表示されます。
クリックで親要素に移動できる
| 操作 | 結果 |
|---|---|
| a をクリック | 現在選択中の要素（変化なし） |
| li をクリック | ひとつ上の親要素 <li> が選択される |
| div.header-inner をクリック | さらに上の <div class="header-inner"> が選択される |
| html をクリック | 一番外側の <html> タグが選択される |
③ アイコン類・タブ一覧
DevToolsのタブバーに並ぶアイコンとパネルの説明
アイコン類
| アイコン | 名前 | 説明 |
|---|---|---|
|
要素選択ツール | クリックしてからページ上の要素にカーソルを重ねると、その要素がプレビュー画面とElementsパネルに表示される。「ページのどこがどのタグか」を調べるときに便利 |
 |
デバイスツールバー | スマホ・タブレットなどの画面サイズをシミュレートできる。レスポンシブデザインの確認に使う |
 |
タブの展開 | 画面幅が狭くて隠れているタブを表示する |
 |
エラー数 | Consoleパネルのエラー件数。クリックするとConsoleパネルに移動する。0になるのが理想 |
 |
AIアシスタンスパネル | ChromeのAIアシスタントパネルを開く。デバッグのヒントをもらったり、コードの説明を聞いたりできる |
 |
DevTools設定 | テーマ（ライト・ダーク）やショートカットキーなどの設定画面を開く |
 |
その他メニュー | DevToolsの表示位置の変更（右・下・左・別ウィンドウ）などができる |
 |
閉じる | DevToolsを閉じる |
 |
アクセシビリティツール | スクリーンリーダー（視覚障害者向けの読み上げソフト）での見え方を確認できる。初心者のうちは使わなくてOK |
タブ一覧
| タブ名 | 一言説明 |
|---|---|
| Elements | HTMLの構造とCSSを確認・編集できるパネル。DevToolsの基本 |
| Console | JavaScriptの実行やエラーの確認ができるパネル |
| Sources | ページを構成しているファイル（HTML・CSS・JS）の中身を確認できるパネル |
| Network | ページ読み込み時にやり取りされた通信の内容や速度を確認できるパネル |
| Performance | ページの表示速度や処理の重さを計測・分析できるパネル |
| Memory | ページが使用しているメモリ量を確認できるパネル（上級者向け） |
| Application | LocalStorageやCookieなど、ブラウザに保存されているデータを確認できるパネル |
| Security | ページのHTTPS接続や証明書の状態を確認できるパネル |
| Lighthouse | ページのパフォーマンス・アクセシビリティ・SEOなどを自動採点してくれるパネル |
| Recorder | ページ上の操作を記録・再生できるパネル（テスト用・上級者向け） |
なにこれ！？ 地図じゃなくて百科事典じゃん！！
大丈夫です。今は『こんな機能がある』という地図を見た、それだけで十分ですよ。
も、もう少し段階的に教えてほしかったね…。
山と一緒や。全部の岩の名前なんか最初から覚えんでええ。歩きながら覚えるんや。
よく使う場面から一つずつ試していきましょう。
まとめ
Google検証ツールの要素を掘り下げてきましたが、
全部紹介するには量が多すぎたので、今回はElementsパネルだけにしました😅
次回はStylesパネルとConsoleパネルも見ていきたいなと思います。
ではでは👋
