便利な無料ツールが登場！ Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる -CSS Analyzer

1クリックで、Webサイトで使用しているCSSや自分が書いたCSSを詳細に解析してくれる無料ツールを紹介します。

CSSの検証としておかしなスタイル定義・同じスタイル定義・一貫性のないスタイル定義などを見つけたり、スタイルガイドの作成にも役立ちます。

CSS Analyzer
CSS Analyzer -GitHub

CSS AnalyzerはWallace CLI, constyble, color-sorterなどの便利ツールをリリースしているProject WallaceのCSS解析ツールです。MITライセンスで、商用プロジェクトでも無料で利用できます。

Webサイトで使用しているCSSファイルや自分が書いたCSSのコードを詳細に解析してくれます。オンラインツールとして簡単に利用でき、GitHubでソースが公開されているので、ローカル環境でも利用できます。

さっそくオンライン版で試してみました。

Online CSS Analyzer

当ブログのCSSファイルを解析しました。
「URL to analyze」に「https://coliss.com/」を入力して、「Analyze URL」をクリックします。CSSのコードを解析する場合は、「Direct CSS Input」にコピペします。

解析したCSSのサマリー

サマリーでは、CSSの行数・ファイルサイズ・ルール数・セレクタ数・宣言の数などがざっと分かります。

セレクタの解析

たとえばセレクタだとどんな感じに使用しているのか詳細な情報が分かります。

詳細度の解析

使用している詳細度でもっとも多いもの、少ないもの、最大値、最小値、平均値なども分かります。

@ルールの解析

「At-rules」では@ルールの解析です。@media, @supports, @keyframesなどがどのように使用されているか分かります。@containerのコンテナクエリも用意されています。

参考:

• CSS コンテナクエリの基礎知識と便利な使い方を解説

値の解析

「Values」では、カラーの定義、フォントファミリーの定義、フォントサイズの定義、テキストシャドウ・ボックスシャドウの定義が解析されます。px, em, rem, degなど、使用しているCSSの単位も分かります。

プロパティごとの単位の使用状況

各プロパティごとにどの単位をどのくらい使用しているのかも分かります。

カラーの解析

デフォルトでは、CSSで検出された順序でカラーが並びますが、さまざまな条件で並べ替えることもできます。幅の広いバーは、カラーがより頻繁に使用されていることを意味します。

フォントの解析

フォントでは、フォントのサイズ・フォントファミリーが解析されます。CSSで設定した記述で実際に表示されるサイズも一覧できるので、便利です。

フォントファミリー

指定したフォントファミリーがどのように使用されているが解析されます。

ボックスシャドウ

ボックスシャドウのCSSとそれがどのように表示されるかも一覧できます。