# CSS 解析（CSS Studio）

CSS を貼るかファイルを入れると、詳細度の高いセレクター、定義されているのに使われていない CSS 変数、使われているのに定義がない var()、使われている色、!important・同じ宣言の重複・空のルールを一覧にします。このツールは読むだけで、入力を書き換えません。

- URL: https://tools.itlibra.com/ja/css-studio
- 端末内で処理・アップロードなし
- 最終更新: 2026-10-26

## 使い方

1. 左の入力欄に CSS を貼るか、「ファイルを選択」で .css ファイルを入れます（ドラッグ＆ドロップも可）。
2. 「解析する」を押します（サンプルで試すこともできます）。Ctrl キー（Mac は ⌘）＋ Enter でも実行できます。
3. 「概要」で規則・セレクター・宣言の数と @media などの一覧を確認します。「詳細度」では上位のセレクターと分布を、単体の計算欄では任意のセレクターの (a,b,c) を確かめられます。
4. 「変数」で定義と使用を照合し、「色」で使われている色を表記の違いをまとめて確認します。
5. 「問題」で !important、重複、空のルール、ベンダープレフィックスだけの宣言、構文エラーの候補を場所（行）つきで見ます。

## こんなときに

- !important や同じ宣言の重複が増えていないか確かめたい
- 使われていない CSS 変数を整理したい
- 詳細度が高すぎて上書きしにくいセレクターを見つけたい
- サイトで使われている色の一覧を作りたい
- 閉じ括弧の不足など、壊れた CSS の場所を探したい

## できること

### 字句解析から自前で読む

コメント・文字列・url() をトークンとして正しく飛ばし、規則・@ルール・宣言を分けて数えます（CSS Syntax Level 3 の考え方）。ネストした規則にも対応します。

### 詳細度は Selectors Level 4 に沿って計算

#id は a、.class・\[属性\]・:疑似クラスは b、要素名と ::疑似要素は c に数えます。:is()・:not()・:has() は引数のうち最も強いもの、:where() は 0 として扱います（Selectors Level 4 §17）。

### CSS 変数を定義と使用で照合

--name の定義、var(--name) の使用、fallback（既定値）の有無を一覧にします。定義されているのに使われない変数と、定義のない var() を分けて示します。

### 同じ色の別表記をまとめる

#fff・#ffffff・rgb(255 255 255)・white を同じ色として 1 行にまとめ、回数と元の書き方を見せます。rgba・hsla の透明度も区別します。

### 問題は候補として示す

!important、同じセレクターの重複、同じ宣言の重複、空のルール、ベンダープレフィックスだけの宣言、閉じ括弧の不足を行番号つきで示します。誤りとは断定せず、確認の手がかりとして使えます。


## 対応状況

| 機能 | 対応 | 補足 |
| --- | --- | --- |
| ルール・セレクター・宣言の数え上げ | 対応 | ネストした規則を含む |
| @media・@supports・@layer・@container などの一覧 | 対応 | — |
| セレクターの詳細度 (a,b,c) | 対応 | Selectors Level 4 §17。ネストの & は親の詳細度を含めません |
| CSS 変数（--名前）の定義・使用・fallback | 対応 | この CSS の中だけで照合します |
| 色の一覧（#rgb・rgb()・hsl()・色名） | 対応 | oklch()・lab()・color-mix() などは対象外です |
| CSS の整形・圧縮 | 非対応 | 整形・圧縮は code\_formatter を使ってください |
| @import 先や外部 URL の CSS の取得 | 非対応 | 通信はしません。取り込んだ後の CSS を貼ってください |
| Sass・Less・PostCSS の記法の解析 | 非対応 | コンパイル後の通常の CSS を入力してください |
| CSS 仕様の全規則による構文検査 | 一部対応 | 閉じ括弧・閉じていない文字列・コメントなど主要な誤りだけを候補として示します |
| JavaScript から設定される CSS 変数の判定 | 非対応 | JavaScript 側の setProperty は読めないため、未使用と表示されることがあります |

## 制限・注意事項

- 入力は 5 MB まで（UTF-8）。超えるファイルは読み込みません。
- 詳細度の上位と各問題の一覧は 200 件まで表示します（件数は全件で数えます）。
- 単体の詳細度の計算は 2,000 文字までです。
- 変数の判定は、貼り付けた CSS の中だけで行います。

## プライバシーと安全性

入力した CSS は、このブラウザの中でだけ解析します。外部へ送信せず、ファイル名も記録しません。

## よくある質問

### CSS の詳細度（a,b,c）とは何ですか？

セレクターの強さを 3 つの数で表したものです。a は #id の数、b は .class・\[属性\]・:疑似クラスの数、c は要素名と ::疑似要素の数です。値を比べて大きいほうが優先され、同じ値なら後に書いた規則が優先されます。

### :is()・:where()・:not() は詳細度にどう数えますか？

:is()・:not()・:has() は引数のうち最も詳細度の高いものを数え、:where() は 0 として数えます（Selectors Level 4）。:nth-child(… of S) は S の分を加えます。CSS ネストの & は、親の詳細度を含めずに数えます。

### 未使用の CSS 変数はどう判定しますか？

貼り付けた CSS の中で、定義（--名前:）されていて var(--名前) で一度も参照されていないものを「未使用」とします。JavaScript や別のファイルで使う変数は、この判定では未使用と出ることがあります。

### 色はどの書き方まで数えますか？

#rgb・#rgba・#rrggbb・#rrggbbaa、rgb()・rgba()・hsl()・hsla()、CSS の色名 148 種を数えます。同じ色は #rrggbb にそろえてまとめ、透明度のある色は別の行にします。oklch() や lab() は対象外です。

### CSS は外部に送信されますか？

いいえ。解析はブラウザ内の Web Worker で行い、通信はしません。貼り付けた内容やファイル名を記録することもありません。