ブラウザの色々なブログテキストのCSSを調べる方法。

CSSは調べられる

色々なブログを見ていると、このブログはきれいに作ってあるなぁ、文字が読みやすいなぁと感じることがあります。

そういうブログに出会った時、どれくらいのフォントサイズになっているのだろう？行間はどれくらいに設定しているのだろう？文字は何色なんだろう？と思っても見ているだけではどれも知ることができません。

しかし、ブラウザの機能を使えばフォントサイズ・行間・文字色を知ることができます。

そのためにも、まずはフォントサイズ・行間・文字色のCSSを覚えましょう。

フォントサイズ：font-size
行間：line-height
文字色：color

フォント：font-family
背景色：background-color

Google Chromeで検証する

フォントサイズ・行間・文字色を知る方法として、まずはGoogle Chromeのブラウザでブログを開きます。

そして、調べたい文字を反転させてから右クリックして検証を押すと画面の右側にズラーとHTMLやCSSのコードなどが表示されます。

右側に表示中の真ん中の欄の右側にCSSが縦方向にたくさん並んでいるので、その中からフォントサイズ・行間・文字色のCSSを探します。

show allという項目にチェックを入れるとCSSで設定されている項目以外は色が薄くなるので探しやすいです。

CSSを押せばCSSの中身をより詳しく知ることができます。

行間は行の高さがpx表示になっているのでフォントサイズとの割合を知りたいときはCSSを押して中身を見ましょう。

IEで要素の検査をする

IEのブラウザでブログを開きます。

そして、画面上で右クリックして要素の検査を押すと下に要素の検査結果が表示されます。

下に検査の結果が表示されたら左の欄から調べたい文字を探して押した後で右の欄の属性を押すと調べたい文字のCSSが表示されます。

CSSがズラーと表示されるので、あとはその中からフォントサイズ・行間・文字色のCSSを探してください。

CSSの左側にある小さい三角を押せば詳細が見られます。

おまけ：CSS左横のチェックマークを外すと、あら不思議！画面上のブログに変化が現れます。