CSS ミニファイアー

CSS を圧縮または整形します。コメントと空白を削除します。処理前後のファイルサイズを比較できます。

入力CSS0 B

出力0 B

All processing runs in your browser. Handles comments, whitespace, and basic formatting.

CSSをミニファイする方法

The IT Hustle の無料CSSミニファイアーで、スタイルシートを圧縮・整形し、削減効果を測定しましょう。

1
CSSを貼り付ける入力パネルにスタイルシートを貼り付けます — または「サンプルを読み込む」で試すこともできます。
2
ミニファイまたは整形を選ぶ「ミニファイ」はコメントと不要な空白を削除して本番用にし、「整形」はミニファイ済みのCSSを見やすい2スペースインデントで再展開します。
3
削減効果を確認するツールは入力サイズ、出力サイズ、削減率を表示するため、圧縮によって具体的に何が得られたかが正確にわかります。
4
出力をコピーする「出力をコピー」をクリックして、結果をプロジェクトで使用します。

元のコードのコメントや整形の度合いによりますが、一般的には20〜40%小さくなります。サーバー側のgzipと組み合わせると、通信サイズはさらに大きく下がります — ミニファイと圧縮は積み重なって効きます。

いいえ。ミニファイはブラウザがもともと無視するコメントと空白を削除するだけで、セレクター、プロパティ、値は一切変更されません。レンダリング結果は完全に同一です。

このツールは、メールのCSS、レガシーなスタイルシート、CMSのスニペットなど、単発の作業に最適です。自動ビルドでは、cssnano、esbuild、Lightning CSSといったバンドラーのミニファイアーを使ってください。より高度な最適化にも対応しています。

はい。「整形」モードに切り替えてミニファイされたCSSを貼り付けると、読みやすく一貫してインデントされた出力が得られます。サードパーティのスタイルシートをデバッグする際に非常に役立ちます。