CSS整形 - 無料オンラインツール

機能

整形と圧縮を切り替え

プロパティを並べ替え

重複を削除

使い方

1. 左側の入力ボックスにCSSを貼り付けます。

2. 「整形」で見やすく整形、「圧縮」で圧縮します。

3. 右側のパネルから整形結果をコピーします。

このツールについて

圧縮された CSS や何人もが手を入れた CSS はレビューしにくく、1行にまとまっていると重複ルール、セミコロンの抜け、上書きが見えなくなります。このフォーマッターはスタイルシートを1宣言1行に組み直し、スペース2つ・スペース4つ・タブで一貫したインデントを付けます。文字列、コメント、@media や @supports などの入れ子のブロックはそのまま保たれます。「圧縮」はその逆で、本番環境向けにコメントや不要な空白を取り除いて転送量を減らします。コードを貼り付けるか .css ファイルをドラッグし、結果をコピーまたはダウンロードできます。整形で変わるのは見た目だけで、ルールの順序や意味はまったく変わらないので、カスケードも以前と同じように動作します。

よくある質問

整形すると CSS の動作は変わりますか？

変わりません。フォーマッターが変えるのは空白と改行だけです。セレクター、宣言、その順序は保たれるので、詳細度もカスケードも以前とまったく同じです。

CSS を圧縮するとどれくらい小さくなりますか？

コメントと空白を取り除くと、手書きのスタイルシートは通常 15～30% 小さくなります。gzip や Brotli で圧縮して配信するとさらに大きく削減できるので、本番では両方を使ってください。

@media、@supports、入れ子のルールに対応していますか？

対応しています。@ ルールや入れ子のブロックは階層ごとにインデントされ、中身も通常のルールと同じように整形されるので、メディアクエリも読みやすいままです。

コメントは残りますか？

整形ではブロックコメントを残し、それぞれ独立した行に置きます。圧縮ではブラウザーに不要なのでコメントを削除します。

フォーマッターは CSS のエラーをチェックしますか？

プロパティ名や値は検証しません。受け取った内容を整形するだけなので、colr: red のようなタイプミスはそのまま残ります。ミスの検出にはエディターや Stylelint などのリンターを使ってください。

CSS整形＆ビューティファイア

機能

使い方

このツールについて

よくある質問

関連ツール