[CSS]簡単で便利!ページで使用されていないCSSのセレクタを見つける無料ツール -Unused CSS

指定したWebサイトで、使用されていないCSSのセレクタを自動で検出する無料オンラインツールを紹介します。
ページ内部のリンクも再帰的に調査し、複数のページにも対応しています。

サイトのキャプチャ

Unused CSS finder

Unused CSS finderの特徴

Unused CSS finderは指定したWebサイトの内部リンクを再帰的に調査し、複数のページで使用されていないCSSのセレクタを一覧表示するオンラインツールです。

  • Webページで使用されていないCSSのセレクタを一覧表示。
  • 内部リンクを自動解析し、配下ページも解析(現在ベータ版で100ページまで)。
  • 解析するCSSは最初に指定したWebページで読み込まれているCSSのみ。
  • 配下ページのみのCSSは、対象外。
  • 擬似クラス(:hover, :focusなど)は未使用か判定できないため、対象外。

現在はベータ版で公開されており、需要があれば開発を続ける、とのことです。

Unused CSS finderの使い方

使い方は、簡単です。
サイトにアクセスし、ルートのURLを入力します。

サイトのキャプチャ

Unused CSS finder

リンクされているすべてのCSSファイルとインラインスタイルにあるスタイルシートを抽出し、未使用のセレクタを見つけるためにページを解析します。さらに、すべての内部リンクを見つけ、ページの解析を繰り返します。

ということで、まずはGoogleのトップページで試してみました。

サイトのキャプチャ

https://www.google.co.jp/を解析

解析時間は、割とすぐに完了しました。
シンプルなページながら、使用されていないCSSのセレクタがけっこうありました。

サイトのキャプチャ

Googleの解析結果

当ブログでも試してみました。

サイトのキャプチャ

当ブログの解析結果

ユーティリティのセレクタは仕方ないとしても、プラグインの未使用セレクタがたくさんあり、これはどうにかしないと、と思いました。

sponsors

top of page

©2018 coliss