1.Chrome DevToolsとは？

Chrome DevTools（以下ディベロッパーツールと呼びます）はGoogle Chromeに標準で搭載されているデバッグツールです。その名の通り開発者にとって便利なツールが揃っています。例えば、JavaScriptのコンソール出力、表示スピード、通信状況などを確認することもできます。ただし、この記事ではHTMLとCSSの見た目の変更のために使う方法のみを解説します。

2.Chrome DevToolsの使い方

ここでは、弊社のページの文字色を赤色に変える例を通じて簡単な使い方の説明をします。

F12キーを押すことでディベロッパーツールが立ち上がります。

  • このアイコンをクリックすると画面上の要素が選択できるようになります。
  • 画面から要素をクリックして選択します。（あるいは先に要素を選択して右クリックから「検証」を選択しても良い）
  • 選択されたHTML要素はここでも確認できます。また逆に、ここから要素を選択することもできます。
  • スタイルタブを開くと選択された要素に適用されているCSSの一覧が見れます。
  • 色を赤に変えるというCSSを書きました。(color : red;の部分)
    なお、CSSの優先度の関係で無効になっているルールには取り消し線が引かれています。
新人エンジニア研修

ソースコードを変更しても、元のCSSやHTMLのコードが変更されるわけでは無いことに注意してください。
開発者向けのツールという名の通り、「こうやったらどうなるかな」という試行を実際の画面上で確認ができる、というのがこのツールの素晴らしいところです。

このように一度ディベロッパーツールでCSSをシミュレートしてからIDEを使ってCSSファイルを更新すると間違いがありません。

なお、スタイルシートの中で「ユーザー エージェント スタイルシート」とあるのはブラウザ（Chrome）が予め用意しているスタイルシートです。

今回は「Chrome DevToolsでサイトの見た目を変更する」方法について学びました。

その他にも以下の様なことができますが、研修の目的に応じてその都度講師から解説いたします。

  • HTMLを仮編集できる
  • デバイスごとの見た目を切り替えられる
  • クッキーデータを表示できる
  • JavaScriptのコンソールログを表示できる

演習問題

問題1: 要素の調査と編集

  1. (https://saycon.co.jp/html/demo.html)を開き、Google デベロッパーツールを起動します。
  2. ウェブページの任意の要素（例えば、ヘッダーやボタン）を右クリックして「検証」を選択します。
  3. エレメントパネルで選択した要素が強調表示されることを確認します。
  4. 選択した要素のHTMLを以下のように編集し、変更を適用します。
   <h1>新しい見出し</h1>
  1. ページ上で変更が反映されたことを確認します。

問題2: CSSの調査と編集

  1. 問題1で編集した要素を再度選択します。
  2. エレメントパネルの「Styles」タブを開き、以下のCSSプロパティを追加します。
   color: red;
   font-size: 24px;
  1. プロパティが正しく適用され、要素のスタイルが変更されたことを確認します。
  2. 追加したプロパティのチェックボックスをオフにして、スタイルが元に戻ることを確認します。

問題3: 要素の選択ツールの使用

  1. エレメントパネルの左上にある「要素の選択」ツール（マウスアイコン）をクリックしてアクティブにします。
  2. ウェブページ上で任意の要素（例えば、ナビゲーションメニュー）をクリックして選択します。
  3. 選択した要素がエレメントパネルで強調表示されることを確認します。
  4. 選択した要素に以下のCSSプロパティを追加し、変更を確認します。
   background-color: yellow;
   list-style: none;

問題4: ボックスモデルの確認

  1. 問題3で選択した要素について、エレメントパネルの「Computed」タブを開きます。
  2. ボックスモデルセクションを確認し、要素のマージン、ボーダー、パディング、コンテンツ領域のサイズをメモします。
  3. 要素のCSSスタイルに以下のプロパティを追加し、ボックスモデルがどのように変化するか確認します。
   margin: 30px;
   border: 2px solid blue;
   padding: 2px;

最後までお読みいただきありがとうございました。

新人エンジニア向けHTML講座の一覧に戻る

Chrome DevToolsでサイトの見た目を変更する　最後までお読みいただきありがとうございます。

研修のカリキュラムを見てみる