CSS 整形の仕組み
ビューティファイアはスタイルシートを 1 文字ずつ読み取り、各ブロックのネスト深度を追跡しながら、一貫した間隔で再出力します。スタイルの動作は一切変えず、見た目だけを整えます。
- トークナイズ. ライブラリはセレクター・プロパティ名・値・at ルール・コメント、そしてそれらを区切るブレース・コロン・セミコロンというトークンのストリームに入力をスキャンします。文字列と url() の値は単一の単位として認識されるため、content プロパティ内のブレースがブロック区切り記号と誤解されることはありません。
- ネストの追跡. トークンストリームを走査しながら、ビューティファイアはインデントレベルをリアルタイムで管理します。開き波括弧が現れるとレベルが深くなります——ルールブロック・メディアクエリー・キーフレームブロックのいずれでも同様です——そして対応する閉じ括弧でレベルが戻ります。この深度が各行の先頭に付くインデント数を決めます。
- オプションの適用. インデントの選択（スペース 2 つ・スペース 4 つ・タブ）が 1 レベルの幅を決めます。ブレーススタイルは開き括弧を直前のセレクターに続けるか独立行に置くかを決めます。残りのトグルはルールブロック間に空行を追加し、グループ化されたセレクターを個別の行に分割します。
- 再出力. 最後にフォーマッターが、計算済みのインデントと改行でトークンを出力します。各宣言は 1 行に 1 つ、各コロンの後にスペースを 1 つ置いて出力されます。結果は同じスタイルシートが、人間がカスケードをスキャンできる形に整えられたものです。
CSS を整形する理由
- 圧縮スタイルシートを読む. 本番 CSS は一行で出荷され、ルール間に間隔がありません。整形すれば改行とインデントが復元され、ソースマップがなくてもレイアウトバグの原因となるセレクターを特定し、その宣告内容を確認できます。
- 不揃いなファイルを整頓. 複数人が触れたスタイルシートはインデントとブレーススタイルが混在しがちです。一度整形するだけでファイル全体を統一レイアウトに揃えられ、次回の差分では空白の乱れではなくカスケードの変化だけが見えるようになります。
- このツールはページを重くしません. 多くのオンラインフォーマッターはページを開いた瞬間にライブラリ全体を読み込みます。このツールは「整形」をクリックするかライブモードをオンにしたときだけ js-beautify を遅延ロードします。そのため初回表示は数百 KB ではなく数 KB で済み、初期レンダリングが速く保たれます。
- コードはブラウザーの外に出ません. ビューティファイアはあなたのデバイス上で完結します。CSS はサーバーへ送信されません。点検するスタイルシートがクライアントのものであったり、内部クラス名を含んでいたり、秘密保持契約の対象であったりする場合に重要なポイントです。
主な用途
可読性を前提とせず書かれたスタイルシートを読む必要があるとき、いつでも CSS の整形が役立ちます。
- 本番デバッグ：Network タブから取得した圧縮スタイルシートを貼り付け、期待通りのレイアウトを崩しているルールを見つける。
- コードレビュー準備：インデントが不揃いな貢献者のスタイルシートを PR 提出前に整形し、レビュアーが空白の乱れではなくカスケードの変化を見られるようにする。
- 学習・監査：フレームワークやコンポーネントライブラリのスタイルシートを展開し、セレクター・メディアクエリー・カスタムプロパティの構造を調べる。
実践的な例
圧縮された一行コードを試してみましょう：a{color:red;margin:0}b{padding:0}。インデントをスペース 2 つ・ブレーススタイルを「同行（Collapse）」に設定して上に貼り付け、整形ボタンを押してください。読みやすいブロックが返ってきます：a { が独立行に、color: red; と margin: 0; 宣言がそれぞれ一段深くインデントされ、閉じ括弧がセレクターの下に揃い、b ルールがその下に続きます。ブレーススタイルを「改行（Expand）」に切り替えると、各開き括弧が独立行に移ります。インデントをタブに変えると、スペース 2 つがタブ文字に置き換わります。スタイルはまったく同じで、レイアウトだけが変わります。
FAQ
これはブラウザーで動きますか？
はい。js-beautify ライブラリは「整形」をクリックするかライブモードを有効にした最初の 1 回だけ遅延ロードされ、その後はキャッシュされます。CSS はページを離れません——サーバーへの通信もアップロードもありません。
整形とアンミニファイは同じですか？
可読なフォーマット（インデント・改行・間隔）は復元できますが、ミニファイ時に削除されたコメントや、ファイルに存在しなかった構造は取り戻せません。ファイルに残っている宣言とセレクターを再フォーマットするだけです。
整形するとスタイルのレンダリングが変わりますか？
変わりません。整形は空白と改行の追加・削除のみを行い、カスケードはそのままでページはまったく同じようにレンダリングされます。プロパティの順序・詳細度・値はすべて書いたとおりに保たれます。
ブレーススタイルのオプションとは何ですか？
「同行（Collapse）」は開き括弧をセレクターと同じ行に置きます（a {）——CSS では一般的なスタイルです。「改行（Expand）」はすべての開き括弧を独立した行に置きます。空行と 1 セレクター 1 行のトグルは、ルールブロック間の間隔と h1, h2, h3 のようなグループ化されたセレクターのレイアウトを制御します。
ブラウザーサイドの CSS 整形は、ビルドステップやアップロードなしで可読なスタイルシートを提供します。圧縮または雑然としたファイルを貼り付け、インデントとブレーススタイルを選び、結果をコピーまたはダウンロードしてください。コードはデバイスの外に出ず、アカウントも不要で、ライブラリはあなたが要求したときだけ読み込まれます——このページを開くコストは数キロバイトであり、数メガバイトではありません。