✨ CSS フォーマッター
崩れたCSSコードを整形して読みやすくしたり、逆に圧縮してファイルサイズを小さくしたりできるツールです。インデント幅(スペース2/4・タブ)や「{ を同じ行に置くか」といったスタイルを選べます。他人が書いた最小化済みCSSの中身を確認したいときや、本番公開前にファイルサイズを削減したいときに便利です。
使い方
- 整形または圧縮したいCSSコードを入力欄に貼り付けます。
- インデント幅や「{ の位置」などのスタイルを選びます。
- 「整形」または「圧縮」ボタンを押すと、右側に結果が表示されます。
- 「コピー」ボタンで結果をクリップボードにコピーします。
計算の仕組み
整形では、CSSを「{」「}」「;」で区切って、セレクタと宣言（プロパティ: 値）に分解し、入れ子の深さに応じてインデントを付けながら並べ直しています。「:」の後には空白を1つ入れて揃えます。コメント（/* */）は整形の前にいったん取り分けておき、整形後に元の位置に戻しています。 圧縮（Minify）では、次の順に処理しています。コメントを削除し、連続する空白や改行を1つの空白にまとめ、「{」「}」「:」「;」「,」の前後の空白を取り除き、最後に「;}」を「}」にします（ブロックの最後の宣言のセミコロンは省略できるため）。ブラウザはCSSの空白やコメントを表示に使わないので、これらを取り除いても見た目は変わりません。
計算例
次のCSSを圧縮する場合 /* 見出し */ h1 { color: #333; margin: 0 auto; } 圧縮後 h1{color:#333;margin:0 auto} コメントと改行が消え、最後の宣言の後のセミコロンも省かれます。「0 auto」の間の空白は値の区切りとして必要なため残ります。
使用上の注意
- 圧縮では「:」の前後の空白も取り除きます。「.menu :hover」のように、空白に意味があるセレクタ（子孫セレクタ）では意味が変わってしまうので注意してください。
- 圧縮では、content: "a b" のような文字列内の連続した空白も1つにまとめられます。
- SCSSやLESSのネストなどの独自構文は正しく整形されない場合があります。
- 整形・圧縮はブラウザ内で行われ、コードが外部に送信されることはありません。
よくある質問
SCSSやLESSにも対応していますか?
基本的なCSS構文を想定しています。SCSS/LESS特有のネスト構文などは正しく整形されない場合があります。
圧縮(Minify)するとどれくらい軽くなりますか?
コメントや余分な空白・改行が削除されるため、元のコード量やコメントの多さによりますが、一般的に10〜30%程度ファイルサイズが小さくなります。
他人が書いた圧縮済みCSSを読みやすくできますか?
はい。1行にまとめられた圧縮済みCSSを貼り付けて「整形」を実行すると、インデント付きの読みやすいレイアウトに変換されます。
入力したCSSはサーバーに送信されますか?
いいえ、整形・圧縮処理はすべてブラウザ内で行われ、外部に送信されることはありません。
タブとスペース、どちらのインデントを選べばいいですか?
チームやプロジェクトのコーディング規約に合わせるのがおすすめです。特に指定がなければスペース2つが一般的です。