便利 ！ 使われていないCSSの記述を見つけ出す方法（Google chrome使用）

2016年12月12日

コーディング作業で、主に元々の制作者がだれか分からないような運用案件でよくあるかと思うのですが、「あれ？このcssの記述いらなくない？」ということってありますよね。

そんな時に、Google chromeを使って、サイト内で使われていないcssを簡単に見つけ出す方法があるのでご紹介します。

コーディング経験者なら普段から使っているであろう、デベロッパーツールの要素の検証で確認することができるので、その使い方を下記に記載します。

不要なcssの記述があるか調べたい対象サイトをブラウザで開き、要素の検証（ブラウザ上で右クリックをしたらあります）を開きます。

Elements、Console、Sources、、、など出てくるかと思いますが、その中にあるAuditsという項目があるので、それをクリック。

Run、Clearというボタンが出てくるので、Runをクリックする

「Remove unused CSS rules」使われていないcssという項目があるので、その矢印をクリック

cssファイルごとに、使われていない記述のパーセンテージが表示されるので、調べたいcssファイルの矢印をクリック

すると、使われていないcssセレクタが確認できるので、あとは削除していくだけ！

この時に注意しなくてはいけないのは、他のページと共有でcssを使っている場合は、削除したことによって、表示崩れなどの影響が出てしまう可能性があるので要確認して削除するようにする。

これで無事、不要なcssの記述を削除できますね！