CSSのコメントと余分な空白を削除して圧縮する方法
CSSを入力欄に貼り付けて実行すると、コメントや指定された空白などが整理され、よりコンパクトなテキストになります。変換後の長さや削減率も確認できます。
CSSをコンパクトに整える用途
CSSのコメントや一部の余分な空白を取り除き、テキストをよりコンパクトに整えたいときに使えます。入力欄にCSSテキストを貼り付けると、コメントの削除、記号の周囲にある空白の整理、連続する空白の圧縮などが行われます。空白だけの入力も受け付けますが、その場合は空の結果になります。
CSSを変換する手順
- CSSテキストを用意し、入力欄に貼り付けます。入力は任意なので、空欄のままでも処理できます。
- 実行操作を行い、変換後のテキストを確認します。ブロックコメントは取り除かれ、波括弧、セミコロン、コロン、カンマの周囲にある空白が整理されます。残った連続する空白は1つにまとめられ、先頭と末尾の空白も削除されます。
- 変換後のCSSを確認してから、必要な場所へコピーします。閉じ波括弧の直前にあるセミコロンも削除されます。
- 表示された数値を確認します。空欄または空白だけの入力では、元のサイズと変換後のサイズがともに0になります。内容がある入力では、入力文字列の長さ、変換後の長さ、差分、1桁の小数に丸めた削減率が表示されます。
結果の見方と確認点
変換後のテキストは、コメントや指定された空白、閉じ波括弧の直前のセミコロンが除かれた形になります。表示される差分は入力と変換後の文字列の長さの差で、削減率はその比較を1桁の小数に丸めた値です。そのため、削減率が小さい場合でも処理が失敗したとは限りません。空欄の結果で数値が0になるのは、空の入力に対する動作です。
変換後は、意図したセレクター、プロパティ、値が残っているかを確認してください。空白の整理だけでなくコメントや末尾のセミコロンも変わるため、読みやすい元ファイルを別に保管したうえで、必要に応じて変換後の内容を確認して利用します。
使用例
コメントと記号周辺の空白を含むCSSを入力し、変換後のテキストとサイズ情報を確認します。
入力欄にCSSを貼り付けて実行し、コメントがなくなり、記号周辺の空白が整理された変換後テキストと数値を確認します。
変換後のCSSテキストと、入力文字列の長さ、変換後の長さ、差分、1桁の小数に丸めた削減率が表示されます。
制限事項
- 確認されているのは、コメント、指定箇所の空白、連続する空白、先頭末尾の空白、閉じ波括弧直前のセミコロンを対象にしたテキスト変換です。CSS全体の構文を検証したり、あらゆるCSS記法を解析したりする処理としては扱わず、変換後の内容を確認してください。
よくある間違い
- 入力欄にCSSを貼り付けず、空欄や空白だけの状態で実行すると、成功しても出力は空で数値は0になります。変換したいCSSテキストを入力してから実行してください。
よくある質問
CSSを入力しなくても実行できますか？
空欄または空白だけの入力は正常に処理されますが、結果は空で、元のサイズと変換後のサイズは0です。CSSを変換する場合は、入力欄にテキストを貼り付けてください。
どのような部分がCSSから削除・整理されますか？
ブロックコメントを削除し、波括弧、セミコロン、コロン、カンマの周囲にある空白を整理します。さらに、連続する空白を1つにまとめ、先頭と末尾の空白を削除し、閉じ波括弧の直前のセミコロンも取り除きます。
削減率はどのように表示されますか？
内容がある入力では、入力文字列の長さ、変換後の長さ、両者の差分、1桁の小数に丸めた削減率が表示されます。空欄または空白だけの場合は、両方のサイズが0になります。