CSSミニファイアー
本番用にCSSコードをミニファイ
CSS入力
ミニファイ済みCSS
CSSミニファイの例
フォーマットされたCSSは読みやすいです。ミニファイされたCSSは本番用にコンパクトです。例：
コンテナとボタンのスタイル
フォーマット入力：
ミニファイ出力：
上のサンプルでさらにサンプルデータを読み込めます。
CSSミニファイアーとは？
CSSファイルは可読性のため空白、コメント、インデントを使います。本番では小さいファイルの方が読み込みが速いです。CSSミニファイアーは不要な空白、コメントを削除し、安全な範囲で値を短縮してファイルサイズを減らします。W3C CSS仕様が言語を定義しています。ミニファイは動作を保ちながらバイト数を減らします。
このツールはCSSをパースしてコンパクト版を出力します。ミニファイは完全にブラウザ内で行われます。サーバーには何も送信されません。ミニファイされたCSSのフォーマットにはCSSフォーマッターを、検証にはCSSバリデーターを使用してください。
このツールの使い方
CSSを貼り付けまたはアップロード
CSSをコピーして左のエディターに貼り付けます。アップロードをクリックして.cssファイルを読み込むこともできます。サンプルボタンでサンプルデータを読み込みます。無効なCSSはエラーを表示します。
ミニファイ出力を確認
右のパネルにコンパクトなCSSが表示されます。空白とコメントは削除されます。出力は有効なCSSで、動作は保持されます。無効なCSSは出力にエラーを表示します。
ミニファイアーの仕組み
ツールはCSSから空白、改行、コメントを削除します。安全な範囲で値が短縮される場合があります（例：0pxを0に、#ffffffを#fffに）。出力はW3C CSS仕様に従い有効です。cssnanoやPostCSSなどのビルドツールはより積極的な最適化を提供します。このツールはブラウザベースの迅速なミニファイを提供します。
CSSミニファイが役立つ場面
本番ウェブサイトは小さいCSSファイルで恩恵を受けます。ミニファイはペイロードサイズを減らし、読み込み時間を改善し、帯域を節約します。Webpack、Vite、Parcelなどのビルドツールは自動でミニファイすることが多いですが、このツールは単発ファイル、クイックチェック、ビルドステップがない場合に便利です。
メールテンプレート、埋め込みスタイル、CDNホストのCSSは手動ミニファイが必要なことが多いです。スタイルシートをここで通すと本番用の出力が得られます。ミニファイ前にベンダープレフィックスを追加するにはCSSプレフィクサーを。ミニファイされたCSSを読みやすい形式に戻すにはCSSフォーマッターを使用してください。
よくある質問
ミニファイでCSSは壊れますか？
いいえ。空白とコメントのみが削除されます。セレクター、プロパティ、値は同じです。出力は有効なCSSです。一部のミニファイアーは値の短縮（例：0pxを0に）を行う場合がありますが、動作は保持されます。
データはプライベートですか？
はい。ミニファイは完全にブラウザ内で行われます。データはサーバーに送信されません。
ソースマップは？
このツールはソースマップを生成しません。ソースマップ付きの本番ビルドには、PostCSS、cssnano、バンドラーのミニファイアーなどのビルドツールを使用してください。
SCSSやLessに対応していますか？
このツールはプレーンCSSをミニファイします。SCSSやLessの場合は、まずSCSSをCSSにまたはLessをCSSにでコンパイルしてからミニファイしてください。
どれくらい小さくなりますか？
通常、空白とコメントの量により20〜40%小さくなります。コメントやフォーマットが多いCSSはさらに削減できます。正確な削減量は入力によります。
関連ツール
CSS仕様：W3C CSS。MDN CSSがリファレンス。cssnanoとPostCSSは高度なビルド時ミニファイを提供します。