CSS整形・圧縮ツール

CSS整形・圧縮ツールの機能

このツールは、CSSコードを整形（ビューティファイ）または圧縮（ミニファイ）するための軽量なテキストフォーマッタです。ブラウザ内で処理が完結し、ファイルのアップロードは不要です。

整形の動作

整形では、余分な空白を削除し、波括弧やセミコロンの周りで改行を挿入して、ブロックの深さに応じてインデントを付けます。例えば、body{color:red;margin:0;} という入力は、次のように読みやすく整形されます。

body {
    color: red;
    margin: 0;
}

圧縮の動作

圧縮では、ブロックコメントを削除し、波括弧、コロン、セミコロン、カンマの周りの空白を削除します。また、閉じ波括弧の直前にあるセミコロンも削除します。例えば、上記の整形結果を圧縮すると、body{color:red;margin:0} のようになります。

制限と注意点

このツールは完全なCSSパーサーやバリデータではありません。複雑な文字列、カスタムプロパティ値、データURL、ディレクティブとして使われるコメント、または不正なCSSは、ブラウザやビルドパイプラインで確認する必要があります。また、プロパティの並べ替え、ベンダープレフィックスの追加、互換性のテスト、セレクタの修正は行いません。圧縮結果がすべてのエッジケースで意味的に同じであることを保証するものではありません。

FAQ

Q1: 入力サイズの制限はありますか？

はい、1回の入力は最大500,000文字までです。それ以上のCSSを処理する必要がある場合は、分割して処理してください。

Q2: 圧縮するとコメントはどうなりますか？

圧縮ではブロックコメント（/* ... */）は削除されます。ただし、コメントがディレクティブとして使われている場合（例: /*! ... */）は、そのまま残る可能性がありますが、このツールはそのようなコメントを特別に扱いません。

Q3: このツールはCSSのエラーを修正しますか？

いいえ、このツールはテキストの整形と圧縮のみを行います。CSSの構文エラーやセレクタの問題を修正することはありません。処理前にCSSが有効であることを確認してください。

チェックリスト

• CSSコードを貼り付ける
• インデントスタイルを選択する
• 整形または圧縮を実行する
• 結果をコピーする
• 複雑なCSSはブラウザで検証する