検証ツールでデバッグ

検証ツールとは

ブラウザには、表示中のページの中身をのぞく道具がついています。これが検証ツールです。使うと、どの要素にどの CSS があたっているか、どのルールが負けて取り消し線になっているかまで見えます。

開き方は、自分のブラウザでページを開き、見たい場所を右クリックして検証を選ぶだけです。Chrome や Edge なら F12 でも開きます。右側の Styles と書かれた欄に、その要素にあたっているルールが強い順にならびます。

ここがいちばんの利点なのですが、数値をその場で書きかえると、画面がすぐに変わります。font-size の数字をクリックして上下キーを押せば、1px ずつ動かしながら見ためを確かめられます。CSS を保存して読みこみ直す手間がいりません。

試した値は必ず書き戻す

注意が 1 つあります。検証ツールでの変更は画面の上だけのもので、ファイルには残りません。ページを再読みこみすると消えます。だから検証ツールは値を決める場所、style.css は決めた値を残す場所、と役わけして使います。

この教材のプレビューでは検証ツールを開けませんが、やることは同じです。今回は次の 2 か所を、試して決めた値としてコードに書き戻します。

letter-spacing は文字と文字のあいだの幅です。名前のような大きな見出しは、少し広げると落ちついて見えます。あわせて肩書きの .tagline を 15px にし、名前との差をはっきりさせます。

1. h1 のルールに letter-spacing を足して、名前の文字間を広げる
2. .tagline に font-size を足して、肩書きを本文より少し小さくする