CSS Formatter

概要

• 1行に詰め込まれたCSSを、Prettierを使ってインデント・改行の整った読みやすい形式に整形するツールです。

• プロパティごとの改行やスペースの統一など、Prettierの標準的なルールに従って一貫したスタイルに整えます。

• ビルド後のCSSやミニファイされたCSSの中身を確認したい場合に使います。

使い方

1. 1

   テキストエリアに整形したいCSSを入力します。

2. 2

   「整形する」ボタンをクリックします。

3. 3

   インデント整形された結果が下部に表示されます。「コピー」ボタンで結果をクリップボードにコピーできます。

入力例・出力例

body{color:red;margin:0}

body {
  color: red;
  margin: 0;
}

利用シーン

• ビルドツールが出力した圧縮済みCSSを、デバッグのために読みやすく整形する

• 他サイトのCSSを参考にする際、読みやすい形に整えてから確認する

• コードレビューに掲載するCSSスニペットを、一貫したスタイルに整える

よくある質問

注意点

• 標準的なCSSの構文のみに対応しています。SCSSやLESSなどのメタ言語には対応していません。

• 波括弧が閉じられていないなど、構文として不正なCSSを入力すると整形に失敗します。

• 非常に大きなCSSを入力すると、ブラウザの処理が重くなる場合があります。