ブラウザ（Chrome）には、開発者ツール（DevTools） という“のぞき窓”が最初から入っています。ページがどんなHTMLでできているか、CSSがどう効いているかを、その場で見たり試したりできる道具。プロが毎日使っているのに、意外と知られていません。今日はその入口だけ、のぞいてみましょう。
使い方 1. 要素の検証（Elements）
DevToolsを開くと出てくる Elements タブ。ここにページのHTMLがそのまま並んでいます。左上の「矢印アイコン」を押してからページの一部にマウスを重ねると、それがどのタグでできているかが光って分かります。
「このボタン、どう作ってるんだろう？」——気になるサイトの仕組みを、のぞいて学べます。
使い方 2. その場でCSSを試す（Styles）
Elementsで要素を選ぶと、右側の Styles に、その要素に効いているCSSが出ます。ここはその場で書き換えて試せるのがすごいところ。色や大きさの数字を変えると、画面がリアルタイムで変わります。
使い方 3. エラーを確かめる（Console）
Console タブは、ページの“異常のお知らせ窓”。JavaScriptがうまく動かないとき、ここに赤い文字でエラーが出ます。「動かない！」と思ったら、まずConsoleを開く——これはプロも最初にやる基本動作です。エラーの文をそのまま検索すると、解決のヒントが見つかることも多いです。
スマホ表示を確かめる（デバイスモード）
DevToolsの左上にある「スマホとタブレットのアイコン」を押すと、スマホサイズでの見え方を確認できます。自分のページがスマホでどう見えるか、実機がなくてもチェックできる便利機能です。
DevToolsをもっと便利にする拡張機能（アドオン）
DevToolsに慣れてきたら、Chromeの拡張機能を足すとさらに調べやすくなります。気になるサイトの色やフォントを、その場でそのまま拝借できるようになる定番の拡張機能を紹介します。
ColorZilla
ページ上の好きな場所をクリックするだけで、その色のカラーコードを取得できるスポイト拡張。
WhatFont
文字にマウスを重ねるだけで、使われているフォント名が分かる拡張。
Page Ruler
ページ上の好きな範囲をドラッグするだけで、幅と高さをピクセル単位で測れる拡張。
CSS Peeper
色・フォント・余白・角丸……要素をクリックするだけで、そのデザインの数値をまとめて教えてくれる拡張。ColorZillaやWhatFontを1つずつ使うより、まず全体像をつかみたいときに便利です。
VisBug
Google製の拡張。ページの上に直接、要素をドラッグで動かしたり、余白やフォントサイズをその場で変えたりできるさわれるDevToolsです。
Wappalyzer
気になるサイトが何で作られているかを教えてくれる拡張。フレームワークや使っているツールが、アイコン一覧でパッと分かります。
まとめ
- 右クリック →「検証」や
F12/⌘ + ⌥ + IでDevToolsを開ける - Elements でタグを、Styles でCSSをのぞいて、その場で試せる
- 「動かない！」ときは Console の赤いエラーをまず見る
- 慣れてきたらColorZilla・WhatFont・Page Ruler・CSS Peeper・VisBug・Wappalyzerで気になるサイトを調べられる
ここまでで、書く道具（VSCode）と、確かめる道具（ブラウザ）の両方がそろいました。あとは作りながら、少しずつ“自分の道具箱”を育てていきましょう。