未使用で不要なCSSのルールを削除するために確認する方法

余計なスタイルシートのルールは削除したい

WEBサイトを複製して制作した際に、過去の不要なCSSが残骸として残ってしまいますが、どれを残して、どれを削除すればよいか分からなくなり、そのまま残してしまうことがあります。使用しないルールをそのまま溜め込むと、ファイル容量が大きくなるので、どうにか簡単にお掃除できないかな？と探してみると、方法が見つかったのでメモ。

ブラウザのデベロッパーツールを使う方法

詳しい方法は以下のサイトが参考になります。

Link

Cssで未使用のセレクタを見つけて削除しちゃうよ！不要な記述をなくしてファイルサイズを減らそう | リノベーター

https://thesaibase.com/unused-css/

Chromeの場合

ChromeのデベロッパーツールF12を開き、[]-[more tool]-[Coverrage]から使用されていないルールを確認できます。

Edgeの場合

Edgeでも同様に開発者ツールF12を開き、[]-[そのツール]-[カバレッジ]から確認することができます。

ここで不要なルールがわかったとしても、手動で削除いしていくしかなさそうです。必要なルールだけを書き出す方法は見当たりませんでした。（やり方があるのかもしれませんが、わかりませんでした。）

その他のツールは？

もっと簡単にDreamweaverの「HTMLのクリーンアップ」みたいに、Dreamweaver上でできないかな？と探してみましたが、見当たりませんでした。