日本語English

CSS 解析（CSS Studio）

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

端末内で処理・アップロードなしスマホ対応オフライン対応

ファイルや入力内容はお使いの端末（ブラウザ）の中だけで処理され、サーバーへは送信されません。

CSS

CSS ファイルをドロップ

.css・.txt。5 MB まで。対応形式: CSS / TXT1 ファイル最大 5 MB貼り付け（Ctrl+V）にも対応

貼り付けるか、ファイルを入れてください。

結果

解析結果はここに表示されます。CSS を入力して「解析する」を押してください。

単体の詳細度を計算

例: ul li.red, #main > a:not(.skip)

セレクターを入力すると、ここに結果が出ます。

使い方

  1. 左の入力欄に CSS を貼るか、「ファイルを選択」で .css ファイルを入れます（ドラッグ＆ドロップも可）。

  2. 「解析する」を押します（サンプルで試すこともできます）。Ctrl キー（Mac は ⌘）＋ Enter でも実行できます。

  3. 「概要」で規則・セレクター・宣言の数と @media などの一覧を確認します。「詳細度」では上位のセレクターと分布を、単体の計算欄では任意のセレクターの (a,b,c) を確かめられます。

  4. 「変数」で定義と使用を照合し、「色」で使われている色を表記の違いをまとめて確認します。

  5. 「問題」で !important、重複、空のルール、ベンダープレフィックスだけの宣言、構文エラーの候補を場所（行）つきで見ます。

できること

字句解析から自前で読む

コメント・文字列・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、同じセレクターの重複、同じ宣言の重複、空のルール、ベンダープレフィックスだけの宣言、閉じ括弧の不足を行番号つきで示します。誤りとは断定せず、確認の手がかりとして使えます。

こんなときに

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

対応状況

機能対応補足
ルール・セレクター・宣言の数え上げ対応ネストした規則を含む
@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 で行い、通信はしません。貼り付けた内容やファイル名を記録することもありません。

コード整形・圧縮（Code Formatter）

コードを貼り付けるだけで、言語を自動判定して整形できます。インデント・1 行の幅・セミコロン・引用符・末尾カンマを選べ、JavaScript・CSS・HTML は圧縮前後のサイズと削減率も表示。入力は端末の外へ出ません。

アップロードなし

カラー変換・コントラスト・パレット（Color Studio）

色を 1 つ入力するだけで、HEX・RGB・HSL・HWB・OKLCH・CMYK（概算）へ即時変換。背景色との WCAG コントラスト比を AA/AAA で判定し、補色・トライアドなどの配色や 50〜950 の OKLCH スケールを作って、CSS 変数や Tailwind 設定として書き出せます。色はこの端末の外へ送信されません。

アップロードなし

Font Viewer・比較・収録文字確認

フォントのファイルをドロップすると、名前・グリフ数・収録文字（JIS 水準・常用漢字などの収録率）を調べ、好きな文字列でプレビューできます。複数のフォントの比較や、WOFF2・WOFF への変換、指定した文字だけのサブセットも可能です。すべてブラウザ内で処理し、フォントは送信されません。

アップロードなし

HTML 構造・見出し・画像・リンク診断

ページの HTML を貼り付けるだけで、SEO とアクセシビリティの基本項目（見出し構成・メタタグ・OGP・画像の alt・リンク・構造化データ）を一覧で確認できます。検索結果と SNS でのおおよその見え方もプレビューします。

アップロードなし

robots.txt テスター

robots.txt を貼り付けると、指定した URL が Googlebot や AI クローラーに「許可」か「ブロック」かと、どの行のルールが効いたかがすぐ分かります。つづりの誤りや Google が無視する命令も指摘します。

アップロードなし

サイトマップ作成・診断

URL の一覧を貼り付けるだけで、正しく書かれた sitemap.xml を作成します。既存のサイトマップを貼り付ければ、Google に読み込まれない原因になるエラーを行番号付きで指摘します。

アップロードなし

最終更新: