Dev Tools
CSS 圧縮・整形ツール（無料・オンライン）
ブラウザ上でCSSを即座に圧縮または整形。コメントや空白を削除してファイルサイズを小さくします。
ファイルは保存されませんすぐに完了登録不要
🔒 ファイルがブラウザの外に出ることはありません。すべての処理はローカルで行われます。
CSSをオンラインで圧縮する方法
- 1
CSSを貼り付ける
入力ボックスにCSSコードを貼り付けるか入力します。
- 2
圧縮か整形を選ぶ
「CSSを圧縮」でコードを圧縮、「CSSを整形」で統一されたインデントに整えます。
- 3
結果をコピーする
出力は右側に表示されます。「コピー」を押すとクリップボードにコピーされます。
CSSはレンダリングをブロックします。head内のすべてのスタイルシートをダウンロードして解析するまで、ブラウザは何も描画できません。そのため、わずか数KBの差でもFirst Contentful Paintに影響し、特にモバイル回線で顕著です。CSSの圧縮は最も手軽な最適化で、ビルド環境もコード変更も不要。見た目はまったく同じまま、ファイルだけが小さくなります。
削除されるのは、コメント、インデント、改行、波括弧やコロンの前後の空白、そして閉じ括弧直前の最後のセミコロンです。セレクタ、プロパティ名、値には一切手を加えないため、圧縮後のCSSは元のCSSと同じように動作します。「整形」はその逆で、本番用のスタイルシートを読みやすく統一されたインデントのルールに戻します。
スタイルシートが大きい原因が空白ではなく未使用のルールの場合、圧縮の効果は小さくなります。まずビルド時に未使用のセレクタを取り除いてください。ほかのリソースには、JS圧縮ツールやHTML圧縮ツールが同じ考え方をスクリプトやマークアップに適用します。