CSS整形・圧縮
このツールでできること
CSS のソースコードを整形（インデント追加）したり、不要な改行・空白を削除して圧縮（minify）できる無料のオンライン CSS フォーマッター。ブラウザだけで完結するため、業務用 CSS や社内コードを安心して整形できます。
特徴
- 整形（Pretty Print）と圧縮（Minify）の両対応 — 1 ボタンで切り替え可能。
- インデント幅を選択可能 — スペース 2・4・タブから選べます。
- 入力データはサーバーに送られない — ブラウザ内処理のため、業務コードも安心。
- メディアクエリ・ネスト対応 —
@media@supportsブロックを階層的にインデント。 - 大きなファイルにも対応・ブラウザ完結 — インストール不要。
使い方
- 左側のテキストエリアに CSS を貼り付けます。
- インデント幅を選び、「整形」または「圧縮」ボタンを押します。
- 右側の結果をコピーボタンでコピーして利用します。
CSS 整形と圧縮の基礎知識
CSS の整形（フォーマット）は、セレクタ・プロパティ・値を改行とインデントで整理し、人間が読みやすい状態にする処理です。コードレビュー・デバッグ・Git 差分の把握がしやすくなります。インデントは 2 スペースまたは 4 スペースが慣習的で、BEM・SMACSS・Tailwind などの設計手法ごとに好みが分かれます。
圧縮（Minify）はその逆で、不要な空白・改行・コメントをすべて取り除いてファイルサイズを小さくする処理です。ネットワーク転送量を減らして Web サイトの表示速度を改善します。整形済み CSS は Minify により 40〜60% 程度サイズを削減でき、さらに Gzip / Brotli の HTTP 圧縮を併用すれば転送量はさらに小さくなります。
多くのプロジェクトでは PostCSS・CleanCSS・cssnano・esbuild などのビルドツールが圧縮を担当します。本ツールはビルドツールを設定できない・小さな修正だけしたいときの手軽な代替として便利です。
こんなときに使えます
- コードレビュー前の整形 — 差分を見やすくして PR の品質を上げる。
- 圧縮 CSS の解析 — minify 済みのライブラリ CSS を読みやすく展開して調査。
- コピペした CSS の体裁修正 — 他プロジェクトから借用したコードを自プロジェクトのスタイルに合わせる。
- 本番デプロイ前の minify 確認 — ビルドツール不要でクイックに圧縮結果を確認。
- CSS 学習 — 整形・圧縮の差分を見ながら CSS の構造を学ぶ教材として。
よくある質問
- ベンダープレフィックス（-webkit- など）は保持されますか？
- はい。
-webkit-・-moz-・-ms-などのベンダープレフィックスは プロパティとして認識され、整形・圧縮どちらのモードでもそのまま保持されます。 - 大文字・小文字は自動で変換されますか？
- いいえ。プロパティ名・セレクタ・値の大文字・小文字は元のまま保持されます。
- 整形後にコメントは残りますか？
- 整形（Pretty Print）モードでは CSS コメント（
/* ... */）を保持します。 圧縮（Minify）モードではコメントを削除します。 - 大きなファイルでも動きますか？
- はい。処理はブラウザ内で行われるため、数千行規模の CSS でも動作します。 ただし非常に大きなファイルは処理に数秒かかる場合があります。
- スマートフォンでも使えますか？
- はい。iOS・AndroidのブラウザでもPC同様に動作します。テキストエリアへの貼り付けは ブラウザ標準のペースト操作で行えます。
