前回の記事「Google Chrome Developer Toolsで要素を確認」の後編みたいな感じですが、今回はDeveloper ToolsでCSSを確認する方法を紹介します。
この記事を見る前に「Google Chrome Developer Toolsで要素を確認」 をご覧いただくと分かりやすいと思います。

Google Chrome Developer Tools

Google Chromeでブログなどを表示したらキーボードの「F12」をクリックするとDeveloper Toolsが表示されます。

前回は①の箇所の説明でしたが、今回は①と②（CSSの箇所)をご覧ください。

要素に使われているCSSコードが簡単に分かる

Developer Toolsを使えば要素に使われているCSSコードが簡単に分かります。
下記画像のように要素をクリックして選択すると、その要素に関係しているCSSコードが表示されます。

これはかなり便利なことです！
それでは赤枠の箇所を拡大して見てみます。

するとCSSコードの一部に取り消し線の入っている箇所があります。
取り消し線のCSSは反映されていない事を教えてくれてます。

CSSコードが増えるとダブってコードを書いていたり、又はコードミスなどを探すのは大変な作業です。
しかしDeveloper Toolsを使えばこのように簡単に確認できます。本当に便利！！！

CSSコードが含まれている箇所を確認する

それではもっとCSSコードの箇所を見てみましょう。
各コードの横に●●.cssと記述してあります。これはCSSコードのアドレスになります。

CSSは一箇所だけに記述してあるわけではありません。幾つかのスタイルシート(CSSのファイル)に記述してあって、それを探すことも大変なんですが、Developer Toolsだと簡単に確認でます。

それではアドレスをクリックしてみます。すると下記図のような感じで表示されます。

それでは元に戻します。元に戻すには、Developer Toolsで上部にあるElementsをクリックすると元の画面に戻ります。

このようにDeveloper ToolsはCSSコードを探したり確認したりする時にもかなり便利に使えるツールなので、カスタマイズをされるなら是非使っておきたいツールです。

最終更新日: 2013年3月8日