CSS整形ツール：CSSをオンラインで整形・圧縮（ミニファイ）

CSS整形ツールでできること

CSS整形ツール（CSSフォーマッター）は、スタイルシートの意味を変えずにレイアウトだけを書き直すツールです。ルールごとにブロックを分け、宣言は1行に1つずつ並べ、メディアクエリのような入れ子のブロックは1段深くインデントします。結果は同じCSSのままで、読む、レビューする、編集するのがずっと楽になります。

圧縮済みのファイルからスタイルをコピーしたとき、何年も手作業で書き足されてきたテーマを開いたとき、ブラウザの開発者ツールから CSS を貼り付けたときに役立ちます。コードレビューの前に整形しておけば、書式がそろうので差分には本当の変更だけが表示されます。

CSS整形ツールの使い方

左のボックスに CSS を貼り付けます。貼り付けた時点で整形されます。
または ファイルを開く で手元の .css ファイルを読み込むか、サンプル でサンプルコードを試します。
インデント を選びます：スペース2つ、スペース4つ、タブのいずれかです。
行の幅 を設定します。セレクタのリストや値が長く、この幅を超える場合は折り返されます。
"Inter" より 'Inter' の書き方を使うプロジェクトなら、シングルクォート をオンにします。
整形（または Ctrl+Enter）で整形、圧縮で圧縮します。
コピー または ダウンロード で結果を取り出します。

一度整形すると、その後は入力に合わせて出力が自動で更新されます。CSS に構文エラーがある場合は、ボックスの下のメッセージにその位置が表示され、入力欄で表示 を押すとその箇所へ移動します。

整形前と整形後

圧縮された CSS の例です。

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

スペース2つで整形した結果です。

.card {
  display: flex;
  padding: 16px 24px;
  border: 1px solid #ddd;
}
.card > h2,
.card .title {
  font-size: 1.25rem;
  margin: 0 0 8px;
}
@media (max-width: 600px) {
  .card {
    flex-direction: column;
  }
}

子結合子の > の前後にスペースが入り、リスト内のセレクタがそれぞれ別の行になり、メディアクエリ内のルールがインデントされているのがわかります。コメントは書いた位置にそのまま残ります。

CSSの圧縮（ミニファイ）

圧縮は逆の処理です。コメントと、ブラウザに不要な空白を取り除きます。上の整形済みコードに実行すると、1行に戻ります。

.card{display:flex;padding:16px 24px;border:1px solid #ddd}.card>h2,.card .title{font-size:1.25rem;margin:0 0 8px}@media (max-width:600px){.card{flex-direction:column}}

この圧縮処理は、あえて慎重に作られています。div :first-child のスペースは、消すとセレクタの意味が変わってしまうので残します。calc(100% - 2rem) の中のスペースも、calc に必要なので残します。文字列と url() の値には手を加えません。/*! で始まるコメントは、ライセンス表記であることが多いため残します。

/*! Theme v2 | MIT */ .btn{padding:8px 12px;color:#fff}

重複したルールの統合、色の短縮、使われていないセレクタの削除は行いません。そこまで最適化したい場合は、プロジェクトで cssnano や Lightning CSS などのビルドツールを使ってください。

エラーメッセージの読み方

整形には正しい構文の CSS が必要です。波かっこが足りない場合は、次のようなメッセージが表示されます。

1行目、1列目：Unclosed block

位置は、開かれたまま閉じられていないブロックを指しています。よくある原因は、ルールの最後の } の書き忘れ、セレクタの後に紛れ込んだ {、閉じていないコメントです。問題を直して、もう一度整形を押してください。

このツールは、プロパティ名や値が実在するかどうかまではチェックしません。colr: red は構文としては正しいので、エラーにはならずそのまま整形されます。この種のミスは Stylelint のようなリンターで見つけられます。

ヒント

プロジェクトで別の決まりがなければ、インデントはスペース2つがおすすめです。CSS のスタイルガイドで最も多く使われている設定です。
圧縮したファイルはビルドの出力として扱い、整形したファイルを元のソースとして管理しましょう。圧縮済みの CSS を手で編集するとミスが起きやすくなります。
HTML ファイルの style タグ内にある CSS は、ページ全体を HTML整形ツールに貼り付けてください。インラインの CSS もまとめて整形されます。
ネストや $変数 を使う Sass ファイルは SCSS整形ツールで整形してください。

CSSを整形するほかの方法

VS Code：ファイルを開いて「ドキュメントのフォーマット」（Windows は Shift+Alt+F、macOS は Shift+Option+F）を実行します。Prettier 拡張機能を入れると、このページと同じ結果になります。
コマンドライン：npx prettier --write styles.css で、Prettier がファイルをその場で整形します。
ブラウザの開発者ツール：Chrome と Firefox の「ソース」パネルには、圧縮されたスタイルシートを読みやすく表示するボタンがあります。読むだけなら十分ですが、インデント幅などの設定は選べません。

何もインストールしたくないときや、よそから持ってきたコードをさっと確認したいときに、このページが便利です。スクリプトも扱うなら、同じエンジンと設定を使う JavaScript整形ツールもあります。

CSS整形ツールのよくある質問

CSSはどこかにアップロードされますか？

いいえ。整形はブラウザ内で行われます。スタイルシートがサーバーに送信されることはないので、非公開プロジェクトのコードも安心して貼り付けられます。

CSSを圧縮すると、ページの見た目が変わりますか？

変わらないように作られています。「圧縮」ボタンが削除するのは、ブラウザが無視するコメントと空白、そして各ブロックの最後のセミコロンだけです。ルールの名前変更、統合、並べ替えは行いません。また、/*! で始まるコメントは残すので、ライセンス表記も消えません。

「Unclosed block」と表示されるのはなぜですか？

{ で開いたルールが } で閉じられていません。表示される行と列は、閉じられていないブロックの開始位置を指しています。足りない波かっこを追加して、もう一度「整形」を押してください。

SCSSやLessも整形できますか？

このページは通常のCSSを読み込みます。ネスト、変数、mixin を使った Sass のファイルには、SCSS パーサーを使う SCSS 整形ツールをご利用ください。

どのような整形ルールに従っていますか？

多くの開発チームがエディタや CI で使っているフォーマッター、Prettier 3 を使っています。1行に1つのプロパティ、コロンの後に半角スペース1つ、セレクタのリストは1行に1つずつ、というルールです。