💅 CSSフォーマッタ（整形・圧縮）
CSSを貼り付けて、読みやすく整形するか、空白・改行・コメントを取り除いて圧縮（minify）します。@media などのネストしたブロックは階層に合わせてインデントし、コメントや文字列・url()・calc() の中身は保護します。処理はすべてブラウザ内で完結します。
入力
整形結果
解説
CSSは書きっぱなしだと1行に詰め込まれたり、インデントがバラバラになったりして読みにくくなりがちです。本ツールは、貼り付けたCSSを2つの向きに変換します。ひとつは「整形」で、セレクタごとに { を開き、各宣言（プロパティ: 値;）を1行ずつ字下げして並べ、} で閉じます。もうひとつは「圧縮（minify）」で、意味を変えない範囲の空白・改行・コメントを取り除いてファイルを小さくします。用途に応じて使い分けてください。
整形モードでは、インデント幅をスペース2つ・4つ・タブから選べます。@media や @supports のように中に別のルールを含むブロックは、ネストの深さに合わせて段階的に字下げされるため、どのルールがどの条件の中にあるかが一目で分かります。宣言は「プロパティ: 値;」の形に空白を整え、コロンの後ろに半角スペースを1つ入れて統一します。コメント（/* ... */）はそのまま残します。
圧縮モードでは、余分な空白・改行・コメントを除去し、「: 」を「:」に詰めるなどして最小化します。各ブロックの最後の ;（} の直前のセミコロン）は不要なので取り除きます。一方で calc(1px + 2px) の + や - の前後の空白は意味を持つため、これらは詰めずに残します。整形と圧縮の違いは見た目とサイズだけで、ブラウザに適用される見た目（レンダリング結果）は基本的に同じです。
このツールは正規のCSSパーサではなく、波括弧・セミコロン・コロンを手がかりにした簡易パーサで動きます。文字列（"..." / '...'）やコメント、url()・calc() など丸括弧の内側は構造の区切りとして扱わないよう保護しますが、極端に壊れたCSSや特殊な記法では意図どおりにならないことがあります（best-effort）。処理はすべて端末内（ブラウザ内）で行い、貼り付けた内容はどこにも送信されません。オフラインでも利用できます。
よくある質問
「整形」と「圧縮」はどう違いますか？
整形は、改行と字下げを加えて人が読みやすい形にします。圧縮（minify）は逆に、空白・改行・コメントを取り除いてファイルを小さくし、配信を軽くするための形にします。どちらもブラウザに与える見た目（適用結果）は基本的に同じで、変わるのは体裁とサイズだけです。
@media などのネストしたブロックも整形されますか？
はい。@media や @supports のように中に別のルールを含むブロックは、ネストの深さに応じて段階的にインデントされます。外側の @ルールから内側のセレクタ、その中の宣言へと、字下げが1段ずつ深くなるので階層が把握しやすくなります。
コメントや文字列は消えたり壊れたりしませんか？
整形ではコメント（/* ... */）はそのまま保持します。圧縮ではコメントは削除しますが、"..." や '...' の文字列、url(...) の中身は逐語的に保護するため、内部の空白や記号は変更しません。content: "a; b" のような値の中のセミコロンも区切りとは見なしません。
圧縮で calc() の計算が壊れませんか？
calc() では + と - の前後の空白に意味があります（calc(1px + 2px) の空白を消すと無効になります）。本ツールはこれらの記号のまわりの空白は詰めずに残すので、計算式は保たれます。詰めるのは { } : ; , のまわりや余分な連続空白だけです。
インデントの幅は変えられますか？
整形モードで、スペース2つ・スペース4つ・タブの3種類から選べます。プロジェクトのコーディング規約（EditorConfigやPrettierの設定）に合わせて選んでください。圧縮モードではインデントは使わないため、この設定は無視されます。
SCSSやLESS、CSS変数・入れ子セレクタにも対応していますか？
波括弧とセミコロンで区切る構造であれば、CSS変数（--x: 1px;）やネイティブの入れ子セレクタは概ね整形できます。ただしSCSS/LESSの @mixin・// 行コメント・補間 #{...} などのプリプロセッサ独自記法は正確に扱えないことがあります。純粋なCSSでの利用を想定した簡易ツールです。
壊れたCSSを入れるとどうなりますか？
閉じ忘れの } やセミコロン抜けがあっても、可能な範囲でそのまま処理します（best-effort）。エラーで止めたり自動修復したりはしないため、構文チェックが必要な場合はブラウザの開発者ツールや専用のCSS Linterを併用してください。出力は必ず元と見比べて確認することをおすすめします。
入力したCSSはサーバーに送られますか？
送られません。整形・圧縮はすべてブラウザ内のJavaScriptで完結し、貼り付けた内容はどこにも送信されません。ネットワークを切った状態（オフライン）でも利用できます。