CSS整形・圧縮ツール
CSSを再び読みやすくするか、サイトを速くするために小さくします。
CSS整形・圧縮の使い方
CSSを貼り付け
スタイルシートを貼り付けるか、.cssファイルを開くかドロップします。入力と同時に整形されます。
整形か圧縮を選ぶ
整形では各ルールとプロパティを1行ずつに分けます。圧縮ではコメント、空白など、ブラウザに不要なものを取り除きます。
コピーまたはダウンロード
結果をコピーするか、.cssファイルとしてダウンロードします。圧縮すると圧縮前後のサイズが表示されます。
Utils365が選ばれる理由
空白を消すだけではない
#ff0000をredにするなど色を短くし、0の単位を省き、空のルールも削除します。
ルールの順番はそのまま
ルールを結合したり移動したりしないので、カスケードは以前とまったく同じに働き、意図しない上書きは起きません。
ライセンスコメントを保持
/*! で始まるコメントは、多くのオープンソースライセンスが求めるとおり、圧縮後のファイルにも残ります。
プライバシーを守る設計
CSSはブラウザ内で整形され、アップロードされません。
よくある質問
CSSを圧縮するとどのくらい小さくなりますか？
通常は15〜30%で、コメントが多いスタイルシートならさらに小さくなります。圧縮前後の正確なサイズと削減率がまとめて表示されます。
圧縮でスタイルが崩れることはありますか？
崩れないように作られています。値は同じ意味になる形にだけ書き換え、ルールの順番も保つので、どのルールが優先されるかは変わりません。
圧縮されたCSSを元に戻すには？
圧縮されたCSSを貼り付けて「整形」を選んでください。すべてのルールとプロパティが、選んだインデントで1行ずつに分かれます。削除されたコメントは戻せません。
SCSSやLessにも使えますか？
整形はネストも含めてほとんどのSCSSとLessに対応しています。圧縮は通常のCSSを前提としているので、SCSSやLessは先にコンパイルしてください。