ブラウザの開発ツールでCSSを確認する方法

サイトをカスタマイズする時にはCSSの調整は必須です。１からのサイト制作であれば問題ありませんが、既存のテンプレートを調整する時には、どのようなCSSでスタイルが適用されているか確認する必要があります。その時には、ブラウザで用意されている開発ツールを使います。

開発ツールの表示方法

開発ツールは各ブラウザで利用方法が異なります。また、開発ツールには様々な利用用途がありますが、今回は各エレメントのCSSを確認するために利用するものとします。

Goole Chromeの開発ツール

Goole Chromeの開発ツールを利用するには、メニューバー > 表示 > 開発/管理 > デベロッパーツールをクリックしてください。

クリックすると開発ツールが表示されます。

開発ツールには複数のタブが表示されていますが、ソースコードやCSSを確認するためには、Elementというタブをクリックします。

Firefoxの開発ツール

Firefoxの開発ツールを利用するには、メニューバー > ツール > ウェブ開発 > 開発ツールを表示 をクリックしてください。

Safariの開発ツール

Safariの開発ツールを利用するには、メニューバー > 開発 > Webインスペクタを表示をクリックしてください。

Internet Exproler（IE）の開発ツール

IEでは、F12キーを押下することで開発ツールを表示することができます。

開発ツールで要素を調査する方法

Google Chromeを例として紹介しますが、ほとんどの開発ツールで同じように操作することができます。

Diverでは、カスタマイズより基本的な色は変更することが可能ですが、細かい箇所に関してはCSSで調整する必要があります。
例えば、下記のような検索ボタンの色に関して、

検索ボタンはCSSで青色に指定されていますが、この色がサイトに合わないから変更したい場合には、開発ツールで要素のCSSを確認しましょう。

要素検証ボタンを押します。そのまま調べたい要素をクリックするとその要素のソースコードやスタイルが表示されます。

下記のようなスタイルが確認出来ました。
ボタンに適用されているす

input[type="submit"].searchsubmit {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 45px;
    padding: 0;
    background: url(images/search_w.png) no-repeat 50% 50%;
    background-size: 17px;
    background-color: #3c74ad;
    border-left: none;
    border-radius: 0 3px 3px 0;
}

色を変えたいだけので、必要なCSSのみを確認します。

input[type="submit"].searchsubmit {
    background-color: #3c74ad;
}

追加CSS、子テーマのstyle.cssもしくはカスタムCSSにてスタイルを上書きすることが出来ます。

CSSを上書きする時の注意点

全てのスタイルはCSSで変更することができますが、それが最善の方法ではない場合もあります。
ヘッダーの色を変えたい時に、要素を調査すると、下記のようなCSSを確認することが出来ます。

各スタイルの右上に、記述されているファイル名が記されています。

このCSSは親テーマのstyle.cssに記述されているので、子テーマのstyle.cssやカスタマイズ > 追加CSSから上書きすることができます。

このスタイルは、ファイル名が表示されずにドメインと行番号が表示されています。
だからこれはスタイルシートで記述されたものではなく、カスタマイズで出力されているものだということが分かりますので、子テーマのstyle.cssやカスタマイズ > 追加CSSから上書きすることができません。
今回の場合には、背景色と文字色のみがカスタマイズで出力されているので、カスタマイズ > 基本カラー から調整することができます。