貼り付ければ整形、圧縮すれば何がどれだけ減ったかまで分かります
CSS整形・圧縮ツールは、同じスタイルシートを2つの方向に変換します。整形(フォーマット、beautify)は、1行に詰め込まれた .card{margin:0;padding:16px} のようなコードを、宣言ごとに1行へ展開してインデントをそろえ、人が読みやすい形にします。圧縮(minify)はその逆で、コメントや空白、改行といったブラウザーが読まない文字を取り除き、配布用のファイルを小さくします。どちらの結果も、元のコードと同じスタイルを描画することが前提で、このツールはその前提を守るように作られています。
正規表現で空白を一括削除する方法では、calc(100% - 2rem) のマイナスの前後の空白まで消えてしまい、値が無効になりがちです。このツールはCSSの仕様どおりに、コードをコメント・文字列・括弧・宣言の単位で読み取ってから書き直すため、消してよい空白と、消すと意味が変わる空白を区別できます。結果の下にある容量マップは、元と結果を同じ目盛りの帯で描き、通常のルール・@media・コメントがそれぞれ何バイトを占めて、どれだけ減ったかを示します。「検出結果」では、余分な } がひとつあるだけでルールが丸ごと消える行などを、行番号付きで指摘します。
整形や圧縮が必要になる場面
スタイルシートは、書く人と読むブラウザーとで望ましい形が違います。修正するときは展開されたコードが必要で、配信するときは短いコードのほうが有利です。次のような場面でこのツールが役立ちます。
- ライブラリの .min.css を読まなければならないとき: 圧縮版しか手元にないファイルで、ボタンの色がどこで決まっているのかを調べるには、まず展開する必要があります。整形モードに貼り付けて、結果欄で検索してください。
- 開発者ツールや他のサイトからコピーしたスタイルを整えるとき: コピーしたコードは、インデントが混在していたり1行につながっていたりしがちです。一度整形すると、セレクタと宣言の境目がすぐに見えるようになります。
- ブログやネットショップの管理画面にある「追加CSS」欄に入れるとき: 文字数に制限があったり、入力欄が狭かったりする場合は、圧縮版が便利です。元のコードは別に保管し、圧縮版だけを貼り付けます。
- 画面の一部にだけスタイルが効かないとき: 直前のルールにある余分な
}や、閉じていない括弧が原因であることが多くあります。「検出結果」が、該当の行と破棄されるセレクタを教えてくれます。 - 圧縮が実際にどれだけ効くのかを確かめたいとき: バイト数の削減率と、サーバーがgzipで送るときの削減率は異なります。容量マップのgzipの帯で、両方の値をあわせて確認できます。
使い方
- 左側(幅が狭い画面では上側)の入力欄にCSSを貼り付けます。「ファイルを開く」を押すか、.css ファイルを入力欄にドラッグ＆ドロップしても読み込めます。開けるのは5 MBまでです。
- 上部で整形か圧縮を選びます。結果は入力している間にすぐ切り替わります。
- 整形では、インデント(スペース2つ・スペース4つ・タブ)、コメントを残すかどうか、セレクタをカンマごとに改行するかどうかを選べます。圧縮では、コメントの扱い(/*! のみ残す・すべて削除・すべて残す)と、HEX色の短縮を選びます。
- 容量マップの帯の区画をクリックすると、その部分が結果欄に表示されます。「検出結果」の行番号ボタンを押すと、入力欄でその行が選択されます。
- 「結果をコピー」でクリップボードに入れるか、「ファイルに保存」でダウンロードします。圧縮結果は、ファイル名の末尾を .min.css にして保存されます。
整形すると、こう変わります
整形では、文字の順序は変えず、改行と空白だけを置き直します。宣言は1行に1つ、コロンの後に空白をひとつ置き、末尾にセミコロンを付けます。ネストしたルールは1段階ずつ深くインデントします。ブロックの間には空行をひとつ入れ、宣言と同じ行の末尾に付いたコメントは、整形後もその宣言の末尾に残します。
| 入力 | 整形結果 | ルール |
|---|---|---|
.a{color:red;margin:0} | .a { / color: red; / margin: 0; / } | 宣言ごとに1行、コロンの後に空白 |
h1,h2>a{…} | h1, / h2 > a { | 最上位のカンマごとに改行、> + ~ の前後に空白 |
rgba(0,0,0,.5) | rgba(0, 0, 0, .5) | 値の中のカンマの後に空白 |
@media (min-width:600px) | @media (min-width: 600px) | 条件の括弧内のコロンの後に空白 |
color:red!important | color: red !important; | !important の前に空白 |
.menu{&:hover{…}} | .menu { / &:hover { | ネストしたルールは1段階深くインデント |
--list: a,b | --list: a,b; | カスタムプロパティ(--)は空白をひとつにまとめるだけ |
最後の行のように、-- で始まるカスタムプロパティでは、カンマの後に空白を足しません。カスタムプロパティの値は、書かれた文字列がそのまま保持され、JavaScriptの getPropertyValue() もその文字列を返します。そのため、見た目を整えるつもりで加えた空白ひとつが、スクリプトの読み取る値を変えてしまうことがあります。セレクタのカンマごとの改行はオフにでき、オフにすると h1, h2 > a { のように1行でつなげて書きます。
圧縮で削るものと、あえて残すもの
圧縮は、結果が変わらない範囲でだけ文字を減らします。空白の大半は消してかまいませんが、中には空白そのものが文法の一部になっていて、消すと別のコードになってしまうものがあります。下の表の下側の6行は、他の圧縮方式で壊れやすい箇所で、このツールはそのまま残します。
| 対象 | 圧縮では | 理由 |
|---|---|---|
| コメント | 削除(/*! で始まるコメントは初期設定で残す) | /*! はライセンス表記を残すための慣例で、cssnanoのコメント削除も初期設定では残します |
| 改行・インデント、{ } : ; , の前後の空白 | 削除 | トークンを区切るのに必要のない空白です |
| ブロック末尾のセミコロン | 削除 | 最後の宣言の後の ; は、あってもなくても同じです |
#FFFFFF・#AABBCCDD | #fff・#abcd | 2桁ずつ同じ値のHEXは、3桁・4桁表記と同じ色です(CSS Color 4 §5.2) |
calc(100% - 2rem) の + − の前後の空白 | 残す | 加算・減算の前後の空白は必須です(Values 4 §10.8)。100%-2rem は無効になります |
and (・not ( の間の空白 | 残す | くっつけると and( が関数として読まれます(Media Queries 4 §3) |
.card :hover の空白 | 残す | 空白が子孫セレクタの結合子なので、消すと .card:hover という別のセレクタになります(Selectors 4 §14.1) |
0px・0% の単位 | 残す | flex: 1 0px の単位を消すと、0が縮小率として読まれます(Flexbox §7.1)。キーフレームの 0% は % 付きしか受け付けません(Animations 1 §3) |
空のルール・空の @layer ブロック | 残す | レイヤーの順序は最初に宣言された順で決まるため(Cascade 5 §6.4.3)、空の @layer base {} も順序を定めます |
カスタムプロパティの値・文字列・url() の中 | 空白の整理のみ、文字はそのまま | カスタムプロパティは書かれた文字列そのものが値で、文字列やURLの中の文字は内容そのものです |
このため、--brand: #C44A00 のようなカスタムプロパティの値は圧縮後も大文字のHEXのまま残り、通常のプロパティである color: #FFFFFF だけが #fff になります。「変更した内容」の一覧には、削除したコメントの数とバイト数、削除したセミコロンの数、短縮した色の数、空白で減ったバイト数が別々に表示されます。
どれだけ小さくなるか: 圧縮率とgzip転送サイズ
圧縮で減るバイト数と、実際にネットワークを流れるバイト数は別のものです。多くのサーバーはCSSをgzipやbrotliでもう一度圧縮して送り、この種の圧縮は繰り返される文字を効率よく縮めます。インデントや改行のように同じ形が繰り返される空白は、その段階でかなり小さくなっています。次の表は、このページのサンプルと、公開ライブラリBootstrap 5.3.8の配布ファイルをこのツールで圧縮し、ブラウザー(Chromium)のgzipで転送サイズを測った値です。
| ファイル | 元 | 圧縮結果 | gzip 元 → 圧縮 |
|---|---|---|---|
| サンプル「コメント付きの元ファイル」(コメント6個) | 728 B | 477 B (−34.5%) | 535 B → 381 B (−28.8%) |
| 同じサンプルで、コメントをすべて削除 | 728 B | 414 B (−43.1%) | 535 B → 303 B (−43.4%) |
Bootstrap 5.3.8 bootstrap.css | 280,311 B | 232,759 B (−17.0%) | 33,326 B → 30,776 B (−7.7%) |
参考: 公式の bootstrap.min.css | 280,311 B | 232,111 B (−17.2%) | 33,326 B → 30,823 B (−7.5%) |
Bootstrapのような大きなファイルでは、圧縮でバイト数が17%減っても、gzipの転送サイズは8%ほどしか減りません。空白がgzipの段階でほとんど消えているためです。小さなファイルでは逆に、gzipのヘッダーとフッターに付く固定の18バイト(RFC 1952)の影響で、gzip自体の効果が小さくなります。それでも圧縮は、ブラウザーが読み取って解釈する文字数を減らしますし、gzipを使わない環境ではそのまま転送量になります。Bootstrapの公式圧縮版は、セレクタの順序を入れ替えたり、rgba(0,0,0,0) を transparent に置き換えたりする変換をさらに行うため、バイト数では648 B小さくなりますが、gzipの転送サイズでは、このツールの結果のほうが47 B小さくなりました。このツールの圧縮版をブラウザーに読み込ませると、@media 内のルールまで含めた2,660件が元と同じに解釈され、違いは var() の値にあるカンマ周りの空白だけでした。
表のgzipの値はブラウザーの初期設定で測ったものなので、サーバーの圧縮レベルやbrotliを使うかどうかによって多少変わります。容量マップのKBは、1 KB = 1,024 B で計算しています。
ルールが丸ごと消えてしまうエラー
CSSはエラーがあっても止まらず、その部分だけを捨てて読み進めます。おかげでページが崩壊することはありませんが、どこが捨てられたのかは教えてくれないため、原因を探しにくくなります。次の6つのケースは、ブラウザーが実際に読む方式(CSS Syntax 3)に従ったものです。このツールも同じ方式で読み、「検出結果」に行番号付きで表示します。
| エラー | ブラウザーの読み方 | このツールでは |
|---|---|---|
ルールの外に残った } (.nav{…}}) | 余分な } を次のルールのセレクタの前に付け、} .logo という不正なセレクタとして読み、そのルールを丸ごと破棄します(§5.5.3) | 破棄されるセレクタの名前を知らせ、結果にも } .logo { として表示します |
閉じていない ( (calc(100% - 20px;) | 対応する ) が現れるまで、; や } も値の中に取り込み、後ろのルールがすべて消えます | 開き括弧のある行を知らせます |
閉じていない { | ファイルの末尾で閉じたものとして扱います。この後に別のファイルを連結すると、後ろのファイル全体がそのルールの中に入ってしまいます | 結果に } を補い、開いた行を知らせます |
| 行末まで閉じていない引用符 | 不正な文字列として読み、その宣言を破棄します | 引用符が開いた行を知らせます |
閉じていないコメント /* | ファイルの末尾まですべてコメントになります | コメントが始まった行を知らせます |
コロンのない宣言 (font-size 20px) | その宣言だけを破棄し、次の ; の後から読み直します(§5.5.6) | 注意として表示します |
エラーとまでは言えなくても、確認しておきたい点もあわせて表示します。同じルールに同じプロパティが2回あると、後ろの値だけが適用されます。display: -webkit-box; display: flex; のように古いブラウザー向けの代替である場合もあるため、「参考」として表示するだけにとどめます。宣言がひとつもない空のルールも参考として知らせますが、圧縮では削除しません。
CSSネストや新しい構文もそのまま読みます
CSSネストは、ルールの中に &:hover { … } や @media を直接書ける構文で、現在は主要なブラウザーがすべて対応しています。このツールは、ブロックの中で ; や } より先に { が現れればルール、そうでなければ宣言と読む、仕様どおりの方法でネストを見分け、整形のときには1段階ずつインデントします。圧縮のときは、宣言の後にネストしたルールが続く場合、その間の ; を残します。
| 機能 | Chrome | Firefox | Safari | このツールでは |
|---|---|---|---|---|
| CSSネスト(&) | 120 | 117 | 17.2 | 1段階ずつインデント、圧縮時は宣言とルールの間の ; を維持 |
@layer | 99 | 97 | 15.4 | 文の形もブロックの形も順序のまま、空のブロックも残す |
| gzipの測定(CompressionStream) | 80 | 113 | 16.4 | これより古いブラウザーではgzipの行を隠します |
バージョンは、MDNのブラウザー互換性データで2026-10-22に確認した、最初に対応したバージョンです。ネストは、上記のバージョンから a { … } のようにタグ名で始まるネストしたルールにも対応しており、それ以前のChrome 112〜119とSafari 16.5〜17.1は、この形に対応していませんでした。@container、@supports、@scope、@property など、ほかの@ルールも同じ方式で読みます。
よくある間違い
- 圧縮版を直接編集して、もう一度圧縮する: 圧縮版を整形して編集することはできますが、削除したコメントは戻りません。編集用の元ファイルは別に残しておき、配布のたびに元ファイルから圧縮版を作ってください。
- プロパティをアルファベット順に並べ替える:
margin-top: 8px; margin: 0;は後の margin: 0 が勝つので上の余白は0ですが、アルファベット順に並べ替えると margin が前に来て margin-top: 8px が勝ち、上の余白が8pxに変わります。このツールに並べ替え機能がないのは、そのためです。 - /*! のライセンスコメントまで消す: MITライセンスのように、著作権表示をコピーに残すことを条件にしているコードは多くあります。他の人が作ったCSSを圧縮するときは、初期設定(/*! のみ残す)のままにしてください。
- 0px を一括で 0 に置換する:
flex: 1 0px、キーフレームの0%、calc(0px + 10%)のように、単位が必要な箇所があります。検索と置換で一度に書き換えないでください。 - SCSSの // コメントをCSSに残す: CSSには // のコメントがありません。
// ボタンの次の行にあるルールは、その文字がセレクタの前に付くため、破棄されます。整形結果でセレクタの前に // が付いていたら、このケースです。 - 最後の } が抜けたファイルを連結する: 複数のCSSファイルをひとつにまとめるとき、前のファイルの閉じていないブロックが、後ろのファイル全体を飲み込みます。まとめる前に各ファイルを貼り付けて、「検出結果」が空であることを確認してください。
制限と注意
- 標準のCSS構文として読みます。SCSS・Lessの $変数、@mixin・@include、// コメント、演算式はCSSとして解釈されないため、SassやLessのコンパイラ、またはPrettierで整形してください。
- 同じセレクタの統合、重複した宣言の削除、margin-top などをひとつの margin にまとめる処理、ベンダープレフィックスの整理といった構造の最適化は行いません。こうした作業は、cssnano、Lightning CSS、esbuild などのビルドツールの役割です。
- ソースマップは生成しません。ファイル末尾の
/*# sourceMappingURL=… */も通常のコメントなので、圧縮の初期設定では削除されます。残す必要がある場合は、コメントを「すべて残す」に変更してください。 - 構文のチェックは、括弧・引用符・コメント・コロンのレベルにとどまります。
colr: redのようなプロパティ名の打ち間違い、値の単位の誤り、ブラウザーでの対応状況は判定しません。 - 開けるのは5 MBまでで、結果が30万文字を超える場合は、速度を保つために色付けを省略して文字だけを表示します。
- gzipのサイズは、ブラウザーの初期設定の圧縮で測った値で、サーバーの設定とは異なる場合があります。
基準日 W3CのCSS仕様(Syntax 3・Values 4・Media Queries 4・Color 4・Flexbox 1・Cascade 5・Nesting 1)とMDNのブラウザー互換性データは、2026-10-22に原文で確認しました。サイズの表は同じ日にChromiumのCompressionStreamで測った値で、Bootstrapは5.3.8の配布ファイルが基準です。
出典
- 01W3C: CSS Syntax Module Level 3CRD 2026-10-01。§4.3.2 コメント、§4.3.5 文字列、§5.5.3 最上位の余分な }、§5.5.5 ブロック内の宣言とルールの区別、§5.5.6 コロンのない宣言
- 02W3C: CSS Values and Units Module Level 4WD 2024-03-12。§10.8 calc() の + − の前後には空白が必須、* / は空白なしでも可
- 03W3C: Media Queries Level 4CRD 2026-02-19。§3 and・not・or と ( の間に空白がないと関数トークンになる
- 04W3C: CSS Color Module Level 4CRD 2026-10-20。§5.2 3桁・4桁・6桁・8桁のHEX表記
- 05W3C: CSS Flexible Box Layout Module Level 1CRD 2025-10-14。§7.1 flex 一括指定における単位なしの0
- 06W3C: CSS Cascading and Inheritance Level 5CR 2022-01-13。§6.4.3 レイヤーは最初に宣言された順に並ぶ
- 07W3C: CSS Nesting Module Level 1WD 2026-01-22。ネストしたルールと & セレクタ
- 08MDN: ブラウザー互換性データ2026-10-22閲覧。ネスト Chrome 120・Firefox 117・Safari 17.2、@layer 99・97・15.4、CompressionStream gzip 80・113・16.4
- 09cssnano: discardComments! が付いた特別なコメント(/*! … */)は初期設定で残す
- 10IETF RFC 1952: GZIP file formatヘッダー10バイト + フッター(CRC32・ISIZE)8バイト
- 11Bootstrap 5.3 配布ファイル5.3.8 dist/css/bootstrap.css・bootstrap.min.css(MIT)、2026-10-22に取得してサイズを測定
よくある質問
CSSの整形と圧縮は何が違うのですか?
整形(フォーマット、beautify)は、人が読みやすいように宣言を1行に1つずつ展開してインデントをそろえる作業です。圧縮(minify)は、ブラウザーが読み取る意味はそのままに、コメント・空白・改行といった不要な文字を取り除いてファイルを小さくする作業です。どちらの結果にも同じスタイルが適用されるので、編集用の元ファイルは整形された状態で保管し、配布用のコピーだけを圧縮する流れが安全です。
圧縮するとCSSが壊れることはありますか?
空白を機械的にすべて消す圧縮ツールでは壊れることがあります。calc(100% - 2rem) のマイナスの前後の空白を消すと値が無効になり、.card :hover の空白を消すと別のセレクタになります。このツールはCSS仕様のトークン単位で読み取り、こうした空白、0pxや0%の単位、文字列とurl()の中をそのまま残します。ただし元のコードがすでに壊れている場合は結果も同じように壊れるので、まず「検出結果」のエラーを直してください。
圧縮するとコメントはすべて消えますか?
初期設定では、/*! で始まるコメントだけを残し、それ以外は削除します。/*! はライセンスや著作権表示を残すための慣例で、cssnanoなどの圧縮ツールも初期設定では残します。すべて削除する設定や、すべて残す設定に切り替えることもできます。
0pxを0に置き換えないのはなぜですか?
ほとんどの場合は同じですが、意味が変わる箇所があるためです。flex: 1 0px の 0px を 0 にすると2つ目の数値が縮小率として読まれ、@keyframes の 0% は 0 と書くと無効になり、calc(0px + 10%) は 0 にすると計算が成り立ちません。削れるのは1か所あたり2〜3バイトで、gzipを通すと差はさらに小さくなるため、安全な側を選びました。
プロパティをアルファベット順に並べ替えてくれますか?
並べ替えは行いません。CSSは優先度が同じなら後に書いた宣言が勝ちます。margin-top: 8px の後に margin: 0 を書いたルールは上の余白が0ですが、アルファベット順に並べ替えると margin が前に来て margin-top: 8px が勝ち、上の余白が8pxに変わります。順序は元のままにして、同じプロパティが2回出てくる箇所だけを「検出結果」でお知らせします。
余分な } が1つあるとなぜ問題なのですか?
ルールの外にある余分な } は、ブラウザーに無視されず、次のルールのセレクタの前に付けて読まれます。すると「} .logo」のような不正なセレクタになり、その次のルールがひとつ丸ごと破棄されます。画面の一部だけがおかしいのに原因を探しにくい典型的なケースなので、このツールは該当の行と破棄されるセレクタをあわせて表示します。
SCSSやLessも整形できますか?
標準のCSS構文として読むため、ネスト(&)や @media 内の宣言のようにCSSにもある構文は整形できます。ただし // の1行コメント、$変数、@mixin・@include、計算式のようにSCSSやLessにしかない構文はCSSとして解釈されず、結果がずれることがあります。そのようなファイルは、SassやLessのコンパイラ、またはPrettierで整形してください。
入力したCSSはどこかに保存されたり送信されたりしますか?
いいえ。整形・圧縮・容量の計算・gzipの測定はすべてこのブラウザーの中で行われ、サーバーへの送信も保存もしません。ページを閉じると入力した内容も消えるので、必要な結果はコピーするかファイルに保存しておいてください。