CSS 圧縮

圧縮と整形の違い

圧縮はコメントと不要な空白を取り除き、重複するルールを安全にまとめて、可能な限り小さなCSSを生成します。公開前にスタイルシートを軽量化したいときに便利です。整形はその逆で、1宣言につき1行になるよう全体を再インデントし、圧縮済みや乱れたファイルを再び読みやすくします。どちらも本物のCSSパーサー（cssoとjs-beautify）で動作するため、content:文字列内のコメントのように見えるテキスト、calc()内の空白、data:URIなどの扱いにくい内容も、単純な置換で壊されることなく保持されます。

CSS圧縮ツールの使い方

1. 貼り付け — 圧縮または整形したいCSSを上の入力欄に貼り付けます。
2. インデントを選択 — スペース2つ・4つ・タブから選びます（整形結果にのみ適用され、圧縮には影響しません）。
3. 実行 — 「圧縮」または「整形」ボタンを押すと、ブラウザ内で即座に処理されます。
4. コピー — 削減されたサイズ表示を確認し、「コピー」ボタンで結果をクリップボードに入れます。

圧縮でスタイルが変わる心配はありませんか？

ありません。このツールは文字列を闇雲に検索・置換するのではなく、本物のCSSパーサー（csso）でスタイルシートを構文ツリーとして理解したうえで安全に最適化します。そのため、content:内のコメントのように見える文字列、calc()内の意味のある空白、data:URI、ベンダープレフィックスなどはそのまま保持され、レンダリング結果が変わることはありません。

どのくらいサイズが小さくなりますか？

元の状態によりますが、コメントやインデントが多い読みやすいCSSであれば、通常30〜60%ほど小さくなります。すでに圧縮されたファイルなら削減幅は小さくなります。変換が終わると、元と比べて何バイト・何パーセント削減できたかがサイズ表示ですぐに確認できます。サーバー送信時にgzip・brotli圧縮も加われば、実際の転送量はさらに小さくなります。

整形（beautify）はいつ使いますか？

すでに1行に圧縮されたCSSや、インデントが乱れたファイルを読んだり修正したりするときに整形が便利です。1宣言につき1行の一貫したインデントで配置し直してくれるので、公開済みのスタイルシートをデバッグしたり、他人のコードを理解したりするときに役立ちます。再び公開するときは「圧縮」で戻せば済みます。

入力したCSSはどこかにアップロードされますか？

いいえ。圧縮と整形はどちらも、自己ホストしたライブラリを使ってすべてブラウザ内で動作します。入力したCSSがサーバーに送信・保存されることはありません。変換後は、サイズ表示で圧縮によって何バイト削減できたかがわかり、コピーボタンで結果をそのままクリップボードに貼り付けられます。