はじめに
今回はChrome DevTools（Googleの検証ツール） の使い方を解説します。特にElementsパネルでHTML要素の情報を確認する方法とStylesタブで適用されているCSSを読み解く方法を、初心者の方にもわかりやすく丁寧に説明します。
1. DevToolsとは何か
1.1 Googleの検証ツール（Chrome DevTools）
Chrome DevToolsはGoogleのブラウザ「Chrome」に標準で搭載されている開発者向けのツールです。Webページのあらゆる情報を確認・変更できます。
DevToolsでできること（代表的なもの）：
📂 Elements（要素） → HTMLの構造とCSSを確認・変更する
🎨 Styles（スタイル） → 適用されているCSSを確認する
🌐 Console（コンソール）→ JavaScriptのエラーや出力を確認する
🔗 Network（ネットワーク）→ 通信の状況を確認する
⚡ Performance（パフォーマンス）→ ページの読み込み速度を確認する
💡 DevToolsはWeb制作者の「虫眼鏡」です： 「なぜこの要素がこんな見た目になっているのか」「なぜレイアウトが崩れているのか」を調べるための必須ツールです。プロのエンジニアも毎日使っています。
1.2 DevToolsを開く方法
DevToolsを開く3つの方法：
① キーボードショートカット（最もよく使う）
Windows / Linux：F12
Mac：Command + Option + I
② 右クリックメニューから
ページ上で右クリック → 「検証」をクリック
③ Chromeのメニューから
右上の「⋮」→「その他のツール」→「デベロッパーツール」
2. Elementsパネルの基本
2.1 Elementsパネルの構成
DevToolsを開くと最初に表示されるのがElementsパネルです。画面は大きく2つに分かれています。
┌─────────────────────────────────────────────┐
│ Chrome DevTools │
├─────────────────────┬───────────────────────┤
│ │ Styles Computed ... │
│ HTML構造 │ │
│ （DOMツリー） │ 適用されているCSS │
│ │ （Stylesタブ） │
│ <html> │ │
│ <head> │ element.style { } │
│ <body> │ .btn { ... } │
│ <header> │ .container { ... } │
│ <main> │ │
│ <footer> │ │
└─────────────────────┴───────────────────────┘
2.2 DOMツリーを展開・折りたたむ
左側のDOMツリーには現在のHTMLの構造が表示されています。
操作方法：
▶ のついた要素をクリック → 子要素を展開する
▼ のついた要素をクリック → 子要素を折りたたむ
キーボード操作（要素を選択した状態）：
→ キー → 展開する
← キー → 折りたたむ
↑ / ↓ → 上下の要素に移動する
3. 要素の選択とホバー時に何が起きるか
3.1 要素選択ツール（最もよく使う機能）
DevToolsの左上にある「矢印アイコン」が要素選択ツールです。
要素選択ツールの使い方：
① DevToolsの左上の「□に矢印」アイコンをクリックする
（または Ctrl+Shift+C / Command+Shift+C）
② ページ上でマウスを動かす
→ カーソルが当たった要素がハイライトされる
③ 調べたい要素をクリックする
→ その要素がElementsパネルで選択状態になる
3.2 DOMツリー上の要素名にホバーしたときに起きること
DOMツリーの要素名の上にマウスをホバーすると、ページ上でさまざまな情報が視覚的に表示されます。
ホバー時に表示されるもの：
① 要素のハイライト（色付きのボックス）
┌─────────────────────┐
│ margin（オレンジ） │
│ ┌───────────────┐ │
│ │ border（黄色） │ │
│ │ ┌───────────┐ │ │
│ │ │padding（緑）│ │ │
│ │ │ ┌───────┐ │ │ │
│ │ │ │content│ │ │ │
│ │ │ │（青） │ │ │ │
│ │ │ └───────┘ │ │ │
│ │ └───────────┘ │ │
│ └───────────────┘ │
└─────────────────────┘
青 → contentエリア（実際のコンテンツの領域）
緑 → padding（コンテンツと枠の間の余白）
黄色→ border（枠線）
橙 → margin（要素の外側の余白）
② 要素の情報ツールチップ
タグ名・クラス名・サイズ（幅×高さ）が表示される
例：div.container 1200 × 600
💡 ホバーするだけでボックスモデルが一目でわかります： 「なぜこの要素の周りに謎の空白があるのか」という疑問は、ホバーしてオレンジの部分（margin）やみどりの部分（padding）を確認するだけで解決することが多いです。
3.3 ツールチップに表示される情報
ホバー時のツールチップの読み方：
例：div.container 1200 × 800
div → HTMLのタグ名
.container → CSSクラス名（複数あればすべて表示）
1200 → 要素の幅（px）
800 → 要素の高さ（px）
＋追加情報：
margin: 0px / padding: 24px / border: 1px などのボックスモデル情報
4. Stylesタブの使い方
4.1 Stylesタブとは
ElementsパネルでHTML要素を選択すると、右側のStylesタブにその要素に適用されているCSSがすべて表示されます。
Stylesタブの構成（上から順に優先度が高い）：
┌─────────────────────────────────────┐
│ Styles Computed Layout ... │
├─────────────────────────────────────┤
│ element.style { │ ← インラインスタイル（最優先）
│ color: red; │
│ } │
├─────────────────────────────────────┤
│ .btn.btn--primary { style.css:42 │ ← クラスのCSS
│ background: #1A5FC0; │
│ padding: 12px 24px; │
│ } │
├─────────────────────────────────────┤
│ .btn { style.css:30 │ ← より汎用的なクラス
│ display: inline-flex; │
│ border-radius: 8px; │
├─────────────────────────────────────┤
│ Inherited from body │ ← 親要素から継承されたCSS
│ font-family: 'Noto Sans JP'; │
│ line-height: 1.8; │
└─────────────────────────────────────┘
4.2 取り消し線のついたスタイルを読む
Stylesタブをよく見ると、いくつかのプロパティに取り消し線がついていることがあります。
取り消し線の意味：
.btn {
background: blue; ← 取り消し線あり（他のCSSに上書きされている）
border-radius: 8px; ← 取り消し線なし（有効なスタイル）
}
取り消し線がつく理由：
① 詳細度（specificity）が高い別のルールに負けている
② !important がついた別のルールに上書きされている
③ 同じプロパティが後から定義されて上書きされている
💡 「なぜスタイルが効かないのか」を調べるときはまず取り消し線を探しましょう： 意図したCSSが効いていないときは、Stylesタブで取り消し線がついていないか確認するのが最初のステップです。
4.3 ファイル名と行番号を確認する
各CSSルールの右側にはどのファイルの何行目に書かれているかが表示されています。
例：
.container { style.css:156
width: 1200px;
margin: 0 auto;
}
「style.css:156」の意味：
style.css → CSSファイルの名前
156 → そのファイルの156行目
→ クリックするとそのCSSファイルの該当行が開く
5. Stylesタブでリアルタイムにスタイルを変更する
5.1 既存の値を変更する
Stylesタブのプロパティの値は直接クリックして編集できます。変更はリアルタイムでページに反映されます。
値の変更方法：
① 変更したいプロパティの値をクリックする
例：background-color: #1A5FC0; の #1A5FC0 をクリック
② 値を書き換える
#FF0000 と入力してEnterキーを押す
③ ページ上で色が変わる
→ 元に戻したい場合はCtrl+Z（Mac：Command+Z）で取り消せる
数値はマウスホイールで増減できる：
10px の上にカーソルを置いてスクロール
→ ↑スクロールで増える・↓スクロールで減る
Shiftを押しながらスクロールで10刻みで変更できる
⚠️ DevToolsでの変更はリロードすると消えます： DevToolsで変更したスタイルはあくまでプレビューです。実際のCSSファイルには反映されないため、気に入った値は自分でCSSファイルにコピーしてください。
5.2 新しいプロパティを追加する
新しいCSSプロパティを追加する方法：
① 追加したいCSSルールのブロック内の空白部分をクリックする
② 新しい入力欄が現れる
③ プロパティ名を入力してTabキーを押す
④ 値を入力してEnterキーを押す
例：
.card { ← ここをクリック
border-radius: 8px;
（ここに新しいプロパティが追加される）
}
5.3 プロパティのチェックボックスで有効・無効を切り替える
各プロパティの左側にあるチェックボックスで、そのプロパティを一時的に無効にできます。
使い方：
.card {
☑ background: white; ← チェックあり（有効）
☐ box-shadow: 0 2px 8px; ← チェックなし（無効・効いていない状態）
☑ border-radius: 8px;
}
→ チェックを外すとそのプロパティが無効になりページが変わる
→ チェックを入れると元に戻る
6. Computedタブで最終的なスタイルを確認する
6.1 StylesタブとComputedタブの違い
| タブ | 表示内容 |
|---|---|
| Styles | どのCSSファイルのどのルールが適用されているか（重複・上書きも含む） |
| Computed | 最終的に実際に適用されている値だけを表示する |
Computedタブを使うケース：
「この要素のpaddingって結局何px？」
→ Stylesタブには複数のルールがあって見づらい
→ Computedタブを見れば最終的なpaddingの値だけ表示される
「このmarginってどこから来てるの？」
→ Computedタブでプロパティの左の▶をクリックする
→ そのプロパティを設定しているCSSルールが表示される
6.2 ボックスモデルの図を確認する
Computedタブの上部にはボックスモデルの図が表示されます。
┌─────────────────────────────────┐
│ margin │
│ ┌───────────────────────────┐ │
│ │ border │ │
│ │ ┌─────────────────────┐ │ │
│ │ │ padding │ │ │
│ │ │ ┌───────────────┐ │ │ │
│ │ │ │ 1200 × 400 │ │ │ │
│ │ │ └───────────────┘ │ │ │
│ │ │ 10 10 │ │ │ ← padding（上下左右の値）
│ │ └─────────────────────┘ │ │
│ │ 1 │ │ ← border
│ └───────────────────────────┘ │
│ 16 0 16 0 │ ← margin（上右下左の値）
└─────────────────────────────────┘
各数値をクリックすると直接編集できる
7. よく使うDevToolsの便利な操作
7.1 要素を検索する
DOMツリーが大きくなると目的の要素を探すのが大変になります。
DOMツリー内の検索：
Ctrl+F（Mac：Command+F）
→ 検索ボックスが開く
→ クラス名・ID・タグ名・テキストで検索できる
例：
「.header」と入力 → .headerクラスがついた要素を順番にハイライトする
「#main」と入力 → id="main" の要素を見つける
7.2 要素のHTMLをその場で編集する
HTMLをその場で変更する方法：
① DOMツリーで要素をダブルクリックする
② テキストや属性を直接編集する
③ 変更がページにリアルタイムで反映される
例：
<h1>タイトル</h1> をダブルクリック
→「タイトル」の部分を「別のタイトル」に変更
→ ページ上の見出しが変わる
（リロードすると元に戻る）
7.3 要素のCSSクラスを追加・削除する
クラスを動的に追加する方法（Stylesタブ）：
① Stylesタブの「.cls」ボタンをクリックする
② 入力欄にクラス名を入力する
③ ページにそのクラスが追加される
→ 「.is-active を追加したらデザインがどう変わるか」を確認するときに便利
7.4 擬似クラスのスタイルを強制適用する
hover・focus・active などの擬似クラスのスタイルは通常マウス操作をしないと確認できません。DevToolsでは強制的に適用できます。
擬似クラスを強制適用する方法：
① Stylesタブの「:hov」ボタンをクリックする
② 適用したい擬似クラスにチェックを入れる
☑ :hover
☐ :focus
☐ :active
☐ :visited
→ ボタンにマウスを乗せなくても:hoverのスタイルが確認できる
→ フォームにフォーカスしなくても:focusのスタイルが確認できる
💡 :hover の確認はよく使います： ホバーエフェクトのデザイン調整をするとき、マウスを乗せながらStylesタブを操作するのは難しいので、強制適用が大活躍します。
8. DevToolsを使ったデバッグの実践
8.1 「レイアウトが崩れている」を調べる
調査の手順：
① 崩れている要素を要素選択ツールでクリックする
② Stylesタブで以下を確認する
・意図していないwidthやheightが設定されていないか
・取り消し線のついたスタイルがないか
・displayの値が意図通りか（flex / block / inline-block など）
③ Computedタブのボックスモデルで
実際のmargin・padding・borderの値を確認する
④ 親要素も確認する
→ 子要素のレイアウトは親要素の設定に影響されることが多い
⑤ 原因のCSSルールの右側のファイル名をクリックして
実際のCSSファイルを開いて修正する
8.2 「スタイルが効いていない」を調べる
よくある原因と確認方法：
原因① 詳細度が低い
→ Stylesタブで取り消し線がついていないか確認する
→ 上位にあるCSSルールに負けている
原因② タイプミス（スペルミス）
→ Stylesタブで黄色い警告アイコン⚠がついていないか確認する
→ 無効なプロパティ名・値は警告が表示される
原因③ クラス名の間違い
→ DOMツリーでその要素のクラス名を確認する
→ CSSファイルに書いたクラス名と一致しているか照合する
原因④ セレクターが間違っている
→ Stylesタブの検索ボックス（Ctrl+F）でクラス名を検索する
→ 自分が書いたCSSルールが表示されているか確認する
9. 実践チェックリスト
✓ F12キーでDevToolsが開けるか確認したか
✓ 要素選択ツール（左上の矢印アイコン）でページ上の要素をクリックして選択できるか
✓ DOMツリーの要素名にホバーしてページ上でボックスモデルが表示されるか確認したか
✓ Stylesタブでどのファイルのどのルールが適用されているか読めるか
✓ 取り消し線のついたCSSプロパティを見つけてなぜ無効になっているか確認したか
✓ Stylesタブでプロパティの値をクリックして変更できるか試したか
✓ :hov ボタンで :hover のスタイルを強制適用して確認したか
✓ Computedタブでボックスモデルの図を確認したか
✓ CSSプロパティのファイル名・行番号をクリックしてCSSファイルを開けるか確認したか
まとめ
今回はChrome DevToolsのElementsパネルとStylesタブの使い方を解説しました。ポイントをまとめると：
- DevToolsはF12キーまたは右クリック→「検証」で開く
- 要素選択ツール（左上の矢印アイコン）でページ上の要素をクリックするとElementsパネルで選択状態になる
- DOMツリーの要素名にホバーするとページ上にボックスモデル（content・padding・border・margin）が色分けで表示される
- Stylesタブには上から順に優先度の高いCSSルールが表示される
- 取り消し線のついたプロパティは別のCSSルールに上書きされて無効になっている
- 各CSSルールの右側のファイル名・行番号をクリックすると該当箇所のCSSファイルが開く
- Stylesタブでは値をクリックして直接編集してリアルタイムでデザインを確認できる（リロードすると消える）
:hovボタンで:hoverなどの擬似クラスのスタイルを強制的に適用して確認できる- Computedタブでは最終的に適用されたスタイルの値だけが表示される
次の記事では、DevToolsのConsoleタブの使い方を解説します。JavaScriptのエラーの読み方・console.logを使ったデバッグ・コンソール上でのJavaScriptの実行方法を初心者向けに丁寧に説明します。お楽しみに！
コメント