🗜️ CSSミニファイヤー

概要

このCSSミニファイヤーはトークン化方式を使ってエッジケースを正確に処理し、完全にブラウザ内で動作します。1行コメント(//)と複数行コメント(/* */)を削除し、連続する空白を1つにまとめるか、{ } : ; , > などの記号周辺の空白を除去します。クォートで囲まれた文字列やurl()の値はそのまま保持されるため、データURIやフォント名の中の空白が壊れることはありません。完全なASTパーサーではなく基本的なトークナイザーなので、高速で依存関係もなく、手書きやプリプロセッサで生成されたほとんどのCSSに対応します。元のサイズ・圧縮後のサイズ・削減バイト数を表示します。

使い方

1. 左側の入力エリアにCSSを貼り付けてください。
2. 「Minify」をクリックするとCSSがトークン化され、右側に圧縮結果が表示されます。
3. サイズ概要を確認して、元のサイズ・圧縮後のサイズ・削減バイト数を確認してください。
4. 「コピー」で圧縮されたCSSをクリップボードにコピーするか、「ダウンロード」で.cssファイルとして保存してください。

よくある質問

このツールはサーバーでCSSを処理しますか？

いいえ。圧縮はJavaScriptを使ってブラウザ内のみで実行されます。CSSがどこかに送信されることはありません。

圧縮によってCSSが壊れることはありますか？

トークナイザーがクォート文字列とurl()の値を保護するため、有効なCSSはそのまま維持されます。ただし、完全なASTパーサーではないため、非標準構文の珍しいエッジケースは完全に処理されない場合があります。

1行コメント(//)も削除されますか？

はい。//の1行コメントと/* */の複数行コメントの両方が削除されます。//はCSS仕様の正式な一部ではありませんが、プリプロセッサのソースファイルでよく使われます。

CSSはどれくらい小さくなりますか？

一般的な手書きCSSは20〜40%ほど小さくなります。コメントや空白が多いファイルはより多く削減されます。最大の圧縮効果を得るには、サーバー側でgzipまたはBrotliと組み合わせてください。

変数(var())やcalc()式を含むCSSも圧縮できますか？

はい。カスタムプロパティ(--var)、var()、calc()、その他のモダンなCSS関数は通常のトークン値として扱われ、安全に処理されます。