CSSフォーマッター

概要

ミニファイ済みや機械生成のCSSは、そのままでは読解もデバッグも困難です。 このツールはjs-beautifyのCSSエンジンを使い、スペース2個のインデント・1行1宣言で スタイルシートを整形します。処理はすべてブラウザ内でローカルに実行されます。

使い方

1. CSS 欄にスタイルシートを貼り付けます。
2. 入力と同時に Formatted 欄が即座に更新されます。ボタン操作は不要です。
3. 出力欄から結果をコピーします。

使用例

• .a{color:red;margin:0} →

.a {
  color: red;
  margin: 0;
}

• @media(max-width:600px){.b{padding:1em}} のような1行のメディアクエリも、インデント付きブロックに展開され、ブレークポイントの確認が容易になります。

注意事項

このツールが書き換えるのは空白のみで、構文検証は行いません。不正なCSSも エラーにはならず、可能な範囲でそのまま整形されます。コメントは保持されます。 ネットワーク通信を伴わないため、大きなスタイルシートでも即座に整形されます。