ツール
入力
結果
結果はここに表示されます。CDN や本番ビルドから取ってきた圧縮済み CSS は、意図的に読めなくされています。このツールは js-beautify の CSS 整形機能でそれを展開します。1 行に 1 宣言、ルールの間に空行、@media や @supports ブロックはインデント、> のような結合子の前後には余白が入ります。サードパーティのスタイルシートを読むとき、ビルドが実際に何を出力したか確認するとき、手書きの CSS をプルリクエストに出す前に整えるときに役立ちます。
動作のしくみ
- カンマ区切りのセレクターリストは、既定では各セレクターが 1 行ずつになります。.card, .panel をまとめたままにしたい場合はオフにしてください。
- コメントは元の位置に残ります。ミニファイアが残す /*! のライセンスバナーも同様です。
- 値は書かれたとおりに残ります。色、単位、カスタムプロパティは空白が調整されるだけで、書き換えられることはありません。
データの行き先
どこにも行きません。このツールは完全にブラウザ内で動作します。貼り付けたテキストはページが処理し、サーバーに送信されることも、ログに記録されることもありません。
このツールは無料で登録不要です。結果は開いているページの中にだけあり、どこにも保存されません。
必要なポイント
このツールは無料です。ログインもポイントも必要ありません。
よくある質問
- CSS の修正や検証はしてくれますか？
- いいえ。変えるのは空白だけなので、セミコロンの抜けやプロパティ名のスペルミスは、整形されても壊れたままです。ただ、すべての宣言がそれぞれ 1 行になるため、そうした間違いは見つけやすくなります。
- SCSS や Less に対応していますか？
- 部分的に対応しています。js-beautify の CSS モードは、ネストや SCSS、Less の構文の大半を、読むには十分な程度に扱えますが、複雑な引数を持つミックスインや一部の補間は空白がおかしくなることがあります。コミットするソースファイルには、SCSS パーサーを使う Prettier のほうが安全です。
- 整形するとページの見た目が変わることはありますか？
- 変わらないはずです。宣言の間やセレクターの前後の空白は描画に影響しません。唯一の例外は、空白の正確な位置に依存するまれな古いブラウザハックで、現代のスタイルシートにはもう含まれていません。
背後にあるオープンソース
このツールは beautifier/js-beautify（MIT）の上で動作しています。同じ処理を自分のプログラムに組み込みたい場合は、そのライブラリを使ってください。
beautifier/js-beautify別の呼び方
- css 整形
- css beautifier
- css 圧縮 解除
- css 整形 オンライン
- css フォーマッター
- css 見やすく