CSS圧縮ツールとは？

CSS Minifier は空白・コメント・冗長な構文を除去して CSS コードを圧縮します。ファイルが小さくなるほどダウンロードは速くなり、PageSpeed スコアも上がります。

内部では CSSO アルゴリズムを使っており、空白の削除にとどまりません。同じセレクタの隣接ルールを統合し、ショートハンドの冗長表記(margin: 10px 10px 10px 10px は margin: 10px に)を整理し、もう不要なベンダープレフィックスを取り除き、6 桁の HEX 色を可能なら 3 桁に短縮します。

使い方

1. 入力エリアにCSSコードを貼り付けるか、.cssファイルをアップロードするか、URLから直接スタイルシートを読み込みます。
2. 「圧縮」をクリックすると、コメント・空白の除去や値の短縮が自動で行われます。
3. 圧縮されたCSSをコピーするか、.cssファイルとしてダウンロードできます。圧縮率も表示されます。

使用するタイミング

• ビルド工程のない静的サイトで本番用スタイルシートを出力する。
• 2 つのバージョンの CSS を比較し、手書きの中にどれだけ冗長があるか可視化する。
• 重要 CSS を HTML の head にインラインする際に最後のバイトを削る。

結果

コメントやインデントを含む24KBのスタイルシートが16KBに圧縮され、33%の削減を実現。3G回線では読み込み時間が約50ms短縮されます。

よくある質問

圧縮後の CSS は元のものと表示が変わりますか?

ブラウザは圧縮版もフォーマット版も同じように解釈します。カスケード、優先度、計算後のスタイルはすべて同一です。違うのは、ディスク上と通信時のファイルサイズだけです。

圧縮の上に gzip もかけるべき?

かけてください。圧縮の上に gzip でさらに 60-80% 減らせます。多くの CDN は自動で gzip を適用します。先に圧縮しておくと、gzip が繰り返しパターンを圧縮するときにより効きます。

圧縮でソースマップが壊れますか?

このツールは単一の CSS 文字列を扱うのでソースマップは生成しません。マップが必要な場合は、esbuild や Vite のようなビルドツールを使えば圧縮 CSS と一緒に .css.map が出力されます。

圧縮ファイルに空白が残っているのはなぜ?

CSS は文字列値の内側、セレクタ部分のあいだ(.a .b と .a.b は別物)、calc() 式の内側など、意味のある空白を保持します。意味的に不要な空白だけ取り除き、それ以外はそのまま残ります。

カスタムプロパティ(CSS 変数)を使う CSS を圧縮しても安全ですか?

安全です。カスタムプロパティの名前と値はそのまま保たれ、周辺の書式だけが詰められます。--brand-color のような変数は書いた通りに残り、var() からそのまま利用できます。

関連ツール