先日、このブログのテーマのカスタマイズをした時のかなり便利だった
Google Chromeの要素の検証。

要素の検証のすごい所

要素を検証上の値を変更したり、CSSを追加すると、ほら
Google Chromeの要素の検証でCSSをいじってみた

こんな感じにブラウザ上でCSSを変更するとどうなるか?
がすぐ分かります!!
また、右側のスタイルシートにはファイル名と行数が書いてあるので
本当にCSSをいじる時はどのファイルをいじれば良いかがすぐ
分かるので便利です。

また、この要素を検証、どのサイトでもできるんです。

あまり、知らないサイトを出しても失礼になりますし、
ビフォア―アフターが分からないと思うのでGoogle検索結果をいじってみました。
こんな感じに
Google Chromeの要素の検証でGoogle検索結果もいじってみた

検索結果の説明文のサイズを大きくしてみたり、
いろんな所の色を変更してみました。
もちろん、再読み込み(リロード)すれば元に戻ります。

なので他サイトがCSSでどうやって表現しているか、いろいろ調べたり
研究するのにも便利です。

スポンサーリンク

要素を検証の使い方

今回は記事タイトルのCSSをいじってみます。
CSSを見たり、一時的にいじってみたい所で右クリック!
Google Chromeの要素の検証の使い方1 要素を見たい所で右クリック

右クリックメニューの一番下に要素を検証(N)が表示されるはずなので
クリック!

Google Chromeの要素の検証の使い方2 Developer Toolsが表示された所

クリックするとDeveloper Toolsが表示されます。
メインの所にhtmlが表示され右側のサイドバーにCSSが表示されます。
htmlは時々省略され、CSSはクリックした場所などで変わります。

今回いじるのは記事タイトルh2タグの所なので

Google Chromeの要素の検証の使い方3 Developer Tools上でCSSの編集

赤枠で囲んだ h2 のCSSをいじってサイズの色を変更します。
右上にはこのCSSが有るファイル名と行数が書いてあります。

Google Chromeの要素の検証の使い方4 CSSを変更してみた

はい!変更しました。
記事タイトルが小さくなってカラーが赤くなっていると思います。
フォントサイズを10pxに変更してcolor:red;を追加してみました。

元に戻したい時はリロードすればOK!

paddingとmargin

Developer Toolsを表示している時に表示される緑色オレンジ色の枠。

Google Chromeの要素の検証 paddingとmargin

 

緑色の枠はpadding、オレンジ色の枠はmarginの領域です。

まとめ

要素を検証を使えば、CSSファイルを一々ファイルを書き換えて検証する手間が
省けるので便利ですし、他サイトをちょっと調べるにも便利です。

でも、多少タグを知らないろ不便かもしれないので
CSSをいじる時に知っておきたいタグをまとめて記事にしたいと思います。