ブラウザだけで動く  ·  インストール不要  ·  ファイルはローカル処理

CSSの未使用クラス
ワンクリックで発見。

HTMLをドロップするだけで、定義・参照・未使用クラスがファイル横断で一目でわかる。
地道なgrep作業を、ゼロにする開発者ツール。

インストール不要
完全ローカル処理
7言語対応
買い切り ¥500
CodeLens — styles.css
FILES
index.html
styles.css
app.js
User.php
IDENTIFIERS
.cls btn-primary ×3
.cls hero-section ×2
#id main-header ×1
fn() openModal ×4
46/* Normal selector */
47.btn-primary {
48  background: var(--color-primary);
49  color: #fff;
50}
51
52/* ⚠️ UNUSED — HTMLで未使用 */
53.btn-secondary {
54  background: #81C784;
55}
56
57/* ⚠️ UNUSED — 廃止済みレイアウト */
58.hero-subtitle { font-size: 16px; }
未使用クラス 4
.cls btn-secondary
.cls hero-subtitle
.cls loading-spinner
#id old-modal
7
対応言語
ファイル数制限なし
30秒
で解析完了
¥500
完全買い切り
こんな経験、ありませんか?

規模が大きくなるほど
コード管理が地獄になる

CSSが肥大化し、どこで何が使われているか把握できなくなる。
そのストレス、CodeLensが解決します。

「このクラス、どこで使ってたっけ?」
ファイルをひとつずつ grep して探す時間が、じわじわとストレスになる。
CSSが肥大化し続けている
使われていないクラスが積み重なって、ファイルサイズが膨らむ一方。どれを消せばいいかわからない。
リファクタリングが怖い
クラス名を変えたら何が壊れるか不明。影響範囲を確認する手段がない。
引き継ぎ・コードレビューがつらい
他人のコードを読む前に、構造把握だけで膨大な時間を消費してしまう。
😩 Before — CodeLensなし
  • エディタで手動 grep を繰り返す
  • 未使用クラスが何個あるか不明
  • クラスを消してもいいか確信が持てない
  • ファイル間の依存関係が頭の中でしか分からない
✨ After — CodeLensあり
  • クリックひとつで全参照を一覧表示
  • 未使用クラスを即座に一覧化・削除
  • 影響範囲が視覚的に確認でき安心してリファクタリング
  • 依存グラフでファイル間の繋がりを可視化
機能

すべての問題を
一発で解決する機能

ファイルをドロップするだけ。コードの全体像が瞬時に見えてくる。

01   横断参照

クラス名ひとつで
全ファイルの使用箇所を特定

HTML・CSS・JS・PHP・Java・Sassを一括解析。.btn-primary をクリックするだけで、定義ファイルと全参照が一覧表示。grep 作業から永遠に解放されます。

  • class / id / 変数 / 関数を横断追跡
  • 定義・参照・セレクターをロール別に分類表示
  • ファイル跨ぎの参照数をバッジ表示
