シリーズ第12回は、Google chromeの開発者ツールについてです。このツールを使えば、記述したHTMLやCSSがブラウザでどのように解釈されているかを確認できます。たくさんの機能がありますが、基本的に必要なところだけをかんたん解説していきます。
使い方
実際に開発者ツールを開くと、たくさんのタブがあり情報量も多いです。難しいという気持ちが先立つかもしれません。しかし、これまでのプログラミングと同様、必要な部分だけ覚えていけば大丈夫です。HTMLとCSSだけなら、最初に見えているページだけでもかなりのことが分かります。
表示させる方法
以下の4つの方法があります。
- 右クリック ＞ 検証
- その他 マーク ＞ その他のツール ＞ 開発者ツール
- ショートカットキー【 Ctrl + Shift + i 】
- F12キー
1番目の方法です。
ブラウザで表示させたファイル上で右クリックし、「検証」をクリックします。
2番目の方法です。
chrome右上に表示される「その他」（点が縦に3つ並んでいる）マークをクリックします。その後、「その他のツール」＞「デベロッパー ツール」を選択します。
3番目の方法は、上の画像の赤下線に書かれているショットカットキーを使う方法です。Ctrl + Shift + I (アルファベットのアイ)ですが、覚えてしまうと楽ですね。
4番目は「F12」キーを押します。
どの方法でもOKですが、以下のように開発者ツールが表示されます。
簡単に言えば、画像のように3つの部分で構成されます。ブラウザの表示、HTML情報、CSS情報の3つです。しかし、必ずしも上の画像のように表示されるわけではありません。表示の切替ができるからです。
表示の切替
開発者ツールの表示は4種類です。
CSS情報の右上に出ているその他（点が縦に3つ並んでいる）マークをクリックします。Dock sideのタイプが選択できます。ご自分が見やすいなと思う表示を選んでください。各表示領域は、マウスポインタ―を境界線に載せて出る左右矢印（↔）を左クリックしながら調整できます。
PC・スマホ（モバイル）表示の切替
PC表示だけでなく、モバイル表示にも切り替えられます。
少し見にくいですが、HTML情報の左上あたりにPC・モバイル表示の切替マーク（赤囲み）があります。トグル表示でクリックするごとに交互に切替ができます。
開発者ツールを閉じる
CSS情報の右上あたりに出る ×マーク（赤囲み）をクリックします。
様々なタブ
HTML情報もCSS情報も何種類かのタブがあり、表示内容を切り替えられます。
- HTML：Elements、Console、Sources、Networkなど
- CSS：Styles、Computed、Layoutなど
ただ前述の通り、HTMLとCSSファイルだけなら、上の2つの画像の緑囲みのタブのままで大方の情報が得られます。CSSでは「Computed」を時々使ったり、JavaScriptファイルの場合「Console」での確認をしたりしますが、今後必要になった時に覚えれば大丈夫です。
要素の選択と確認
では、実際に特定の要素を開発者ツールで表示させて、確認してみましょう。
小さくて見にくいですが…、PC・モバイル切替のマークの横に選択（四角の中に矢印）マークがあります。クリックして特定の要素にマウスカーソルをホバーさせると、その部分に関する情報が簡易表示されます。（画像では、メニューリストの「プログラミングとは」の部分が選択されています）実際にクリックすると、この要素に関するHTML、CSSの情報が表示されるようになっています。
上の画像では、選択した部分のHTML情報（赤下線）から、これがリスト（li）アイテムであること、CSS情報からは、class名「.header-list」のliに対して、list-style、float、paddingのスタイルがあたっていることを確認できます。また、赤囲みの右上を見ると、それが「stylesheet.css」ファイルの13行目に記述されていることが分かります。
ちなみに、そのすぐ下に表示されている「user agent stylesheet」（緑下線）は、ブラウザがデフォルトで持っているスタイルを表示しています。この点は、今後の回で言及したいと思います。また、この開発者ツール上でコードを追加削除することで、仮編集と表示確認もできます。この点も、今後の回で取り上げます。
注意点
開発者ツールを使う上での注意点です。
自分が書いたファイルと全く同じではない
特にHTMLについて言えますが、開発者ツールで表示されるのはあくまでブラウザが解釈した情報です。例えば、閉じタグを忘れて書いていた場合、補ってくれていることがあります。
ツリー構造で表示しているので、適宜展開して確認していく必要があります。要素の左にある▶をクリックすると、▼に切り替わり、その部分の詳細が表示されるはずです。
まとめ
シリーズ記事 初心者もできる！プログラミング基礎講座【第12回】はいかがでしたか。今回は、開発者ツールの基本的な使い方について解説しました。表示方法や切替、要素の選択と確認方法、注意点についてお伝えしました。
次回は、開発者ツールを使った確認と編集について取り上げます。次回もお楽しみに！