開発者ツール

CSS圧縮ツール

CSSコードからブロックコメントや余分な空白、末尾のセミコロンを削除し、ファイルサイズを削減するオンライン圧縮ツールです。

ツールを実行

CSSコードに含まれるブロックコメントや余分な空白を削除し、軽量なテキスト形式へと整形するツールです。波括弧やセミコロン、コロン、カンマ周辺の余白を詰め、連続する空白を1つの半角スペースに統一します。さらに、閉じ波括弧の直前にある末尾のセミコロンを自動的に取り除きます。変換を実行すると、元の文字数、変換後の文字数、削減された文字数、および削減率が画面に表示され、圧縮効果を確認できます。入力欄が空または空白のみの場合は、サイズ0として処理されます。ウェブサイトのスタイルシートを素早くスリム化したい場面や、手作業での不要文字削除の手間を省きたいときに役立ちます。

使い方

  1. 入力欄に圧縮したいCSSコードを貼り付けるか入力します。
  2. 実行ボタンをクリックしてCSSの圧縮処理を開始します。
  3. 結果欄に表示された圧縮後のCSSコードと、文字数および削減率を確認します。
  4. 必要に応じて圧縮結果のテキストをコピーして利用します。

使用例

  • 入力例: /* ヘッダーのスタイル */ header { margin: 0px 10px; color: #333333; } 出力例: header{margin:0px 10px;color:#333333}(コメントや改行が削除され、末尾のセミコロンも除去されます)
  • 入力例: .card { padding: 16px; background-color: #ffffff; } 出力例: .card{padding:16px;background-color:#ffffff}(セレクタとプロパティ周辺の余白が圧縮されます)

よくある質問

コメントはすべて削除されますか?

はい、/* ... */ 形式のブロックコメントは圧縮処理の段階で削除されます。

末尾のセミコロンが消えるのは仕様ですか?

はい、閉じ波括弧の直前にあるセミコロンは冗長な文字として自動的に削除されます。

空のテキストを入力した場合はどうなりますか?

入力が空または空白文字のみの場合、エラーにはならず、出力も空のテキストとなり、文字数および削減率は0として表示されます。

このツールを埋め込む

以下のコードを使って、SmartPlusLab のツールをウェブサイトに追加できます。