C-3. Chromeのデベロッパーツールを使う

Google Chromeに標準搭載されている開発者用の検証ツール(デバッグツール)です。

※Macの場合、Google Chromeの標準搭載されていない可能性があるので、ダウンロードしていない方は、こちらを参考に、ダウンロードするようにいたしましょう。

Windows版Chromeのデベロッパー起動方法を知っておこう

Chromeで以下の手順で選択できます。左上の設定メニューから「その他のツール」→「デベロッパーツール」を選択する。

または、

[起動方法のショートカットキー]

[Ctrl] +[Shift] +[ i ]

セレクトモードの使い方

HTMLソースの編集方法を使ってスタイルの状態を見てみよう。

HTMLソースをまとめて編集することが可能です。上のタブで、[スタイル]が選ばれているといき、「選択中の要素」に対して指定されているCSSが全て表示されます。

これらの表示は、更新されませんが、編集が可能です。いろいろ数値を入れ替えたりして、表示を確認してみてください。

検証ツールはprogate(検証ツール(デベロッパーモード)の使い方)にも詳しく記載されているため、参考にしてみてください。

実践課題

本サイトのトップページのソースを見てみよう。(提出の必要ありません。)

ヒント:マウスの右クリックで「ページのソースを表示」が選択できます。 または(Ctrl+U)