CSS整形 — CSSの美化・圧縮

CSSをきれいなインデントで整形、または最小サイズに圧縮。スタイルシートを貼り付けて美化と圧縮を切り替え、結果をコピー。すべてブラウザ内で完結します。

🔒 すべてあなたのブラウザ内で動作します。入出力データはサーバに送信・保存されないため安全です。

このツール、役に立った?タップでリアクション

このツールについて

CSSをきれいに整えることも、サイズを小さくすることも、すべてブラウザ内でできます。整形(ビューティファイ)モードは、各ルールとプロパティを1行ずつに割り当てて再インデントし、スタイルシートを読みやすく保守しやすくします。一方、圧縮(ミニファイ)モードは、コメント・改行・余分な空白を取り除き、本番環境向けにできるだけ小さなファイルを生成します。CSSを貼り付けて方向を選び、結果をコピーまたはダウンロードしてください。何もアップロードされず、スタイルはすべてご自身の端末内で処理されます。

よくある質問

整形(ビューティファイ)と圧縮(ミニファイ)の違いは何ですか?

両者は正反対です。整形は、インデント・改行・スペースを加えて、人がスタイルシートを快適に読み書きできるようにします。圧縮は、コメント・改行・余分なスペースといったブラウザに不要なものを取り除き、ファイルをできるだけ小さくして、公開中のサイトでの読み込みを速くします。整形したCSSを作成・保管し、デプロイ用にはそのコピーを圧縮する、という流れが一般的です。

圧縮するとコメントが消えたり、スタイルが壊れたりしますか?

圧縮するとコメントはすべて削除され、空白も詰められます。そのため、唯一の控えを圧縮してはいけません。読みやすいソースファイルを残し、そこから圧縮してください。スタイル自体が壊れることはなく、セレクタ・プロパティ・値はそのまま保持され、クラス名の変更やカスケードの変更も行いません。結果は密で読みにくく見えますが、ブラウザはまったく同じように適用します。

入力したCSSはアップロードされますか?

いいえ。整形も圧縮も、すべてブラウザ内で実行されるため、貼り付けたCSSは端末内にとどまり、サーバーに送信されることはありません。未公開のデザインや社内向けのスタイルシートでも、コードが手元から外に出る心配なく使えます。