CSS ビューティファイアー

CSS ビューティファイアーは、圧縮・難読化・縮排の乱れたスタイルシートを、きれいで読みやすい CSS に整形します——一貫したインデント、整列されたプロパティ、ルール間の明確な間隔によって、実際に読んで確認し編集できるようになります。圧縮されたスタイルシート、バンドルされた CSS ファイル、あるいは手書きで乱れた CSS を貼り付ければ、すぐに整形済みの出力が得られます。

• •インデント：スペース2つ、スペース4つ、またはタブを、実際の js-beautify 整形エンジンで適用
• •プロパティの並べ替え：各ルールブロック内で宣言をアルファベット順に整列し、一貫した見やすいスタイルにする
• •メディアクエリの並べ替え：トップレベルの @media ブロックをブレークポイント順に並べ替え、min-width は昇順、max-width は降順
• •ルール間隔：ルール間に空行を追加して視覚的に区切る、または詰めたまま出力する
• •コメント保持：整形時にコメント /* ... */ を保持または削除する
• •色の正規化：チャンネルが許す範囲で、6桁の16進数カラーと rgb() 値を3桁の16進数省略形に短縮する

• •圧縮された本番スタイルシートを読んで、ブラウザの開発者ツールでレイアウトの問題をデバッグする
• •チャットメッセージ、PDF、メールから貼り付けて元のインデントが失われた CSS を再整形する
• •コードレビュー前にプロパティの順序とインデントを統一する
• •CSS-in-JS のビルドやプリプロセッサの出力から生成された、バンドルされたスタイルシートを監査できる程度に読みやすくする
• •デザインツールからエクスポートした CSS をコミット前に整理する

1. 1.CSS を入力エディタに貼り付けるか、.css ファイルをアップロードします
2. 2.インデント（スペース2/4またはタブ）を選択します
3. 3.必要に応じてコメント保持、プロパティの並べ替え、メディアクエリの並べ替え、ルール間隔、色の正規化を切り替えます
4. 4.整形された出力が入力に応じて自動的に表示されます
5. 5.出力をコピーするか、.css ファイルとしてダウンロードします

• •プロパティをアルファベット順に並べ替えると、margin と margin-top のように論理的に関連する宣言が離れてしまうことがあります——厳格なスタイルルールとして採用する前に、並べ替えられた出力を確認してください
• •ベンダープレフィックス付きプロパティ（-webkit-、-moz-）はプレフィックスなしの対応するプロパティと一緒に並べ替えられるため、プレフィックス付きのフォールバックが標準プロパティの後に配置されることがあります
• •波括弧チェッカーは入力中に一致しない { と } を検出しますが、これは完全な CSS パーサーではなくヒューリスティックなスキャンです——すべての種類の無効な構文を検出できるわけではありません

• •これはフォーマットツールであり、リンターではありません——無効なプロパティ名、ブラウザの互換性の問題、セレクタの詳細度の競合は検出しません
• •非常に大きなスタイルシート（数MBのバンドル）はブラウザでの整形処理が遅くなる場合があります——大規模なコードベースの整形には、ビルドツールに統合されたフォーマッター（Prettier、Stylelint --fix）の方が適しています
• •チーム全体で一貫した CSS スタイルを徹底する場合、エディタや CI に統合された Stylelint や Prettier のような専用ツールの方が、その場しのぎのブラウザ整形より適しています

読みやすい CSS があり、本番用にファイルサイズとページ読み込み時間を削減するために圧縮する必要がある場合は、CSS ミニファイアーをご利用ください。空白を圧縮し、色を短縮し、最大限の圧縮のために余分なゼロを削除することもできます。