無料CSSミニファイア：CSS コードをオンラインで圧縮・最適化

CSSミニファイアとは？

CSSミニファイアは、ブラウザーが必要としない文字を取り除いて、CSS（Cascading Style Sheets）ファイルを縮小するツールです。コメント、余分な空白、改行を削除し、ページの見た目を変えずに、いくつかの一般的なパターンを短縮します。その結果、ブラウザーがより速くダウンロードして解析できる、小さなファイルになります。

CSSのミニファイ化の仕組み

Web開発者は、コードを読みやすく編集しやすくするために、コメントやインデント、空行を含めてCSSを記述します。ブラウザーはこれらの書式をすべて無視します。ミニファイアは、見た目に影響しないその他の少数のバイトとともにこれらを削除し、編集用ではなく本番利用を目的としたコンパクトなファイルにします。

このツールは次の変更を適用します。

• コメントを削除します。 CSSのコメントの書き方は/* ... */の一種類だけで、この形式のブロックはすべて削除されます。
• 空白をまとめます。 ルール間にあるスペース、タブ、改行の連続を、空白が意味を持つ場合（たとえば子孫セレクターの.parentと.childの間）を除き、何もない状態または1つのスペースに縮めます。
• 句読点の周囲の空白を削除します。 {、}、:、;、,の隣にあるスペースを削除します。
• 余分なセミコロンを削除します。 連続するセミコロンを1つにまとめ、閉じる}の前にある最後のセミコロンを削除します。
• 十六進数カラーを短縮します。 #ffffffのような六桁の色は、各桁のペア（赤、緑、青）がそれぞれ同じ数字であれば、#fffになります。CSS Color仕様では、三桁の形式は、六桁の形式の各桁を二重にしたものと定義されているため、#123は#112233と等しくなります。#ffaa00ccのようにアルファ値を含む八桁の色も、四つのペアがすべて一致すれば、同じ方法で短縮されます。
• 長さがゼロの値から単位を取り除きます。 0px、0em、0remなどのゼロの長さは、0になります。CSS Values仕様では、ゼロの長さでは単位の識別子は省略可能とされています。パーセント値はそのままにします。0%は単なる0と常に置き換えられるとは限らないためです（たとえば、flex-basisや@keyframesのステップなど）。
• 小数の先頭のゼロを削除します。 0.5は.5になります。

ファイルが壊れないように、このツールは三種類の内容を保護します。引用符内のテキスト、引用符なしのurl()内の値、そしてcalc()、clamp()、min()、max()などの数学関数の内容です。calc()の内側では、+と-の演算子の両側に空白が必須なので、calc(100% - 20px)は空白を保ちます。このツールは、そこでは連続する複数のスペースを一つのスペースに縮めるだけです。これらの関数内の単位は保持されるため、calc(100% - 0px)は変更されません。

このツールは、重複するセレクターを統合したり、空のルールブロックを削除したり、rgb()の色を十六進数に変換したりしません。これらは他のツールが行う有効な最適化ですが、このミニファイアは上記の変更に重点を置いています。

縮小率の計算式

このツールは、ファイルが何パーセント小さくなったかを報告します。

どちらの長さも文字数で数えます。結果は小数点以下2桁に丸められます。

計算例

元のCSS（193文字）：

ミニファイ化後の出力（129文字）：

式を適用すると、(193 − 129) / 193 × 100 = 33.16%となります。コメント、インデント、改行がなくなり、0pxは0になり、#ffffff/#000000は#fff/#000になっています。

正確な割合は、入力によって異なります。コメントが少なく、詰めて書かれたCSSでは、縮小の度合いは小さくなります。コメントが多く、インデントが深いCSSでは、より大きく縮小することがあります。

このツールの使い方

1. 左側の入力欄にCSSコードを貼り付けます。
2. ミニファイ化されたバージョンが、ボタンを押さなくても右側に自動的に表示されます。
3. 出力の上に表示される縮小率を確認します。
4. 「クリップボードにコピー」を選択してミニファイ化されたCSSをコピーし、プロジェクトファイルに貼り付けます。
5. 「クリア」を選択すると、両方の欄が消去され、最初からやり直せます。

