CSS 圧縮ツール（CSS Minifier）
スタイルシートを貼り付けると、空白とコメントを削除し、#ff0000 → red のように値を短縮、CSSO の構造最適化で重複ルールを統合します。
ブラウザ内で動作登録不要アップロードなし
圧縮結果
CSS 圧縮ツールの使い方
- CSS を貼り付けるか、
.cssファイルを開きます。 - ルールや宣言を統合するには再構成をオンのままに。空白の削除だけの安全な処理にしたい場合はオフにします。
- ライセンスコメントを残すをオンのままにすると、
/*! … */の表記が保持されます。 - 元のサイズ、圧縮後、gzip 後のサイズを比較します。
- 結果をコピーするか、
output.min.cssをダウンロードします。
CSS 圧縮の仕組み
このツールは CSSO（CSS Optimizer）を使います。スタイルシートを構文木に解析し、等価な最短の形で出力し直します。空白やコメントの削除に加えて、安全な値の書き換えも行います。
#ffffff→#fff、#ff0000→red0px→0、0.90→.9margin: 8px 16px 8px 16px→margin:8px 16px- 空のルールと重複した宣言を削除
「再構成」とは？
再構成はスタイルシート全体を見渡し、同じ宣言を持つルールを 1 つのセレクターリストにまとめ（.a,.b{color:red}）、繰り返し出てくるセレクターを結合します。実際のスタイルシートでは、これでさらに 5〜15% 削減できることがよくあります。CSSO はカスケードの順序が変わらない場合にのみ統合しますが、特殊な上書きに依存している場合はオフにして、純粋に構文上の圧縮だけにすることもできます。
なぜ CSS を圧縮するのか？
CSS はレンダリングをブロックします。<head> 内のスタイルシートがダウンロード・解析されるまで、ブラウザはページを描画できません。CSS が小さいほど First Contentful Paint が速くなり、Core Web Vitals も改善するため、ユーザー体験と検索順位の両方に役立ちます。最良の結果を得るには、サーバー側の gzip や Brotli と組み合わせてください。
よくある質問
CSS を圧縮しても安全ですか？
はい。空白やコメントは CSS の表示に影響せず、CSSO による値の書き換えは仕様上等価です。再構成もカスケードの順序を保ちます。最も保守的な出力にしたい場合は再構成を無効にしてください。
カスタムプロパティ、ネスト、@layer などのモダンな CSS に対応していますか？
はい。カスタムプロパティ（
--var）、@media、@supports、@layer、@container、グリッドの構文はそのまま保持されます。圧縮した CSS を後で元に戻せますか？
圧縮した CSS はどのフォーマッターでもインデントし直せますが、削除したコメントは復元できません。元のソースファイルは保管し、圧縮ファイルはビルド成果物として扱ってください。
スタイルシートはどこかにアップロードされますか？
いいえ。圧縮はブラウザ内で行われ、サーバーには何も送信されません。