Chromeのデベロッパーツールを利用する2ーCSSを変更するとどうなるか試す

Chromeには「デベロッパーツール」というものが備わっています。WordPress制作者はこのツールを使って様々なことが行えます。

デベロッパーツールから試したい部分を指定する方法

CSSを使ったフォントの修正などをする前に、デベロッパーツールを使って「どのように修正したらどのような結果になるのか?」を試すことができます。
試し方は以下の通りです。
1.デベロッパーツールの左上にある

セレクターをクリックして、

水色にします。セレクターが水色の状態のときに、

CSSを変えたい部分をクリック

左側赤枠部分はHTMLソース、右側青枠部分はクリックした部分に適用されているCSSが表示されます。
拡大すると左側は

このようなコードになっていて右側は

この部分で使われているCSSが表示されています。

CSSを変更してみる

この部分のCSSを変更してみます。右側のCSSで、例えば

background-color の色をクリックして、

色を指定することができます。すると同時に

表示部分も変更されるので、色の変化によって表示がどのようになるのかを試すことができます。

チェックボックスをONから

OFFにすると、

このように文字色を指定しない場合は、黒くなるということがわかります。

CSSの変更が影響を受けるのは今見ているブラウザ上だけ

CSSの変更を色々試しても、その変更の影響を受けるのは今見ているブラウザ上だけとなります。他の環境でいる場合は全く影響を受けませんので、安心して色々試すことができます。
元の状態に戻したければ、ブラウザの再読込を行えば通常の表示に戻すことができます。

どのCSSが効いているのかは Computed を参照する

同じ部分に複数のCSSが定義されていて、最終的にどのCSSの定義によって今の表示が行われているのか?を見たい場合は

Computed をクリックします。
例えばこの見出しのfont-sizeは

このように多くの箇所で大きさが指定されていますが、結果的に 24px となっているので

この行の指定で24pxの大きさが表示されていることがわかります。
CSSを修正する前に、デベロッパーツールで試してから修正すると効率的に作業が行えます。

色はブラウザ内の色をコピーすることができる

上図の青い部分をテキストの色と同じにするとします。

先ほどのようにデベロッパーツールを開いて見出し部分にカーソルを置き、青い四角の部分をクリックします。

スポイトのマークが青くなっていることを確認して

見出しのテキストにカーソルを移動すると、丸の中に赤い四角の枠を中心とした図が現れました。こちらはカーソル部分がクローズアップされています。
赤枠内の色をクリックすると

テキストの色#333333をコピーできました。


同時に見出しの青色部分もテキストと同じ色に変わりました。

HTMLの内容も変更してみる

その他の使い方として HTMLの内容も変更してみる ことができます。
例えばこの見出し部分がもう少し長かった場合はどのように表示されるか?ということを試してみます。

先ほどと同じ方法で見出し部分をセレクトして、青い行の上で右クリックします。するとこのようにメニューが出るので

Edit as HTML をクリック

修正が可能になりますので、

文字を追加して、変更を有効にするためにこの場所以外をクリック

するとこのように文字が多くて2行になった場合の表示を確認することができます。

要復習