WEB画面上で変更を確認しながらCSSの編集ができるGoogle Chromeの「検証」ツール

Google Chromeの「検証（デベロッパー ツール）」を使えば、CSSの編集が凄く楽になります。

余白を広げたい。文字を大きさを変更したい。背景を変更したい。文字の色を変更したい。そんな時このツールを使えば、WEB画面で変更を確認しながらCSSを編集することができます。

もちろん無料です。必要なのはブラウザGoogle Chromeだけです。

使い方

まず最初に、Google Chromeで編集したいページを開きます。

検証ツールの起動

起動方法は3つあります。使いやすい方法で起動させて下さい。

1. キーボードの「F12」
2. ショートカットキー「Ctrl+Shift+I」
3. 画面上で右クリックして「検証」

検証ツール画面の見方

CSSの編集では下記の3つを使います。右下の幅やスペースも参考になります。

検証画面の見方

編集したい箇所の選択

変更した箇所のを選択して適用されているCSSを表示させる

他にも、変更したい箇所にカーソルを載せて、右クリックから「検証」ツールを起動させることで、選択した箇所に適用されているCSSを簡単に表示させることができます。また、上手く変更したい箇所を選択できない時は、HTMLソースから選択することもできます。

適用されている要素名とスタイルシートの確認

ここで表示されるCSSの要素は、上から優先度が高い順に並んでいます。スタイルを変更する際は、できるだけ上に表示されている要素を編集するのが基本です。

打ち消し線で消されているものは、スタイルの上書き等によって適用されていないスタイルです。

適用されている要素名とスタイルシートの確認

スタイルシートのファイル名をクリックすれば、スタイルシートを表示させることもできます。

CSSの編集

変更したいスタイルの値をクリックして編集します。

数値を変更すると、WEB画面上でもリアルタイムでスタイルが反映されます（今回は見出しh2の文字の大きさを1.25emから2.25emに変更してみました）。

CSSを編集する

値の変更だけでなく、空白部分をクリックしてスタイルを追加することもできます。

また、各スタイル左に表示されているチェックを外せば、そのスタイルを無効化させることができます（優先度の低かった他のスタイルが適用される可能性もある）。

ちなみに、この編集は現在閲覧中の画面でのみ適用されます。実際のCSSファイルが変更されている訳ではありません。再読み込みやページを移動するとリセットされます。

CSSの変更を保存

変更を適用させるには、実際にスタイルシートを編集する必要があります。

スタイルーシートのパスや定義されている場所は、先程紹介した「適用されている要素名とスタイルシートの確認」を参考にして下さい。

WordPressの場合は、変更した箇所をコピーして、子テーマのスタイルシートに記述します。例えば、先程の見出しh2のフォントの大きさの変更なら、下記の様に記述します（変更した箇所のみ）。

上書きされない時は、優先度の低い要素を編集している可能性があります（優先度の高いスタイルに打ち消されている）。どうしても適用されない場合は、「!important」を使います。

親テーマやプラグインのスタイルシートを直接編集する方法もありますが、アップデートの際に初期化されてしまうので、僕は子テーマで上書きする方法をとっています。

最後に

今回紹介したGoogle Chromeの「検証（デベロッパー ツール）」使えば、自サイトのCSS編集だけでなく、他人のサイトのデザインを参考にすることもできます。とにかく便利の一言です。

CSSの編集にはかかせないツールです。