CSS フォーマッタ
整形結果
使い方
CSS をテキストエリアに貼り付けると、インデント・改行・スペースが自動で整形されます。インデント幅は 2 スペースまたは 4 スペースから選べます。出力結果はコピーボタンでクリップボードに転送できます。
CSS 整形とは
ビルドツールで圧縮された CSS や、コピペで雑に貼られた CSS は、人間が読むには整形が必要です。本ツールは `{ ... }` 構造の階層に応じてインデントを付与し、`;` の後に改行を入れ、`:` `,` の後に空白を補います。プロパティ値の正規化（hex を rgb に変換するなど）は行いません。
活用シーン
- バンドラが出力した minified CSS を読み解きたいとき
- インラインスタイルの長い属性値を整形して内容を把握
- 他人から渡された雑な CSS を共通の体裁に揃えてからレビュー
- 自分で書きながら一度整形して構造を確認したい場面
- CSS 抜粋をブログ記事や Slack に貼る前の体裁調整
プライバシー
整形処理はすべてブラウザ内で完結し、CSS の内容がサーバーに送信されることはありません。社内のスタイルシートを試す場面でも外部に送信される心配はありません。