（ちょっとメモ）Web開発ツールでCSSがどう効いているか確認しよう

既に使っているかたも多いと思いますが、主要なブラウザには Web開発ツール という機能があります。これはすっごく便利です。

今見ているWebサイトの
「HTMLの構造はどうなっているか」
「CSSがどう効いているか」
などを、ブラウザ上で見ながら確認できるので、とても勉強になります。
「開発ツール」なんつって、大袈裟な名前が付いているけど、HTML や CSS をはじめたばっかりの人にうってつけです。

ブラウザによって名称が違って、
Chromeは「デベロッパーツール」
Safariでは「Webインスペクタ」
Firefoxは「開発ツール」
IE や Edgeは「F12 開発者ツール」と言う名前がついています。

例えばこんな時に使うと効果的。
●自分で作ったページが意図したとおりに表示しなくて困った時
●ネットで見つけた素敵なサイトの HTML や CSSを知りたい時
●他人が作ったHTMLや CSSを編集しなきゃなのに、指定が意味不明だよw！ な時

本日のINDEX

1. DOMについて
2. ブラウザで HTMLの構造やCSSを調べる
   1. Chrome「デベロッパーツール」
   2. Safari「Webインスペクタ」
   3. Firefox「開発ツール」
   4. Internet Explorer、Edge「F12 開発者ツール」
3. 「Web開発ツール」のいろいろな機能
4. Chromeの機能拡張「CSSPeeper」

DOMについて

まずは、DOMツリー という言葉が出てくるので、DOM についてザックリと。
Web開発ツールで「HTMLの構造や CSSがどう効いているのかを調べる」とは、DOMツリーを調べて、それに紐付いているCSSを調べることなので。

DOM（Document Object Model）とは、JavaScriptで HTML（や XML）を操作するための W3Cの仕様だそうです。
平たく言えば、HTML（や XML）の各要素の階層構造（親子関係や兄弟関係）のことらしい。

ブラウザは HTML文書を読んで、要素・属性とその値・テキストなどをレンダリングしますが、その時 同時にそれらを「DOMオブジェクト（プログラムで利用できるモノ）」として生成するんだって。
DOMではその「DOMオブジェクト」のことを「ノード（node）」と呼ぶそうです。HTMLの要素は「要素ノード」。それを id で特定して呼び出して JavaScriptで操作したりできるというわけです。

DOMツリーとは、各ノードの階層構造をわかりやすく表示したやつ。
家系図みたいな図のものや、箇条書き風のもあります。

「Web開発ツール」では、この DOMツリーで、その中の各ノード（要素）をクリックして、紐付けられた CSSなどを見ることができます。

たいていの「Web開発ツール」では、CSSの編集 & プレビューができます。
今ある指定を無効にしたり、値を書き換えると、リアルタイムでプレビューできるので、CSSがどのように作用しているか理解しやすいです。

ブラウザで HTMLの構造や CSSを調べる

主要ブラウザの Web開発ツール の見かたをざっと紹介します。
いつも使ってるブラウザで試してみてください。

1. Chrome「デベロッパーツール」
2. Safari「Webインスペクタ」
3. Firefox「開発ツール」
4. Internet Explorer、Edge「F12 開発者ツール」

この機能を呼び出すショートカットは、
Internet Explorer、Edge の「F12 開発者ツール」は F12キー。
Chrome、Safari、Firefox の Web開発ツールは、
Macなら Cmd + Option + I（アイ）、Winでは Ctrl + Shift + I です。

Chrome「デベロッパーツール」

Macなら Cmd + Option + I（アイ）、Winでは Ctrl + Shift + I で呼び出します。
（ IE, Edge以外は全部これ↑です。Opera もこれで出ます）

Elements タブで DOMツリーが、右のサイドバーの Styles で CSSが表示されます。
左上の端っこのアイコン（Select an element in the page to inspect it）を選択した状態だと、ページ上で自由に部品をクリックで選べて、めっちゃ便利。

Safari「Webインスペクタ」

Macなら Cmd + Option + I（アイ）、Winでは Ctrl + Shift + I で呼び出します。
（ IE, Edge以外は全部これ↑です。Opera もこれで出ます）

左上の「リソース」アイコンで DOMツリーやHTMLソースが表示され、右上の「スタイルの詳細サイドバー」アイコンでスタイルが、その下の「ルール」を選ぶと CSSが表示されます。

Firefox「開発ツール」

Macなら Cmd + Option + I（アイ）、Winでは Ctrl + Shift + I で呼び出します。
（ IE, Edge以外は全部これ↑です。Opera もこれで出ます）

左上の「インスペクター」で DOMツリーが、右サイドバーの「ルール」で CSSが見れます。
左上の端っこのアイコンから、Chromeと同じように ページ上から要素を選ぶことができます。

Internet Explorer、Edge「F12 開発者ツール」

こちらは Winのみ。F12キーで起動するので「F12 開発者ツール」と呼ばれているそうです。

Microsoft の Developer Network で使い方の詳細ページがあります↓
「レイアウトの問題を診断して修正する (Windows)」（クリックで別ウィンドウで開きます）

「Web開発ツール」のいろいろな機能

「Web開発ツール」には、HTMLの構造とCSSの確認の他にもいろいろ機能があります。
ブラウザによって機能の種類は違いますが、だいたい下記のものは付いてるようです。

DOMツリーとスタイルの確認・操作

上の記事で説明した機能です。

コンソール

ページのログ、エラー、警告などを表示できます。
例えば CSSで間違った文法で書いちゃってブラウザに無視されたものなどを表示させたりできます。エラーの原因を探るのに便利。

JavaScriptのデバッガ

Javascriptのデバッグ（バグ（プログラムの欠陥）を見つけて手直しすること）ができます。

ネットワークリクエストの監視

ネットワークリクエストの種類や応答時間などを表示できます。
ページの表示がなんだか遅い時に原因を探れます。

Chromeの機能拡張「CSSPeeper」

おまけです。
Chromeには CSSPeeper という機能拡張があります。
「Web開発ツール」がエンジニア向けなら、こちらはデザイナー向けっていうか、視覚的でわかりやすいインターフェイスです。
好きなWebページで使ってるフォントを知りたいとか、色指定を見たいとか、ちょこっと調べたい時に便利です。

Chromeウェブストア で「CSSPeeper」を検索するか、
こちらから開いて Chromeに追加します。（クリックで別ウィンドウで開きます。Chromeでクリックしてね）

追加したら、Chromeの左上のアイコンをクリックして起動できます。

General では フォントや読み込み速度、Colors では使ってる色、Assets では使ってる画像を調べられます。
ページ上の要素をクリックすると、指定されている CSS が Inspector で表示されます。

次回予告

次回は CSSの話に戻って、positionプロパティを使ってみます。
これまたいろいろとややこしいプロパティですが、ルールをちゃんと知っていれば便利です。
positionプロパティとセットで top、right、bottom、leftプロパティも使います。