ブラウザの開発者ツールを使おう

ストーリー

先輩「HTMLの基本が分かってきたね。ここで便利なツールを紹介するよ」

便利なツール？

先輩「ブラウザに最初から入っている『開発者ツール』だよ。プロのWeb開発者も毎日使っているんだ」

開発者ツールとは

ブラウザに標準搭載されている Web開発用のツール です。

できること

開発者ツールの開き方

キーボードショートカット

右クリックから開く

1. ページ上で 右クリック
2. 「検証」 または 「要素を調査」 を選択

先輩「F12が一番簡単。覚えておこう」

Elementsタブを使ってみよう

Elementsタブとは

開発者ツールの Elementsタブ（要素タブ）では、ページのHTML構造が表示されます。

操作してみよう

1. 任意のWebページを開く（例：自分で作った hello.html）
2. F12 で開発者ツールを開く
3. 左上の 矢印アイコン（要素選択ツール）をクリック
4. ページ上の好きな要素をクリック

すると、その要素に対応する HTMLコード がハイライトされます。

画面上のテキスト「Hello, World!」をクリック
  ↓
Elementsタブで <h1>Hello, World!</h1> がハイライトされる

リアルタイム編集を試そう

HTMLを編集する

1. Elementsタブで任意の要素をダブルクリック
2. テキストを書き換える
3. Enter を押すと、画面に即座に反映される

<!-- 元のHTML -->
<h1>Hello, World!</h1>

<!-- ダブルクリックして書き換え -->
<h1>こんにちは、世界！</h1>

注意: この編集は 一時的 なものです。ページをリロードすると元に戻ります。 元のHTMLファイルは変更されません。

CSSを編集する

Elementsタブの右側にある Stylesパネル で、CSSも編集できます。

1. 要素を選択する
2. Stylesパネルで値をクリックして変更
3. 画面に即座に反映

これは Step 4 で CSS を学ぶときに大活躍します。

要素の情報を確認する

要素を選択すると、さまざまな情報が確認できます。

確認できる情報

今の段階では Styles パネルだけ覚えておけばOKです。

Consoleタブ

開発者ツールには Console（コンソール）タブもあります。

用途

• JavaScriptのエラーが表示される
• HTMLの文法エラーの確認にも使える

今の段階では「エラーが表示される場所」と覚えておきましょう。

実践：開発者ツールで遊んでみよう

練習1: 自分のHTMLを確認

1. 前回作った hello.html をブラウザで開く
2. F12 で開発者ツールを開く
3. <h1> タグ、<p> タグの位置を確認する

練習2: 有名サイトのHTMLを覗く

1. 好きなWebサイトを開く（例: google.com）
2. F12 で開発者ツールを開く
3. 要素選択ツール（矢印アイコン）でロゴをクリック
4. どんなHTMLタグが使われているか確認する

練習3: テキストを書き換え

1. 好きなWebサイトの見出しをダブルクリック
2. テキストを好きな内容に書き換える
3. 変わったことを確認し、リロードして元に戻ることを確認する

先輩「開発者ツールは壊しても大丈夫。リロードすれば元に戻るからね」

まとめ

チェックリスト

• F12で開発者ツールを開ける
• ElementsタブでHTML構造を確認できる
• 要素選択ツールで特定の要素を見つけられる
• HTMLのリアルタイム編集を試した
• 有名サイトのHTMLを覗いてみた

次のステップへ

開発者ツールという強力な味方を手に入れました。次は、HTMLの基本用語を整理して、しっかりと頭に定着させましょう。

推定読了時間: 25分