本文へスキップ
Web整備室
HTML / CSS 入門 Chrome DevTools HTML CSS

Chrome DevTools を使ってみよう

更新日：2026-08-02

前のページでは、Live Server を使って、

保存するとブラウザが自動更新される環境

を作りました。

今回は、Web制作で非常に重要なツールである、

Chrome DevTools

を使ってみます。

今回使用するファイル構成

この回では、次のファイルを使用します。

html-practice/
├── index.html
└── css/
    └── style.css

Chrome DevTools とは？

Chrome DevTools は、

ブラウザに表示されているHTMLやCSSを調査するツール

です。

Web制作では、ほぼ毎日使います。

DevTools を開く

Google Chrome を開いた状態で、

F12

を押してください。

または、

  1. 右クリック
  2. 検証

でも開けます。

画面が分割される

すると、

  • HTML
  • CSS
  • コンソール
  • ネットワーク

などが表示されます。

最初は難しく見えるかもしれませんが、今は大丈夫です。

Elements タブを見る

まずは、

Elements

タブを見てください。

ここでは、

現在ブラウザに表示されているHTML構造

を見ることができます。

HTMLをクリックしてみよう

例えば、

<h1>

をクリックすると、

画面上の見出し部分がハイライトされるはずです。

これは、

このHTMLが、この表示部分です

という意味です。

CSSも見られる

HTMLを選択すると、右側にCSSも表示されます。

例えば、

color: red;
font-size: 40px;

などが見えるはずです。

CSSをその場で変更できる

DevTools では、CSSを直接変更できます。

例えば、

color: red;

をクリックして、

color: blue;

へ変更してみてください。

ブラウザ表示がすぐ変わるはずです。

ファイル自体は変更されない

ただし、DevToolsで変更した内容は、

一時的な変更

です。

VS Code のファイルは変更されません。

ブラウザ更新すると元に戻ります。

どんなときに使うの？

DevTools は、

  • CSSが効かない
  • 余白がおかしい
  • 色が違う
  • サイズが崩れる

などを調査するときによく使います。

HTML構造を見る練習をしてみよう

例えば、

  • <body>
  • <div>
  • <h1>
  • <p>

などをクリックしてみてください。

どのHTMLがどの表示に対応しているのか、少しずつ見えてきます。

実際のWebサイトでも使える

DevTools は、自分のHTMLだけでなく、

他のWebサイト

でも使えます。

例えば、

  • Amazon
  • YouTube
  • ニュースサイト

などでも HTML や CSS を確認できます。

Web制作は「観察」も大切

初心者のうちは、

  • 作る
  • 動かす

だけでなく、

既存サイトを観察する

ことも非常に勉強になります。

例えば、

  • どんなHTML構造なのか
  • class名はどうなっているか
  • どんなCSSが使われているか

を見るだけでも、多くの発見があります。

最初は全部理解できなくてOK

DevTools には非常に多くの機能があります。

最初から全部理解する必要はありません。

まずは、

  • HTMLを見る
  • CSSを見る
  • 色を変更してみる

くらいから始めれば十分です。

次のページでは

次のページでは、

  • display
  • block
  • inline
  • Flexbox

など、レイアウトの基礎を学んでいきます。

Webサイト作りで非常に重要な内容です。