CSS圧縮ツール

CSSの圧縮と最適化をひとつの場所で

この CSSミニファイツール は、ブラウザが必要としないすべての文字——コメント、空白、改行、各ルールの末尾にある冗長なセミコロン——を削除することでスタイルシートを縮小します。送信するファイルのバイト数を減らしながら、レンダリング結果はまったく変わりません。コードを貼り付けるか .css ファイルをドロップすれば、節約した正確なバイト数とパーセンテージとともに圧縮結果が即座に表示されます。

同時に CSSコンプレッサー と CSSビューティファイツール も兼ねています。ひとつのトグルでミニファイと逆ミニファイを切り替えられるため、スタイルシートを圧縮するのと同じツールで、インデントされた読みやすいコードに戻すことができます。

削除されるもの——絶対に触れないもの

CSSをミニファイすると、ツールはコメントを削除し、すべての空白を畳み込み、{ } : ; , > + などの記号の周囲のスペースを除去し、各閉じ波括弧の前の最後のセミコロンを削除します。アグレッシブモードをオンにすると、先頭ゼロも削除されます（0.5em → .5em）し、ゼロ長さの値の単位も削除されます（0px → 0）。

重要なのは、これが可逆的（ロスレス）であることです。引用符で囲まれた文字列、url() の値、calc() の式は何かを削除する前に保護されるため、calc(100% - 2rem) のような値は必要なスペースを保持し、背景画像のパスが壊れることはありません。多くの高速オンラインミニファイツールは calc() を正しく処理できませんが、このツールは問題ありません。

ミニファイまたはビューティファイ——真の双方向ツール

1行に圧縮されたスタイルシートを読む必要がありますか？ビューティファイモードに切り替えて CSSを逆ミニファイしましょう。ツールがコードを再インデントし、各宣言を独自の行に置き、各コロンの後にスペースを追加し、セレクターリストをきれいに並べます。プロジェクトのスタイルに合わせて2スペース、4スペース、またはタブインデントを選べます。

ミニファイとビューティファイは可逆なので、本番環境の圧縮CSSを貼り付けて読み、調整してから再ミニファイする——これすべてページを離れずに行えます。

cssminifier.com、CleanCSS、cssnanoとの比較

cssminifier.com は最もよく使われるオンラインオプションですが、コードをサーバーにアップロードします。独自スタイルシート——クライアントプロジェクト、未公開デザイン、社内ツール——にとって、これは本物のリスクです。CleanCSS と cssnano はNode.jsライブラリで、自動化パイプラインには最適ですが、ローカルインストールなしには使えません。freeformatter.comのCSSミニファイツールと TopTalのCSSミニファイツールもサーバーサイドです。

このツールはJavaScriptですべてをローカルで処理します——何もアップロードされません。最も一般的なミニファイ最適化（空白、コメント、セミコロン、ゼロ単位、先頭ゼロ）をカバーし、同じステップでgzip推定値も表示します。アカウント不要、アップロード不要、インストール不要——iPhone、Android、Mac、Windows、Linuxで動作します。

節約したバイト数を確認——gzipを含む

目立つ統計バーに元のサイズ、出力サイズ、節約したバイト数とパーセンテージが表示されるため、CSSがどれだけ小さくなったかを常に正確に把握できます。サイズは文字数ではなく実際のUTF-8バイトで測定されるため、サーバーが実際に提供するものと一致します。

ブラウザでローカルに計算された gzip圧縮後 の値も表示します。ミニファイとgzipは重なります——まずソースをミニファイし、次にホストに圧縮させる——両方の数値を見ることで、組み合わせた節約効果が一目で分かります。

100%プライベート——何もブラウザから外に出ない

すべてのミニファイとビューティファイはJavaScriptを使ってブラウザ内でローカルに実行されます。CSSはアップロード、ログ記録、保存されることは一切なく、独自の、未公開の、またはクライアントのスタイルシートを安全に圧縮できます。サインアップ不要で、デバイスのメモリ以外に制限はありません。オフラインでも動作します——ページが読み込まれたら、インターネットを切断してもミニファイツールは動き続けます。このオンラインCSSミニファイツールをブックマークして、CSSを圧縮したり、ファイルを縮小したり、圧縮されたスタイルシートを読んだりするときにいつでも使いましょう。