CSSフォーマッタの使い方｜整形で読みやすく、圧縮で軽くする
公開日：2026年10月15日 更新日：2026年9月15日 運営：シルギア（アナライズギア株式会社） 対象ツール：CSSフォーマッタ（整形・圧縮）
CSSは書きっぱなしにすると、1行に詰め込まれてしまったり、字下げがバラバラで読みにくくなったりしがちです。逆に本番配信時は、余計な空白やコメントがそのままだとファイルが少しずつ重くなります。このツールは、貼り付けたCSSを「整形」（読みやすく字下げ）と「圧縮（minify）」（空白・コメントを削る）の2方向に変換します。どちらもブラウザに適用される見た目は変わらず、変わるのは体裁とサイズだけです。
整形と圧縮は目的が正反対の2モード
まずモードを選びます。人が読んで直したいときは「整形」、公開して配信を軽くしたいときは「圧縮」です。整形はセレクタごとに { を開き、宣言を1行ずつ字下げして } で閉じる、いわゆる beautify です。圧縮はその逆で、意味を変えない範囲の改行・空白・コメントを取り除いてファイルを最小化します。用途がはっきり分かれているので、開発中は整形、公開直前に圧縮、と使い分けるのが基本です。圧縮モードでは入力と出力のサイズ、削減率のめやすも表示されます。
整形の考え方：宣言を1行ずつ並べる
整形の中心は「1宣言＝1行」に揃えることです。各宣言はプロパティ: 値; の形に空白が整えられ、コロンの後ろには必ず半角スペースが1つ入ります。たとえば color:#fff は color: #fff に、値の中の連続空白も1つに詰められます。インデント幅はスペース2つ・スペース4つ・タブの3種類から選べるので、EditorConfigやPrettierなどプロジェクトの規約に合わせられます。次のような詰まったCSSを見てみましょう。
- 入力：.btn{color:#fff;background:blue;padding:8px 16px}
これを2スペース整形すると、.btn { の下に color: #fff;、background: blue;、padding: 8px 16px; が2文字ずつ字下げして並び、最後に } が来ます。1行に潰れていた3つの宣言が縦に並ぶだけで、どこを直せばよいかが一目で分かるようになります。
@media などネストは深さに応じて字下げ
CSSは @media や @supports のように、ブロックの中に別のルールを含むことがあります。整形はこのネストの深さを数え、外側の@ルールから内側のセレクタ、その中の宣言へと1段ずつ字下げを深くしていきます。たとえば @media (max-width: 600px){.btn{padding:4px 8px}} を整形すると、@media (max-width: 600px) { の中に .btn { が1段、その中の padding: 4px 8px; がさらに1段深く字下げされ、閉じ括弧も対応する深さに戻ります。どのルールがどの条件の中にあるか、字下げの段差だけで階層がつかめるわけです。CSS変数（--x: 1px;）やネイティブの入れ子セレクタも、波括弧とセミコロンで区切られていれば概ね同じように整います。
コメント・文字列・calc()の空白は壊さない
圧縮でありがちな事故が、消してはいけない空白まで詰めてしまうことです。このツールは構造の手がかりを波括弧・セミコロン・コロン・カンマに限り、それ以外の記号のまわりの空白は残します。とくに calc() では + や − の前後の空白に意味があり、calc(100% - 20px) の空白を消すと式が無効になります。圧縮しても詰めるのは { } : ; , の周りと余分な連続空白だけなので、この計算式はそのまま保たれます。さらに "..." や '...' の文字列、url(...) の中身は逐語的に保護されるため、content: "a; b" の値の中のセミコロンを区切りと誤認したりしません。コメント（/* ... */）は、整形ではそのまま残し、圧縮では削除します。
実際の整形・圧縮の例で確かめる
先ほど整形した3宣言のブロックを、今度は圧縮モードにかけると、改行と字下げがすべて消え、} の直前の不要なセミコロンも落ちて .btn{color:#fff;background:blue;padding:8px 16px} の1行に戻ります。計算を含む例では .box{width:calc(100% - 20px);margin:0 auto} のように、calc の中の空白と 0 auto の間の空白だけがきちんと残ります。整形と圧縮は往復できるので、圧縮された配布CSSを整形して読み、直したらまた圧縮する、という使い方ができます。結果は「結果をコピー」でクリップボードにまとめて取り出せます。
簡易パーサの限界と使いどころ
このツールは正規のCSSパーサではなく、波括弧・セミコロン・コロンを手がかりにした簡易パーサ（best-effort）で動きます。閉じ忘れの } やセミコロン抜けがあっても止めずに可能な範囲で処理しますが、自動修復はしません。SCSS/LESSの @mixin、// 行コメント、補間 #{...} といったプリプロセッサ独自の記法は正確に扱えないことがあるため、純粋なCSSでの利用を想定してください。構文の正しさが必要なときは、ブラウザの開発者ツールや専用のCSS Linterを併用し、出力は必ず元と見比べて確認しましょう。使いどころは明快で、他人のCSSを読むときや自分のコードを直す前は整形で可読性を上げ、公開して転送量を抑えたいときは圧縮で軽くする。処理はすべてブラウザ内で完結し、貼り付けたCSSはどこにも送信されず、オフラインでも使えます。