Google Chromeの「検証(デベロッパー ツール)」を使えば、CSSの編集が凄く楽になります。
余白を広げたい。文字を大きさを変更したい。背景を変更したい。文字の色を変更したい。そんな時このツールを使えば、WEB画面で変更を確認しながらCSSを編集することができます。
もちろん無料です。必要なのはブラウザGoogle Chromeだけです。
Contents
使い方
まず最初に、Google Chromeで編集したいページを開きます。
検証ツールの起動
起動方法は3つあります。使いやすい方法で起動させて下さい。
- キーボードの「F12」
- ショートカットキー「Ctrl+Shift+I」
- 画面上で右クリックして「検証」
検証ツール画面の見方
CSSの編集では下記の3つを使います。右下の幅やスペースも参考になります。

検証画面の見方
編集したい箇所の選択
- ツール画面上部の「カーソルアイコン」をクリック
- 編集したい箇所をクリック
- 選択した箇所に適用されているCSSが表示される

変更した箇所のを選択して適用されているCSSを表示させる
他にも、変更したい箇所にカーソルを載せて、右クリックから「検証」ツールを起動させることで、選択した箇所に適用されているCSSを簡単に表示させることができます。また、上手く変更したい箇所を選択できない時は、HTMLソースから選択することもできます。
適用されている要素名とスタイルシートの確認
ここで表示されるCSSの要素は、上から優先度が高い順に並んでいます。スタイルを変更する際は、できるだけ上に表示されている要素を編集するのが基本です。
打ち消し線で消されているものは、スタイルの上書き等によって適用されていないスタイルです。

適用されている要素名とスタイルシートの確認
スタイルシートのファイル名をクリックすれば、スタイルシートを表示させることもできます。
CSSの編集
変更したいスタイルの値をクリックして編集します。
数値を変更すると、WEB画面上でもリアルタイムでスタイルが反映されます(今回は見出しh2の文字の大きさを1.25emから2.25emに変更してみました)。

CSSを編集する
値の変更だけでなく、空白部分をクリックしてスタイルを追加することもできます。
また、各スタイル左に表示されているチェックを外せば、そのスタイルを無効化させることができます(優先度の低かった他のスタイルが適用される可能性もある)。
ちなみに、この編集は現在閲覧中の画面でのみ適用されます。実際のCSSファイルが変更されている訳ではありません。再読み込みやページを移動するとリセットされます。
CSSの変更を保存
変更を適用させるには、実際にスタイルシートを編集する必要があります。
スタイルーシートのパスや定義されている場所は、先程紹介した「適用されている要素名とスタイルシートの確認」を参考にして下さい。
WordPressの場合は、変更した箇所をコピーして、子テーマのスタイルシートに記述します。例えば、先程の見出しh2のフォントの大きさの変更なら、下記の様に記述します(変更した箇所のみ)。
1 2 3 |
.entry-content h2 { font-size: 2.25em; } |
上書きされない時は、優先度の低い要素を編集している可能性があります(優先度の高いスタイルに打ち消されている)。どうしても適用されない場合は、「!important」を使います。
1 2 3 |
.entry-content h2 { font-size: 2.25em!important; } |
親テーマやプラグインのスタイルシートを直接編集する方法もありますが、アップデートの際に初期化されてしまうので、僕は子テーマで上書きする方法をとっています。
最後に
今回紹介したGoogle Chromeの「検証(デベロッパー ツール)」使えば、自サイトのCSS編集だけでなく、他人のサイトのデザインを参考にすることもできます。とにかく便利の一言です。
CSSの編集にはかかせないツールです。
最近のコメント