このツールについて

CSS を整形して見やすくします。圧縮または乱れた規則は 1 行 1 宣言・統一された空白になり、レビューや差分が読みやすくなります。変わるのは空白だけで、セレクター・値・カスケードはそのままです。

使い方

1 行にまとめられた CSS やミニファイ済みの CSS を貼り付け、整形を実行して結果をエディターに戻します。逆方向の処理はミニファイツールが担当します。

例

初期の例はミニファイされたカードで、整形するとインデントが戻ります。

入力

.card{display:flex;padding:1.5rem;border-radius:.5rem;background:#fff}.card h2{font-size:1.25rem;font-weight:600;margin:0 0 .5rem}

出力

.card {
  display: flex;
  padding: 1.5rem;
  border-radius: .5rem;
  background: #fff;
}

.card h2 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 .5rem;
}

ヒント

レビュー前に整形し、ミニファイは本番ビルドのときだけ行うと管理しやすくなります。

知っておきたいこと

CSS ビューティファイアと CSS フォーマッターは違いますか?

いいえ。どちらもルールを再インデントし、1 行に 1 宣言を置く同じ処理なので、このページ 1 つで両方に対応しています。

整形すると CSS の動作は変わりますか?

変わりません。変わるのは空白と改行だけで、カスケードは同じままです。文字列と url(data:…) の値は保護されるため、その中のセミコロンで宣言が分割されることはありません。