Chrome検証ツール（DevTools）とは？
Web制作をしていると必ず**「コードを書いたのに反映されない！」「なぜかデザインが崩れる」**という壁にぶつかります。そんな時の救世主が、Google Chromeに標準搭載されている「検証ツール」です。
このツールを使えば、ブラウザ上で一時的にHTMLやCSSを書き換えて実験したり、プロが作ったサイトの構造を「のぞき見」して勉強したりできます。
検証ツールの起動方法（ショートカット一覧）
まずは、このショートカットを指に覚えさせましょう。マウスで操作するより格段に速くなります。
- Windows:
F12キー（またはCtrl+Shift+I） - Mac:
Cmd+Option+I - 共通: 画面のどこでも良いので 右クリック ＞ [検証]
初心者がまず覚えるべき3つの基本操作
多機能な検証ツールですが、最初は以下の3点だけマスターすればOKです。
① 要素選択でHTMLとCSSを特定する
ツールの左上にある「矢印アイコン」をクリックしてから、サイト上の見たい場所（ボタンや見出しなど）をクリックします。
- 結果: その部分のHTMLコードがハイライトされ、右側のパネルには適用されているCSSが表示されます。
② Stylesパネルでデザインを一時変更する
「Styles」タブにあるCSSの数値や色をクリックしてみてください。
- 実験: フォントサイズを
16pxから32pxに変えたり、色を青から赤に変えたりできます。 - ヒント: ここで変更しても元のファイルは壊れません。納得いくデザインができたら、その数値をVS Codeに書き写しましょう。
③ スマホ表示（デバイスモード）に切り替える
ツール左上の「スマホ・タブレットのアイコン」をクリックします。
- 活用法: iPhoneやPixelなどの画面サイズを選択して、スマホで見た時に文字がはみ出していないかを確認します。
「デザインが反映されない！」を解決するデバッグのコツ
初心者がよく遭遇するトラブルの解決法をまとめました。
- CSSに打ち消し線（横線）が入っている → 他のCSSに「上書き」されて負けています。より具体的なセレクタ（
.classなど）を使うか、記述の順番を見直しましょう。 - プロパティの横に黄色い警告マークが出ている → スペルミスです。
colorがcolerになっていたりしないか確認しましょう。 - 余白がどこについているか不明 → Stylesタブの下にある「ボックスモデル」の図を見れば、
margin（オレンジ）とpadding（緑）の範囲が一目でわかります。
まとめ：検証ツールは「実験場」
検証ツールは、Web制作における**「最強の砂場」**です。いくら壊しても、ブラウザを更新（リロード）すれば元通りになります。
「壊れるのが怖い」と思わず、どんどん数値をいじって、Webサイトの仕組みを肌で感じてみてください。
💡 備忘録：ここがポイント
- 検証ツールは「実験場」：ここでいくら壊しても、ファイルを保存（上書き）するまでは元通り。恐れずに触りましょう。
- 「矢印アイコン」が全ての起点：見たい場所を狙い撃ちするのが基本。
- 色はカラーピッカーで：CSSの色の四角をクリックすれば、マウス操作で好きな色を選べます。
検証ツールが使えるようになると、プロのサイトを見て「この色いいな、何のコードかな？」と盗める（学べる）ようになりますよ！
コメント