Web制作を始めると「なぜかデザインが崩れる」「CSSが効かない」といった壁に必ずぶつかります。
調べても原因が分からず、手が止まってしまう…。そんなときに役立つのがGoogle Chromeの検証ツール（デベロッパーツール）です。
検証ツールを使えば、サイトの裏側をのぞきながらHTMLやCSSがどのように動いているのかを確認でき、エラー原因を一瞬で見つけられます。
しかも編集内容はブラウザ上だけに反映されるので、リロードすれば元通り。初心者でも安心して使える学習の味方です。
この記事では、検証ツールの基本的な使い方を初心者向けにまとめています。
応用的な活用法やエラー解消テクニックは別記事で紹介しているので、まずは画面の見方や表示方法などの基本を押さえておきましょう。
なお、Google Chrome の検証ツール（デベロッパーツール）を使用したエラー解消の基本については
「【初心者向け】Google Chrome検証ツールの使い方｜HTML・CSSエラー解消の基本」
で解説しているので、まずはエラー解消のポイントが知りたい！という方はぜひチェックしてください。
検証ツールの開き方｜初心者が最初に覚える基本
Webページ上で右クリック →「検証」をクリックする方法が一番簡単です。
ショートカットを使うこともできます。
Mac：Command+Option+I
Windows：Ctrl+Shift+I
検証ツールを開くと、画面が大きく3つのエリアに分かれます。
- 左側エリア：Webページ
- 右上エリア：HTML
- 右下エリア：CSS
👉point：上記のレイアウトになっていない！という方は、検証ツールのレイアウトは自由に変更可能なので、試しに設定を確認してみましょう。表示切り替えボタンを使えば、画面下部に固定したり、画面から切り離して別のウィンドウにするなど現在の環境に合わせて見やすい形にカスタマイズできます。
検証ツールの表示切り替え方：検証ツール右上あたりの縦3点リーダーのボタンを押します。押すと、そのすぐ下に、Dock sideと書かれた検証ツール画面のレイアウトを変更できるメニューが出現します。青くなっているところが現在の表示設定です。
検証ツールでHTMLを確認する基本操作
検証ツールを開き、右上エリア（HTML）の上部に「Elements」というタブが表示されています。ここを押すと、表示しているページのHTMLがツリー状に並んでいることが確認できます。
Elementsタブが開いたら、今度は中に表示されているbodyタグの左横にある三角をクリックしてみましょう！
クリックして三角が下側を向くとタグが展開されて中身が表示され、クリックして三角が右側を向くと展開されていたタグが閉じて中身が隠れます。
三角が下側を向きHTMLタグが開かれると、中にどんなタグが入っているのかが分かりますね！
「タグの中にさらにタグを入れる構造」のことをネスト（入れ子構造）と言います。
HTMLタグ自体をクリックして、中身を確認することも可能ですが、今度は、HTMLが表示されている部分よりも少し上、Elementsタブの少し左側にある、ポインタ（矢印）アイコンをクリックしてみましょう。
通常だとポインタ（矢印）の色はグレーですが、クリックするとブルーになります。
ポインタ（矢印）アイコンをクリックして、ポインタ（矢印）アイコンの色がブルーになった状態で、ページ上でマウスを移動してみたり、ページ上のテキストや画像を選択してみましょう。
対応するHTML部分がハイライト表示されるので、「この見出しはどの部分にあり、どのタグで囲まれているか」が一瞬で分かります。
検証ツールでCSSを確認する基本操作
なんとなくHTMLの確認方法が理解できてきたところで、今度は、画面の右下エリアを確認しましょう。右下エリアではCSSの確認が可能です。
「Styles」というタブを選択するとCSSの一覧が表示されます。
また、Stylesタブを開き下の方を確認すると、先ほどHTMLで選択したタグに対応するCSSが、上から順に表示されています。
また、この右下のエリアを下にスクロールしていくと、選択しているタグに対して適用されている全てのCSSが表示されます。
ちなみに、HTMLで選択したタグに対応するCSSが表示されている枠の右側には、CSSを書いているファイル名が表示される場所があります。
ここを確認すると適用されているCSSが、どのファイルを参照しているかが分かります。
「user agent stylesheet」とは、ブラウザが標準で持っているデフォルトCSSのことです。
自分が何もスタイルを指定していなくても、ブラウザ側が最低限の見た目（余白、文字サイズ、リンク色など）を自動で当ててくれます。
また、Chrome、Firefox、Safari などブラウザごとに少しずつ違います。
選択している要素に当たっているCSSを右下エリアのStylesタブで確認した時に、右下エリアの一番上に「user agent stylesheet」が表示されるということは、自分が書いたCSSファイルが読み込まれていないため、当然書いたはずのCSSも適用されていない状態です。
HTMLにCSSファイルをリンクさせる記述を書いたはずなのに、Webページに変化がなく、自分が書いたCSSが右下エリアのStylesタブで確認できない場合は、右上エリアを見てみましょう。
検証ツールでは、ファイルが読み込まれていない場合や、何かエラーが出ている場合に、右上エリアにこのような赤いバツマークが出現しています。
エラーの解消方法については後述しますが、エラーが解消され、自分で作成したCSSファイルが読み込まれると、以下の通りエラー表示は消えます。
さて、無事に自分が作成したCSSファイルが読み込まれたところで、検証ツール上でCSSを触ってみましょう。
①現在表示されている値から、任意の値に変更したり、
②チェックマークをクリックすると、現在適用しているスタイルを外すことができます。
操作をした後に、左側エリアのWebページを確認すると、その場でデザインが反映されるので、簡単に変更後のCSSが適用された状態を確認することができます。
ブラウザをリロードすると元通りになってしまいます。検証ツール上で反映したCSSは、元のファイルにはリンクしていないので、検証ツールで試したスタイルを実際のコードに反映させたい場合は、VSCodeを開き、style.cssに記述し、保存してから改めてブラウザでの表示を確認しましょう。
よくある質問（FAQ）｜検証ツールの不安を解消
- Q1. 検証ツールを触るとサイトが壊れることはありますか？
- 壊れません。編集内容はブラウザ上に一時的に反映されるだけで、リロードすれば元通りです。
- Q2. SafariやMicrosoft Edgeでも使えますか？
- はい。どのブラウザにも開発者ツールがありますが、初心者は解説情報の多いGoogle Chromeから始めるのがおすすめです。
- Q3. スマホからでも検証ツールを開けますか？
- スマホ単体では不可。ただしパソコンでスマホ表示をシミュレーションできます。
- Q4. 検証ツールはどんな勉強に役立ちますか？
- HTML・CSSの仕組み理解、エラー発見、レスポンシブ確認、デザイン調査など、初心者の学習に直結します。
まとめ｜検証ツールは初心者の味方
まずはじめの一歩はこの記事を読みながら、検証ツールを開いて色々と操作してみるだけ でOKです。
- 検証ツールは「壊さずにWebの裏側を学べる」安心な道具
- 画面の構造やHTML・CSSの仕組みを直感的に理解できる
- 小さな操作から「Webを作る側の目線」が身につく
小さな一歩から始めていけば、HTMLやCSSの理解がぐっと深まり、次のステップ（エラー解消や応用的な使い方）にもスムーズにつながっていきます。
なお、Google Chrome の検証ツール（デベロッパーツール）を使用したエラー解消の基本については、以下の記事で解説しているので、まずはエラー解消のポイントが知りたい！という方はぜひチェックしてください。
