CSS フォーマッター

CSS フォーマットについて

圧縮は空白、コメント、冗長な文字を取り除いてファイルサイズを削減します。整形はインデント付きで 1 行 1 ルールのスタイルに展開し直し、見やすく編集しやすくします。

ここでの圧縮は空白の除去だけにとどまりません。値も最短の同等表現に書き換えられ、background-color: white は background-color:#fff に、color: #ff0000 は color:red に、バイト数が少ない方に置き換わります。どのルールが実際のページに適用されるかは解析しません。それは「未使用 CSS の削除」や tree-shaking と呼ばれる別の作業で、HTML と JavaScript を把握して何が不要かを判断する必要があり、このツールは書いたルールをすべて保持します。コメント削除の例外が一つあり、/*! で始まる「バング・コメント」は意図的に保持されます。これはライセンス表示を圧縮後も残すためにビルドツールが使う慣習です。

使われる場面

• 本番環境にデプロイする前にスタイルシートを縮小する
• 圧縮された CSS ファイルを展開して読みやすくしたり編集したりする
• ブラウザの検証パネルからコピーしたスタイルを整理する
• CSS の差分を確認する前に書式を統一する

よくある質問

圧縮するとページの見た目が変わりますか？
いいえ。取り除かれるのは空白とコメントだけで、すべてのセレクタ、プロパティ、値は書かれたとおりに残ります。

SCSS や LESS には対応していますか？
いいえ、プレーンな CSS のみです。SCSS や LESS は先に CSS にコンパイルしてください。

スタイルシートは保存されますか？
いいえ。変換はその 1 回のリクエストのためだけにサーバー上で行われ、その後は何も保持されません。

ページで実際には使われていない CSS ルールを削除してくれますか？
いいえ。それは別の作業で、通常「未使用 CSS の削除」や tree-shaking と呼ばれ、実際の HTML や JavaScript と CSS を突き合わせてどのセレクターが実際に一致するかを知る必要があります。このツールは空白や冗長な構文を取り除き、値を最小の同等表現に短くするだけで、書いたルールはすべてコンパクトになって出てきます。圧縮後もコメントを残したい場合（ライセンス表示など）は、/* ではなく /*! で始めれば保持されます。