使用していないCSSを簡単に探す方法

Developer Toolを使って、使用されていないCSSを検索する方法

kinko25

1 minute read

Developer Toolを使って、使用されていないCSSを検索する方法

使用していないCSSの判別方法

皆さんは、どうやって使っていないCSSを判別しているのだろう?

ググると判別してくれるサービスがあるのは、

よく見かけますね。

今回そのググる手間を省けるツールをご紹介したいと思います。

デベロッパーツールで使ってないCSSを判別

CSS_image

まず、デベロッパーを開いてください。

開いたら、一番右上の「︙」があるので、

そこをクリックして「Search」をクリック。

「Search」タブをクリックしたら

CSS_image

クリックすると画像のように、下の方に「Search」のタブが出てきます。

「Search」タブが表示されていることを確認したら

CSS_image

今度は、「Search」タブがあるとこの左側「︙」をクリック。

メニューが表示されたら「Coverage」をクリック。

「Coverage」をクリックしたら

CSS_image 左側にある「●」を押してください。

押すと、ファイルごとに使われいる割合と使われていない部分の割合を色で出してくれます。

gitの差分みたいに出てくるので、とてもわかりやすいですね。

あとは、このままレスポンシブにしたり、

js系のクリックイベントなども発動させましょう。

最後に

どうでしたでしょうか? 意外と数クリックで調べられるのって便利ですよね?

使う機会があれば、ぜひ使ってみてはいかがでしょうか。

それでは、使用していないCSSの判別方法については、この辺で。

ありがとうございました。