CSSミニファイヤー
CSSフォーマッターのプリセット
不要なコメントと空白を削除してスタイルシートを有効な最小の出力に圧縮します。設計上安全です — ルールが統合されたり値が書き換えられたりすることはないため、挙動は変わりません。
- ファイルは端末の外に出ません
- 無料、登録不要
- 透かしなし
- 一度読み込めばオフラインでも動作します
CSSフォーマッターの使い方
- 1
CSSを貼り付け
プレーンCSS、SCSS、Lessはすべて正しく解析されます。
- 2
整形または圧縮
可読性のために整形するか、本番用に圧縮します。
- 3
コピーまたはダウンロード
結果はプロジェクトに直接貼り付ける準備ができています。
手書きCSSにとって「安全な」圧縮が正しいトレードオフである理由
専用のCSSオプティマイザーを実行するビルドパイプラインは、このツールよりも安全に、より積極的な変換を適用できます。同じオプティマイザーをビルドごとに一貫して実行し、挙動の違いが公開前にプロジェクト自身のテストで検出されるためです。1回限りのオンラインツールにスタイルシートを貼り付けるのは異なる状況です: 出力を再検証するビルドステップは存在しないため、ルールを統合したり宣言を並べ替えたりして特定のページを壊してしまう変換が、黙って公開されてしまうことになります。このツールを空白とコメントの削除 — カスケードでどの宣言が勝つかを変えないことが証明できる変更 — に制限することで、結果が来たページを再テストすることなく信頼できるようになります。
サイズ制限のある場所に貼り付けようとしているスタイルシートを圧縮する
ビルドツールではなく特にこれを使う一般的なケースは、小さいスタイルシートをサイズ制限のあるフィールドに収める一度限りのニーズです — 意図的に小さく保たれたインラインの`<style>`ブロック、メールテンプレートに埋め込まれたCSSの断片、あるいは文字数制限のあるプラットフォームに貼り付けるスタイル値などです。一度だけ必要な単一のファイルに対して完全なビルドパイプラインを実行するのは過剰です — ここに貼り付けて圧縮された結果をコピーし直す方が、同じ結果への最速の道です。
よくある質問
圧縮すると実際にどれくらい節約できますか？
手書きのCSSでは、gzip前に通常20%〜30%です。ビルドツールがすでに処理した出力では、はるかに少なくなります。ネットワーク上では、gzipやbrotliの層がどのみち大部分の作業をこなします — 圧縮は主にそれ以前にコメントと余分な空白を取り除くことで役立ちます。
圧縮するとスタイルの挙動が変わりますか？
いいえ。空白とコメントだけが削除され、セレクタ、プロパティ、値には触れられません。このツールはルールを統合したり、宣言を並べ替えたり、色を短縮したりしません。それらの変換は挙動を検出しにくい形で変えることがあるためです。
SCSSとLessに対応していますか？
はい、両方とも独自の文法で解析されるため、ネスト、変数、mixinは整形後も残ります。整形するだけで、CSSにコンパイルするわけではないことに注意してください。
なぜCSSが拒否されるのですか？
通常は閉じられていない波括弧や余分な文字です。エラーメッセージには行番号が含まれているので見つけられます。スタイルシートに混ざったテンプレート構文も、有効なCSSではないため失敗します。