🗜️ CSS 圧縮（Minify）

CSSを貼り付けて圧縮（minify）します。コメント・余分な空白・改行を取り除いて最小化し、元サイズ・圧縮後サイズ・削減量・削減率をUTF-8バイトで表示します。文字列や url()・calc() の中身は保護。処理はすべてブラウザ内で完結します。

入力

プロパティと値のかたまり（宣言）は ; で、ブロックは { } で区切って判定します。Ctrl/⌘ + Enter でも実行できます。

オプション

圧縮結果

解説

CSSの圧縮（minify）とは、ブラウザに与える見た目（適用結果）を変えずに、ファイルサイズだけを小さくする処理です。人が読むための改行・インデント・コメントや、プロパティ間の余分な空白は、ブラウザの解釈には不要です。これらを取り除くと、同じスタイルのままファイルが軽くなり、ページの読み込みが速くなります。本ツールは、貼り付けたCSSからコメント・連続した空白・改行を除去し、{ } : ; , のまわりの不要な空白を詰め、ブロック末尾の余分な ; を落として最小化します。

「整形（フォーマット）」とは向きが逆であることに注意してください。整形は改行と字下げを足して読みやすくする処理、圧縮は逆にそれらを削って1行に詰める処理です。開発中は整形したCSSを編集し、公開・配信するときに圧縮版を使う、という使い分けが一般的です。本ツールは圧縮に特化し、圧縮の前後でどれだけ小さくなったか（元サイズ・圧縮後サイズ・削減量・削減率）をUTF-8バイト数（TextEncoderで計測）で表示します。

安全のために、値の中身は壊さないよう配慮しています。文字列（"..." / '...'）や url(...)・calc(...) など丸括弧の内側は逐語的に保護するため、content: "a; b" のようなセミコロンを含む文字列や、calc(100% - 20px) のように空白に意味がある計算式もそのまま残ります。さらにオプションで、/*! ... */ 形式のライセンス表記コメントを残したり、中身が空の空ルールを除去したりできます。

実際のWeb配信ではサーバー側でgzipやBrotliによる転送時圧縮が併用されるのが普通で、minify（テキストの無駄取り）とgzip/Brotli（通信路での圧縮）は重ねて効きます。そのため通信量の実削減は、本ツールが示す削減率よりさらに大きくなるのが一般的です。なお本ツールは正規のCSSパーサではなく、波括弧・セミコロン・コロンを手がかりにした簡易的なminifyであり、複雑なCSSやコメント依存のブラウザハックには完全対応しません。適用前に元CSSのバックアップを取り、出力を必ず見比べてから使ってください。処理はすべて端末内で行い、貼り付けた内容はどこにも送信されません。

よくある質問

圧縮すると見た目（スタイルの適用結果）は変わりますか？

基本的に変わりません。圧縮は、ブラウザの解釈に不要な空白・改行・コメントを取り除くだけで、セレクタやプロパティ・値そのものは残します。変わるのはファイルの体裁とサイズだけです。ただし簡易ツールのため、極端に特殊な記法では意図せぬ結果になり得ます。適用前に必ず元と見比べてください。

「整形」との違いは何ですか？

整形（フォーマット）は改行と字下げを足して人が読みやすくする処理、圧縮（minify）は逆にそれらを削って最小化する処理です。編集時は整形版、配信時は圧縮版、と使い分けます。読みやすく整えたい場合は「CSSフォーマッタ（整形・圧縮）」をご利用ください。本ツールは圧縮とサイズ計測に特化しています。

コメントや文字列、url()・calc() は壊れませんか？

コメント（/* ... */）は削除しますが、"..." / '...' の文字列と、url(...)・calc(...) など丸括弧の内側は逐語的に保護します。そのため content: "a; b" のセミコロンや、calc(100% - 20px) の空白（+ / - の前後の空白は意味を持つ）はそのまま残り、値は壊れません。

ライセンス表記のコメントを残せますか？

はい。「ライセンスコメントは残す」を有効にすると、/*! で始まるコメント（多くのライブラリが著作権・ライセンス表記に使う書き方）だけを削除せずに残します。ライブラリの再配布で表記が必要な場合に使ってください。無効のときは、このコメントも他のコメントと同様に削除されます。

削減率はどう計算していますか？gzipとの関係は？

削減率 = (元サイズ − 圧縮後サイズ) ÷ 元サイズ × 100 で、サイズはUTF-8のバイト数（TextEncoderで計測）です。実際の配信ではサーバーがgzip/Brotliで転送時圧縮も行うため、両者は重ねて効きます。通信量の実削減は、本ツールの数値よりさらに大きくなるのが一般的です。

空ルールの除去とは何ですか？

.foo{} のように中身が空のルールは、適用しても何もしないため削除できます。「空ルールを除去する」を有効にすると、これらを取り除きます。@media screen{ .n{} } のようにネストした結果として空になったブロックも、内側から順に除去します。編集途中の消し残しを掃除したいときに便利です。

SCSSやLESS、壊れたCSSにも対応していますか？

純粋なCSS（波括弧・セミコロンで区切る構造）を想定した簡易ツールです。SCSS/LESSの // 行コメントや @mixin・補間 #{...} などのプリプロセッサ独自記法、コメント依存のブラウザハックには完全対応しません。閉じ忘れなどがあっても可能な範囲で処理します（best-effort）が、適用前のバックアップと出力の確認をおすすめします。

入力したCSSはサーバーに送られますか？

送られません。圧縮はすべてブラウザ内のJavaScriptで完結し、貼り付けた内容やサイズの計測結果はどこにも送信されません。ネットワークを切った状態（オフライン）でも利用できます。