✨ CSS フォーマッター
入力
出力
崩れたCSSコードを整形して読みやすくしたり、逆に圧縮してファイルサイズを小さくしたりできるツールです。インデント幅(スペース2/4・タブ)や「{ を同じ行に置くか」といったスタイルを選べます。他人が書いた最小化済みCSSの中身を確認したいときや、本番公開前にファイルサイズを削減したいときに便利です。
使い方
- 整形または圧縮したいCSSコードを入力欄に貼り付けます。
- インデント幅や「{ の位置」などのスタイルを選びます。
- 「整形」または「圧縮」ボタンを押すと、右側に結果が表示されます。
- 「コピー」ボタンで結果をクリップボードにコピーします。
よくある質問
SCSSやLESSにも対応していますか?
基本的なCSS構文を想定しています。SCSS/LESS特有のネスト構文などは正しく整形されない場合があります。
圧縮(Minify)するとどれくらい軽くなりますか?
コメントや余分な空白・改行が削除されるため、元のコード量やコメントの多さによりますが、一般的に10〜30%程度ファイルサイズが小さくなります。
他人が書いた圧縮済みCSSを読みやすくできますか?
はい。1行にまとめられた圧縮済みCSSを貼り付けて「整形」を実行すると、インデント付きの読みやすいレイアウトに変換されます。
入力したCSSはサーバーに送信されますか?
いいえ、整形・圧縮処理はすべてブラウザ内で行われ、外部に送信されることはありません。
タブとスペース、どちらのインデントを選べばいいですか?
チームやプロジェクトのコーディング規約に合わせるのがおすすめです。特に指定がなければスペース2つが一般的です。