CSS ミニファイアー

CSS ミニファイアーは、スタイルシートからコメントを削除し空白を圧縮して、本番環境向けにファイルサイズを削減します——ダウンロードが小さくなり、解析とレンダリングが高速化されます。読みやすい CSS を貼り付けると、コンパクトな出力がすぐに得られ、前後のサイズ比較や調整可能な圧縮レベルもリアルタイムで確認できます。

• •空白の圧縮：引用符とコメントを認識するミニファイアーが、文字列の内容はそのままに、スペース、改行、空行を削除します
• •コメント削除：/* ... */ コメントを削除するか、ライセンスヘッダーなどのために保持するかを、コメント保持の切り替えで選択できます
• •色の最適化：チャンネルが許す範囲で、6桁の16進数カラーと rgb() 値を3桁の16進数省略形に短縮します
• •圧縮レベル：通常モードは安全な空白・コメント・色の圧縮を行います。積極モードはさらに余分な先頭ゼロを削除し（0.5px → .5px）、ゼロ値の長さから数字を取り除きます（0px → 0）
• •サイズ比較：元のサイズ、圧縮後のサイズ、削減率を並べて表示します
• •ダウンロード可能な出力：圧縮結果を .css ファイルとして直接保存します

• •ページ読み込み時間を短縮するために、本番環境へのデプロイ前にスタイルシートを縮小する
• •<style> タグや HTML メールに埋め込む小さな CSS スニペットを、肥大化させずに準備する
• •フルの PostCSS やビルドパイプラインを構築する前に、スタイルシートがどれだけ縮小するかを素早く確認する
• •ビルドステップが現実的でない CodePen、gist、静的プロトタイプ向けに一度限りのスタイルシートを圧縮する
• •Core Web Vitals や Lighthouse の監査のために、圧縮後のサイズをパフォーマンス予算と比較する

1. 1.CSS を入力エディタに貼り付けるか、.css ファイルをアップロードします
2. 2.通常圧縮か積極圧縮かを選び、コメントを保持するかどうかを決めます
3. 3.圧縮された出力とサイズ削減率が自動的に表示されます
4. 4.出力をコピーするか、.css ファイルとしてダウンロードします
5. 5.デプロイ前に前後のバイト数を確認してサイズ削減効果を確かめます

• •積極的なゼロ除去（0px → 0）は長さの単位に対して安全ですが、文字列やコメントの内容はスキップされ、calc() 式内部の計算には触れません
• •引用符で囲まれた文字列内の空白——font-family 名、content: "..."、url() パス——は常に正確に保持されます。削除されるのは文字列とコメントの外側にある構造的な空白のみです
• •このミニファイアーはクラス名の変更、重複セレクタの統合、未使用ルールの削除は行いません——それには cssnano や PurgeCSS のようなビルドツールに統合された最適化ツールが必要です

• •これは空白・コメント・色の圧縮であり、完全な最適化ではありません——最大限のサイズ削減（セレクタの統合、重複ルールの削除、未使用 CSS の除去）には、cssnano や PurgeCSS のようなビルドツールに統合された圧縮ツールを使用してください
• •圧縮された出力は可読性を完全に失います——元のソースは必ずバージョン管理下に保管してください
• •非常に大きなスタイルシートはブラウザで完全に処理するのに時間がかかる場合があります——本番のビルドパイプラインでは、一度限りのブラウザツールではなく、PostCSS やバンドラーに圧縮を組み込んでください

圧縮された CSS があり、それを読んだりデバッグしたりする必要がある場合は、CSS ビューティファイアーをご利用ください。インデント、整列されたプロパティ、一貫した間隔を復元し、スタイルシートを実際に読めるようにします。