検証ツールというブラウザの便利機能
はてなブログでは、デザインCSSというツールがあるので、自分のブログページを好きなようにデザインできます。そのツールで、CSSコードを記述します。
CSSコードの記述となると、ボタンやアイコンのクリックといった単純なものではなく、CSSのそれなりの知識が要求されるわけですが、それだけに、自由度の高いデザインができることを意味します。
その作業の際に使える、とても便利なWebブラウザの機能があります。「検証ツール」という機能です。ブラウザが提供する機能で、ブラウザによっては呼び方などが違います。Google Chrome では「検証ツール」という名称です。
これはいったい何をするツールかと言うと、
【１】 WebページのHTMLコードや適用されているCSSの確認
【２】 コードを一時的に書き換えてのページデザインのシミュレーション
などです。
検証ツールの起動方法
Google Chrome を起動して、確認したいWebページを開きます。その上で、ページ上のどこかで右クリックして、出てくるメニューの中の「検証」をクリックします。そうすると、HTMLやCSSのコードがびっしりと並んだウィンドウが画面右側（又は下側）に出てきます。これが検証ツールウィンドウです。
ショートカットキーの［Ctrl］＋［Shift］＋［I］ 又は、［F12］単独を押すことでも起動できます。
出てきた検証ツールウィンドウ内の、上の部分がHTML表示箇所で、下側がCSS表示箇所です。
タブ名などが最初は英語で表示されていますが、日本語化する方法も用意されており、簡単に切り替えできます。
基本的な使い方
検証ツールウィンドウ左上に四角に矢印が重なっているアイコン（カーソルのマーク）があるので、それをクリックします。そうするとアイコンの矢印が青色に変わります。その青色になっている状態が、「要素の選択」モード（又は、セレクトモード）です。「要素の選択」モード中に、Webページ上の任意の要素（見出しや本文、ボタン、画像など）をクリックすると、検証ツールウィンドウ内のHTML表示箇所に当該要素のHTMLコードが、CSS表示箇所内に選択要素に対応する、要素に適用されているCSSコードが、それぞれ表示されます。これによって、Webページの中味、詳細を確認できます。
さらに、CSSの各プロパティ指定項目の頭に付いているチェックを外すことで、そのCSS適用がない状態をシミュレーションできます。また、CSSコードを追加、編集することで、同じくその適用の結果のシミュレーションができます。
下の画像は、私のブログ「つれづれ電脳記」のページで検証ツールを起動したところです。「gooからきました」ボタンのタイトルを選択しており、検証ツールウィンドウの上部にそのHTMLコードが、下部にCSSの各プロパティと値が並んでいます。
ブログページへの反映
上記のとおり、検証ツールでCSSコードを自由に編集してその適用結果を実地に、目で確かめることができるのですが、その段階では、まだシミュレーションをしているに過ぎません。ブログページをいったん閉じて、開き直すと、元のデザインに戻っています。
ですから、実際のブログページに編集結果を反映させるためには、デザインCSSにコードを書き写す作業が必要です。
つまり、一方で、本体のデザインCSSの記述に一切手を加えないまま、検証ツールでいくらでも自由にデザインのシミュレーションができます。他方で、シミュレーションの結果をデザインCSSに反映させるためには、コードの書き写し作業が必要というわけです。コードは、コピー＆ペーストで簡単に書き写しが可能です。
検証ツールの便利さ
ブログページのCSSにおいて、各要素のプロパティと値を編集するには、各要素の名前、特にクラス名を把握する必要があります。CSSコードのセレクタの部分に適用対象を明示する必要があるからです。はてなブログページ内の要素に、どのようなクラス名が付けられているのか、その把握は容易ではありません。
けれども、この検証ツールを使うと、それが一発で分かるから、非常に便利です。要素の選択アイコン（セレクトアイコン）をクリックして選択モード（セレクトモード）にして、目的の要素をクリックするだけで、検証ツールがウィンドウ内にクラス名を親要素（祖先要素）名とともに表示してくれます。しかも、出てきたクラス名は、簡単にコピーできるのも便利です。HTMLやCSSの初心者にとっては、既存コードを利用して、一部修正することでブログページのカスタマイズができるっていうのも、たすかります。一からコードを書き起こすだけの知識はなくても、デザインのカスタマイズができます。
検証ツールは、まだまだほかにも便利な使い方がありそうです。でも、たったこれだけの使い方であっても、十分に役に立ちます。
それではまた次の記事で。
goosyun