このツールに入力した内容がサーバーに送信されることはありません。ミニファイ化はブラウザー内で実行されます。

CSSをミニファイ化するタイミング

開発チームは通常、Webpackやnpmスクリプトなどのツールを使い、各デプロイ前に自動的に変更が行われるよう、ビルドプロセスの一環としてCSSをミニファイ化します。読みやすくコメント付きのソースファイルはバージョン管理に残し、本番用ビルドだけをミニファイ化します。ミニファイ化されたCSSがよく使われる場所には、次のようなものがあります。

• 大規模なウェブサイト。オンラインストアなどでは、スタイルシートが小さいほどページの読み込みが速くなります。
• シングルページアプリケーション。ReactやVueなどのフレームワークで構築され、CSSがJavaScriptとともにバンドルされるものです。
• モバイル向けウェブページ。ユーザーが低速な接続を利用している可能性が高いためです。

CSSのミニファイ化とページ速度

CSSファイルが小さいほど、ダウンロードも解析も速くなり、ページが表示されるまでの時間を短縮できる場合があります。Googleは、ランキングシステムでCore Web Vitalsが使われているとしていますが、ページエクスペリエンスを示す単一のシグナルはなく、さまざまなシグナルを使っているとも述べています。ページが速くなることは、検索結果での成果に影響する小さな要因の一つになり得ます。ミニファイだけでランキングが変わる保証はなく、画像の圧縮やサーバーの応答時間などと並ぶ、複数の最適化の一つです。

CSSミニファイアとCSSビューティファイア

ミニファイアは本番用にコードを圧縮します。ビューティファイアはその逆で、圧縮されたCSSをインデントや改行を含む形式に戻し、人が再び読めるようにします。ミニファイ化の過程で削除されたコメントや元の変数名は、削除されると情報が失われるため、ビューティファイアでも復元できません。

よくある質問

ミニファイすると、CSSはどのくらい小さくなりますか？ 元のファイルに含まれるコメント、空行、インデントの量によって変わります。上の例では33.16%縮小します。もともと書式が少ないファイルでは、縮小は小さくなります。

CSSをミニファイ化するとページの見た目は変わりますか？ いいえ。ミニファイ化は、コメントや余分な空白など、ブラウザーが無視する文字を削除し、#ffffffを#fffにするように、同等の値をいくつか書き換えるだけです。表示されるページは変わりません。

開発中にCSSをミニファイ化すべきですか？ いいえ。コードの作成やデバッグ中は、読みやすくコメント付きのバージョンを保持します。本番サーバーに配置するコピーだけを、通常はビルドプロセスの自動ステップとしてミニファイ化します。

ミニファイ化されたCSSを元のファイルに戻せますか？ ビューティファイアを使えば、ミニファイ化されたCSSにインデントを付けて再整形できますが、削除されたコメントや、ミニファイ化されたバージョンに存在しなかった説明的な名前を復元することはできません。元のソースファイルを保持してください。

このツールはrgb()の色を十六進数に変換したり、重複するセレクターを統合したりしますか？ いいえ。十六進数カラーを短縮し、不要な文字を削除しますが、rgb()/hsl()の値を書き換えたり、繰り返されるセレクターを統合したりはしません。他のミニファイアには、こうした追加処理を行うものもあります。

ミニファイ化はgzip圧縮と同じですか？ いいえ。ミニファイ化は、ソースコード自体から不要な文字を削除します。gzip（またはBrotli）圧縮は、ファイルの送信時にウェブサーバーが別のアルゴリズムを使って適用します。両方を併用すると、ネットワーク経由で送信されるファイルを最小化できます。

参考文献

1. W3C. CSS Syntax Module Level 3. CSS Syntax Level 3 — コメントの構文は/* ... */のみ。
2. W3C. CSS Color Module Level 4. CSS Color Level 4 — 3桁と4桁の十六進数カラーは、6桁と8桁の形式の各桁を二重にしたものと等しい。
3. W3C. CSS Values and Units Module Level 4. CSS Values Level 4 — ゼロの長さでは単位は省略可能。calc()では+と-の前後に空白が必須。
4. Google Search Central. Understanding page experience in Google Search results. Page experience — Core Web Vitalsは、Googleのランキングシステムで使われている。