5.DevTools

学習目標

開発者ツールを開き、要素を選択して調べられる
CSS のスタイルを確認・変更できる
ボックスモデル（margin / border / padding）を視覚的に確認できる
ファイルが読み込めないエラーの原因をコンソールで特定できる

1. 開発者ツールとは

開発者ツールは、ブラウザーに標準で搭載されている機能です。表示中のページの HTML や CSS を確認したり、一時的に値を変えて見た目を試したりできます。

「うまく表示されない」「余白がおかしい」「画像が出ない」といった問題のほとんどは、開発者ツールで原因を見つけられます。

2. 開く方法

ブラウザーで F12 キーを押すと開発者ツールが開きます。ページ上の任意の場所を右クリックして「検証」を選んでも開けます。

3. 要素の調査

3-1. 要素の選択

開発者ツールの左上にある矢印アイコンをクリックしてから、ページ上の調べたい要素をクリックします。

選択した要素の HTML が「要素」パネルにハイライトされ、右側の「スタイル」パネルにその要素に適用されている CSS が表示されます。

3-2. CSS の確認と変更

「スタイル」パネルには、選択した要素に適用されているすべての CSS が表示されます。どのセレクターから来ているか、どのファイルの何行目で定義されているかも分かります。

プロパティの値をクリックすると、その場で書き換えられます。変更はブラウザー上だけの一時的なもので、ファイルには影響しません。「この色にしたらどう見えるか」「余白を増やしたらどうなるか」を試すのに使えます。

CSS が意図通りに効いていない場合、「スタイル」パネルでプロパティに取り消し線がついていることがあります。これは別の CSS に上書きされているか、プロパティ名や値の書き方が間違っているサインです。

3-3. ボックスモデルの確認

要素を選択すると、ページ上にボックスが色つきで表示されます。

青: コンテンツ（内容そのもの）。

緑: padding（内側の余白）。

黄: border（枠線）。

オレンジ: margin（外側の余白）。

「スタイル」パネルの下部にもボックスモデルの図が表示されます。各方向の margin、border、padding の値が数値で確認できます。

「この余白はどこから来ているのか」「なぜ要素同士の間隔が広いのか」といった疑問は、ここで解決できます。

4. エラーの確認

開発者ツールの「コンソール」タブを開くと、ページで発生しているエラーが表示されます。

404 (Not Found): 指定したパスにファイルが見つからなかった場合に表示されます。画像が出ない、CSS が読み込まれないときはこのエラーが出ていることが多いです。エラーメッセージにブラウザーが探しに行ったパスが表示されるので、実際のファイルの場所と見比べます。詳しくはパスとフォルダー構成で扱います。

5. よくある使い方

色を試す: 「スタイル」パネルで color や background-color の値をクリックすると、カラーピッカーが表示されます。その場で色を選んで見た目を確認し、気に入った色のコードを style.css にコピーできます。

余白を調整する: margin や padding の値を変えながら、ちょうどいい間隔を探します。決まったら style.css に反映します。

要素のサイズを確認する: 要素を選択すると、ページ上にサイズ（幅 × 高さ）がピクセル単位で表示されます。

6. 演習

(演習ファイル準備中)