CSS の未使用クラス候補の棚卸し
貼った CSS のクラスを棚卸しして、使われていない候補と画面幅の切れ目を一覧にする。
CSS と HTML を貼り付けると、CSS に書かれたクラスセレクタを数え、HTML の class 属性に出てこない「未使用の候補」と、@media の min-width・max-width の幅の条件を一覧にします。スクリプトで付くクラスは判定できないため結果は候補です。貼り付けた内容は端末の外へ送信しません。
CSS と HTML を貼り付けて棚卸しする
入力した内容は送信されません。貼り付けた文字や選んだファイルは、お使いのブラウザの中だけで処理します。本サイトのサーバーや第三者へ送信・保存しません(通信を禁止する設定でページを配信しています)。
結果
エラー 0 件・警告 1 件・情報 0 件
指摘(エラー・警告・情報)
- 警告 CSS .unused は貼り付けた HTML の class 属性に見つかりません。スクリプトで付くクラスや別のページで使うクラスなら未使用ではありません。
| CSS のクラス | 4 種類 |
|---|---|
| 未使用の候補 | 1 種類 |
| media の幅の条件 | 0 種類 |
クラスと幅の一覧
| 種類 | 名前・条件 | CSS での出現 | 状態 |
|---|---|---|---|
| クラス | .btn | CSS に 1 回 | HTML で 1 回使用 |
| クラス | .card | CSS に 1 回 | HTML で 1 回使用 |
| クラス | .title | CSS に 1 回 | HTML で 1 回使用 |
| クラス | .unused | CSS に 1 回 | 未使用の候補 |
初期表示は入力例「4 つのクラスのうち 1 つが未使用」の結果です。入力を変えるとその場で処理し直します。判定の根拠は仕様と根拠にまとめています。
ご利用にあたって
- 結果は候補です。削除する前に、ビルド後の全ページとスクリプトで使われていないことを確認してください。
- クラスの細かい一致規則は単純な文字列比較で近似しています。
使い方
- CSS の中身を貼り付けます。ファイルが複数あるときは続けて貼り付けます。
- そのスタイルを使うページの HTML も貼り付けます。空のままなら、クラスの一覧と幅の条件だけを出します。
- 「未使用の候補」の行は、スクリプトで付くクラスや別のページで使うクラスではないかを確かめてから消します。
入力例と結果
代表的な入力・境界の入力・壊れた入力の例です。例ごとに入力・出力・指摘と、その結果になる理由(検算)を載せています。
| 入力例 | 結果 |
|---|---|
| 4 つのクラスのうち 1 つが未使用 | エラー 0 件・警告 1 件・情報 0 件 |
| media の幅の条件が 3 つある CSS | エラー 0 件・警告 0 件・情報 0 件 |
| HTML にだけあるクラス | エラー 0 件・警告 0 件・情報 1 件 |
| コメントの中のクラスは数えない | エラー 0 件・警告 0 件・情報 0 件 |
| CSS が空の入力 | エラー 1 件・警告 0 件・情報 0 件 |
このツールでできないこと(制約)
- スクリプトで後から付けるクラス(classList の追加など)や、別のページだけで使うクラスは判定できません。「未使用の候補」は削除してよいという意味ではありません。
- クラス名のエスケープ(.sm\:flex のような書き方)、属性セレクタ [class~=x]、CSS の入れ子の展開には対応していません。
- HTML の class 属性との細かい一致規則(ページのモードによる大小の扱いなど)は、このツールでは区別せず、大文字小文字を区別する単純な比較にしています。
- CSS を書き換えたり、不要な部分を自動で削除したりはしません。一覧を見て自分で判断してください。
よくある質問
未使用の候補は消してよいですか?
そのままでは判断できません。貼り付けた HTML に出てこないだけで、スクリプトが付けるクラスや、貼っていない別のページで使われている場合があります。消す前に検索して確かめてください。
ブレークポイントはどの条件を拾いますか?
@media の中の (min-width: …) と (max-width: …) で、単位が px・em・rem のものです。「min-width:48em」と「min-width: 48em」のような書き方の違いは同じ条件として 1 つにまとめます。
貼り付けた CSS や HTML は送信されますか?
送信されません。棚卸しはお使いの端末のブラウザの中だけで行い、このページは通信を禁止する設定で配信されています。