CSS圧縮ツール：コメント・改行・空白をまとめて削除
このCSS圧縮ツールにスタイルシートを貼り付けると、コメントや改行、ブラウザが必要としないスペースをすべて取り除きます。圧縮後のCSSは一瞬で下に表示され、何バイト削減できたかも正確にわかります。インストールもビルド作業も不要で、貼り付けた内容がアップロードされることはありません。処理はすべてブラウザの中で行われます。
CSS圧縮の方法
- 元のCSSの欄にCSSを貼り付けるか、直接入力してください。
- 入力を止めて少しすると、圧縮されたCSSが下に表示されます。元のサイズ、圧縮後のサイズ、削減率も一緒に表示されます。押すボタンはありません。
- クリップボードにコピーをタップしてプロジェクトに貼り付けるか、.min.cssをダウンロードでファイルとして保存してください。
構文に誤りのあるCSSを貼り付けても、ツールが止まることはありません。読み取れる範囲まで圧縮されるので、書きかけのコードを貼り付けて、あとから直すこともできます。
CSSのミニファイで削除されるもの
ミニファイしても、すべてのルールはこれまでとまったく同じように動きます。取り除かれるのは、人が読むためだけにある部分です。コメントは消え、連続する空白はまとめられ、波括弧・コロン・カンマの前後のスペースがなくなり、閉じ括弧の直前にある最後のセミコロンも削除されます。引用符で囲んだ文字列、url() の値、エスケープされた文字はそのままコピーされるため、"a b" のような内容のスペースは保たれます。
圧縮前：/* Buttons */ .btn { color: #fff; margin: 0 auto; }
圧縮後：.btn{color:#fff;margin:0 auto}
CSS軽量化でどのくらい小さくなるか
削減量は、ファイルに含まれるコメントや空白の量によって変わります。コメントが多く、きれいにインデントされたスタイルシートなら、4分の1から半分ほど小さくなることがよくあります。結果の下に、元のサイズ、圧縮後のサイズ、削減率が正確に表示されます。
ファイルが小さくなればダウンロードが速くなり、ページの表示も早まります。さらに転送量を減らしたい場合は、Webサーバー側で圧縮済みのファイルにgzipやBrotliをかけることもできます。
ライセンスコメントを残すか削除するか
/*! で始まるコメントには、たいていライブラリのライセンスや著作権表示が書かれています。多くのライセンスはこの表示をコードと一緒に配布するよう求めているため、初期設定では残します。
入力欄の下にあるライセンスコメント(/*! ... */)を残すのチェックを外すと、これらのコメントも削除され、ファイルを最小にできます。
最小化したCSSを本番環境で使うときは
圧縮したCSSはそのまま本番環境で使えます。削除されるのは、ブラウザがスタイルシートを読む際に影響しない文字だけだからです。読みやすい元のファイルはソースとして手元に残し、公開するサイトでは .min.css の方を読み込んでください。たとえば style.css と style.min.css を並べて置くのが一般的です。
よくある質問
CSS圧縮とは何ですか？
ブラウザがスタイルを読むのに必要のないものを取り除くことです。コメント、改行、インデント、波括弧・コロン・カンマの前後のスペース、各ルールの最後のセミコロンが対象です。動作は元のCSSとまったく同じまま、ファイルが小さくなるので、ダウンロードが速くなります。
CSSのミニファイと圧縮は違いますか？
普段の使い方では同じ意味で、動作を変えずにテキストを小さくすることを指します。ここにスタイルシートを貼り付けて、圧縮結果をコピーまたはダウンロードしてください。さらに転送量を減らしたい場合は、Webサーバーで圧縮済みファイルにgzipやBrotliをかける方法もあります。
CSSのコメントを削除するにはどうすればいいですか？
CSSを貼り付けて、「ライセンスコメント(/*! ... */)を残す」のチェックを外してください。/*! で始まるものも含め、すべてのコメントが削除されます。チェックを入れたままにすると、そのライセンス表示だけが残り、ほかのコメントは削除されます。
CSSの改行や空白も削除されますか？
はい、ブラウザに不要な改行と空白はすべて削除されます。ただし、引用符で囲んだ文字列、url() の値、エスケープされた文字の中はそのまま残るので、表示が変わることはありません。
圧縮したCSSを本番環境で使っても大丈夫ですか？
はい、大丈夫です。取り除かれるのは、ブラウザがスタイルシートを読む際に影響しない文字だけです。元のファイルはソースとして保管し、公開用には .min.css を使ってください。
.min.cssファイルとは何ですか？
スタイルシートを圧縮したコピーのことで、読みやすい元のファイルと並べて置けるよう、慣習的にこの名前が付けられます。たとえば style.css と style.min.css です。編集は元のファイルで行い、公開するサイトでは .min.css を読み込みます。
CSS圧縮を元に戻すことはできますか？
元の書式は圧縮で失われるため、完全に同じ状態には戻せませんが、読みやすい形にはできます。圧縮されたコードをコードフォーマッターに貼り付けると、インデントを付け直せます。削除されたコメントは戻らないので、元のファイルは必ず保管しておいてください。
書きかけのCSSでも圧縮できますか？
はい、できます。構文に誤りがあってもツールは止まらず、読み取れる範囲まで圧縮します。あとからコードを直してください。
おすすめ
-
Amazonベーシック モニタースタンド 卓上 3段調節画面を目線の高さに上げて、CSS作業の姿勢をラクに。
-
Webサイトの分析・改善の教科書 改訂3版CSSを軽くしたら、次はサイト全体の改善。公開前に読みたい一冊。
-
ロジクール MX MASTER 3S ワイヤレスマウス静音で精密。長時間のコーディングにも疲れにくい。
無料でツールを続ける支えになります。✨
画像はイメージです。 Amazonのアソシエイトとして、Capsule Toolsは適格販売により収入を得ています。