References — .btn-primary 5 refs
DEFINE — styles.css
L12  .btn-primary { background: #4FC3F7; … }
USE — index.html 3 refs
L37  class="btn btn-primary"
L58  class="btn btn-primary btn-block"
L86  …
USE — app.js
L24  classList.add('btn-primary')
02   キラー機能

未使用CSSを
ワンクリックで一覧表示

CSSに定義されているがHTMLやJSで一度も使われていないクラス・IDを自動検出。肥大化したスタイルシートの整理が劇的に楽になります。

  • 未使用クラスを一覧表示・クリックでコードジャンプ
  • 定義行をオレンジでハイライト表示
  • クラス名を一括コピー(削除作業に即活用)
未使用クラス — 4件検出
.cls btn-secondary L53 未使用
.cls hero-subtitle L62
.cls loading-spinner L127
#id old-modal L149
4件のクラス名をコピー
03   依存グラフ

ファイル間の繋がりを
ノードグラフで可視化

どのファイルがどの識別子を共有しているかをインタラクティブなグラフで確認。ノードをクリックするとファイルを開けます。

  • Force / Tree / Circle レイアウト切り替え
  • クラス・ID・変数ごとにフィルター表示
  • 依存関係を PNG でエクスポート
Dependency Graph
.cls fn() .html index .css styles .js app .php User
ドロップ一発でロード
ファイルもフォルダごとも対応。既存プロジェクトへの追加も可能。プロジェクトを丸ごとドロップして即解析。
CSV / JSON エクスポート
解析結果を CSV・JSON・Markdown で出力。ドキュメント化や共有に。
プロジェクト保存・復元
IndexedDB に自動保存。次回起動時に前回のプロジェクトをワンクリックで復元。
URL から直接解析強化
サイトの URL を入力するだけで HTML + 外部CSS/JS を自動取得。最大50ファイルまで一括解析。
プロジェクトを簡単リセット
New ボタンで現在のプロジェクトをクリア。新しいファイルの読み込みが一瞬で完了。
VS Code 風メニュー
File・View・Analyze・Help の各メニューから全機能にアクセス。直感的な操作性。
ダーク / ライトテーマ
VS Code 風ダークテーマ標準搭載。ライトテーマへの切り替えも可能。
統計ダッシュボード
クラス・ID・変数・関数の分布をカード形式で表示。規模感を即把握。
7言語対応

フロントエンドからバックエンドまで

HTML/CSS の解析はもちろん、JS・TS・PHP・Java・Sass まで横断的に追跡。

HTML CSS JavaScript TypeScript PHP Java Sass / SCSS
使い方

使い方はたった3ステップ

インストール不要。ブラウザを開いて、ファイルをドロップするだけ。

1
ファイルをドロップ
HTML・CSS・JS などをサイドバーにドラッグ&ドロップ。フォルダごとの一括読み込みも対応。
2
自動解析・可視化
全ファイルを即座に解析。識別子の一覧・参照マップ・未使用クラスが自動生成。
3
クリックで深掘り
気になるクラス名をクリック。定義ファイルにジャンプし、全参照を一覧確認できます。
デモで試してみる — 無料

クレジットカード不要  ·  アカウント登録不要

価格

シンプルな買い切り価格

サブスクなし。一度購入すれば、ずっと使える。

Free
¥ 0

まずデモで全機能を体験できます。

  • デモファイルで全機能を体験
  • 未使用クラス検出
  • 依存グラフ表示
  • プロジェクト保存
  • CSV / JSON エクスポート
  • フォルダ一括ドロップ
無料デモを試す
おすすめ
Standard
¥ 500 買い切り

個人開発・フリーランス・学習用に最適。

  • ファイル数無制限
  • 未使用クラス一括表示
  • 依存グラフ(PNG 書き出し)
  • プロジェクト保存・復元
  • CSV / JSON / Markdown エクスポート
  • フォルダ一括ドロップ
  • URL から解析
¥500 で始める →
機能追加で価格改定予定。購入者は永続アップデート無料

※ 購入前にデモ版で全機能をお試しいただけます。

FAQ

よくある質問

不要です。ブラウザだけで動きます。Chrome・Safari・Firefox・Edge に対応しています。アカウント登録も不要です。
いいえ。すべての解析はブラウザ内(ローカル)で完結します。ファイルの中身が外部に送信されることはありません。機密コードも安心してご利用いただけます。
HTML・CSS・JS・TS・JSX・TSX・PHP・Java・Sass・SCSS に対応しています。フロントエンドからバックエンドまで幅広くカバーしています。
ファイル数に制限はありません。ただし数百ファイルを超える大規模プロジェクトでは解析に数秒かかる場合があります。
機能追加に伴い将来的に価格改定を予定しています。現在 ¥500 で購入した方は、追加費用なしで今後のアップデートを利用できます。早めの購入がお得です。
購入前にデモ版で全機能をお試しいただけます。十分にご確認の上ご購入ください。デジタルコンテンツの性質上、購入後の返金は原則対応しておりません。
今すぐ始めよう
コードを見通す力を、
あなたに。

HTML をドロップしてから 30秒 で解析完了。
未使用クラスが見つかった瞬間、手放せなくなります。

インストール不要  ·  ファイルはローカル処理  ·  サブスクなし