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