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

CSSミニファイアとは？

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

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

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

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

• コメントを削除します。 /* ... */の各ブロックを削除します。
• 空白をまとめます。 ルール間にあるスペース、タブ、改行の連続を、空白が意味を持つ場合（たとえば子孫セレクターの.parentと.childの間）を除き、何もない状態または1つのスペースに縮めます。
• 句読点の周囲の空白を削除します。 {、}、:、;、,の隣にあるスペースを削除します。
• 余分なセミコロンを削除します。 連続するセミコロンを1つにまとめ、閉じる}の前にある最後のセミコロンを削除します。
• 十六進数カラーを短縮します。 #ffffffのような六桁の色は、各桁のペア（赤、緑、青）が一致する場合、#fffになります。#ffaa00ccのようなアルファ値付きの八桁の色も、四組すべてが一致する場合は同じように短縮されます。
• 長さがゼロの値から単位を除きます。 0px、0em、0remは0になります。パーセント値はそのままです。0%は単なる0と常に置き換えられるわけではないためです（たとえばflex-basisや@keyframesのステップでは置き換えられません）。
• 小数の先頭のゼロを削除します。 0.5は.5になります。

ファイルの破損を防ぐため、このツールは3種類のコンテンツを変更しません。引用符内のテキスト、引用符で囲まれていないurl()内の値、そしてcalc()、clamp()、min()、max()などの数学関数の内容です。calc(100% - 20px)内の空白はブラウザーにとって意味があるため、ツールはそのまま保持します。

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

縮小率の計算式

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

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

計算例

元のCSS（193文字）：

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

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

正確なパーセンテージは入力内容によって異なります。コメントが少なく簡潔に書かれたCSSは、縮小率が低くなります。コメントが多く、インデントが深いCSSは、より大きく縮小されることがあります。このツールでミニファイ化した一般的なスタイルシートでは、およそ20%から40%の縮小が見られます。

このツールの使い方

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

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

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

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

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

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

CSSファイルが小さいほどダウンロードと解析が速くなり、ページが表示されるまでの時間を短縮できます。Googleは、ページ速度が検索順位に使われる指標の1つだと述べています。そのため、ページの高速化は、検索結果におけるサイトのパフォーマンスに影響する多くの要因のうち、小さな要因の1つになり得ます。ミニファイ化だけで順位が変わるとは限りません。画像の圧縮やサーバーの応答時間などと並ぶ、複数の最適化の1つです。

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

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

よくある質問

ミニファイ化するとCSSはどのくらい小さくなりますか？ このツールでは、元のファイルに含まれるコメント、空行、インデントの量によって異なりますが、通常は20%から40%小さくなります。もともと書式が少ないファイルは、縮小率も低くなります。

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

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

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

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

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