CSS整形・圧縮
圧縮されたCSSを読みたいとき、手書きのCSSを少し軽くして納品したいときに。整形と圧縮を同じ画面で切り替えられます。
🔒 入力内容はお使いのブラウザ内だけで処理され、サーバーには送信されません。
CSS を入力して「整形」または「圧縮」を押してください。
0入力サイズ(バイト)
0出力サイズ(バイト)
-削減率
0ルール数(目安)
使い方
- 上の欄に CSS を貼り付けます。
- 「整形」を押すと、1プロパティ1行でインデントの付いた形になります。セレクタの改行やルール間の空行は上の選択肢で変えられます。
- 「圧縮」を押すと、コメント・改行・余分な空白・各ルール最後のセミコロンを取り除いた形になります。入力と出力のサイズ、削減率が数値で出ます。
- 結果は「結果をコピー」でクリップボードへ、「.css をダウンロード」でファイルに保存できます。
変換の決まり
| 項目 | 整形 | 圧縮 |
|---|---|---|
コメント /* */ |
残す | 削除。/*! で始まるものは「残す」がオンなら残す |
| 空白・改行 | プロパティごとに改行、ブロックをインデント | 構文上必要な箇所以外は削除 |
| 最後のセミコロン | 付ける | } の直前のセミコロンを削除 |
文字列 "..." '...' |
そのまま | そのまま(中の空白も残す) |
url(...) |
そのまま | 中身はそのまま |
calc() などの括弧の中 |
そのまま | 演算子の前後の空白は残す(calc(100% - 10px) の - は空白が必須のため) |
a :hover のような子孫セレクタ |
そのまま | 空白を残す(a:hover とは意味が違うため) |
@media などの入れ子 |
インデントして整形 | 空白を削除 |
整形には js-beautify(オープンソースのライブラリ)を使い、圧縮はこのツール独自の処理です。
こんな時に
- テーマやプラグインが出力した圧縮済みCSSを読んで、どこで指定されているか調べたいとき
- 手書きのCSSを納品する前に、少しでも軽くしたいとき
- 複数人で書いたCSSのインデントをそろえたいとき
- ブログにCSSのサンプルを載せる前に、見た目を整えたいとき
注意
圧縮はCSSの文法を完全には解析しない簡易な処理です。構文エラーを含むCSS、特殊な記法(@supports の複雑な条件、Sass の記法など)では期待どおりにならないことがあります。本番サイトでは、ビルドツールでの圧縮とサーバーの gzip・Brotli 圧縮を組み合わせるのが一般的です。
よくある質問
圧縮でCSSが壊れることはありますか?
引用符で囲んだ文字列(content: "..." など)と url() の中身はそのまま残し、calc() の中の演算子の前後の空白も残すため、通常の CSS では壊れません。ただし構文エラーを含むCSSや、/* を文字列の外で単独で使っている場合は結果が崩れることがあります。
「/*! ... */」のコメントが残るのはなぜですか?
/*! で始まるコメントはライセンス表記などに使われる慣習があるため、「/*! コメントを残す」がオンのときは削除しません。不要ならチェックを外してください。
削減率はどのくらいが普通ですか?
手書きのCSSなら 20〜40% ほど減ることが多いです。すでに圧縮済みのCSSや、コメントが少ないCSSでは数%にとどまります。サーバーの gzip・Brotli 圧縮と組み合わせると、転送量はさらに減ります。
SCSS や Less も整形できますか?
ネストした記法は整形ライブラリがある程度扱えますが、@mixin や @include、変数の式などは想定していません。コンパイル後のCSSでお使いください。