CSS 圧縮・整形ツール
本番環境用にCSSを圧縮、または可読性のために整形（100% クライアントサイド）
CSS圧縮・整形ツールドキュメント
このツールとは？
CSS圧縮は、スタイルシートの動作を変えずに構文的に不要な文字を削除します：ルール間の空白・改行・CSSコメント（/* ... */）・閉じ括弧前の余分なセミコロン。美化ツールは逆処理を行い、インデントと改行を追加して可読性を回復します。
主な機能
- 空白・コメント削除：ルール間の空白・改行・/* */コメントをすべて除去。文字列リテラル（font-family: “Courier New”）とurl()値は保持。“Preserve Comments”有効時は/*! ... */ライセンスコメントを保持。
- セレクタ・宣言圧縮：セレクタ内の複数スペース折りたたみ（div > span化）、}前セミコロン削除、0px→0・0.5→.5などの数値正規化。
- 美化インデント設定：2スペース・4スペース・タブ対応。1ルール1行、宣言は個別縮排行。@media/@keyframes/ネストセレクタ構造保持。
- CSSカスタムプロパティ対応：var()式やcalc()内の空白は圧縮しない（calc(2px + 3px)のスペース除去はブラウザによって解析破壊の可能性）。
- ファイルサイズ差表示：元のバイト数・圧縮後バイト数・圧縮率を出力横に表示。CSS最適化のページ重量への影響を定量化。
一般的な使用例
- 本番ビルドパイプライン：Webpack（css-minimizer-webpack-plugin）、Vite（Lightning CSS内蔵）またはGulp（gulp-clean-css）の後処理として統合。
- 圧縮済みサードパーティCSSのデバッグ：Bootstrap 5 bootstrap.min.cssやTailwindの出力を貼り付けてルール構造・詳細度チェーンを解析。
- レガシースタイルシートの整理：インデント不統一・引用符スタイル混在の手書きCSSをリファクタリング前に正規化。
- CDN/エッジキャッシュ削減：圧縮CSSで総転送バイトを削減しLCPスコアを改善。非事前圧縮スタイルシートで20〜50%削減。
このツールの処理方法
空白の削除
不要なスペース、改行、タブをすべて削除します。CSSルールは機能に影響を与えることなく1行に圧縮されます。例：`.btn { color: red; }` が `.btn{color:red;}` になります
コメントの削除
'コメントを保持'オプションが有効でない限り、すべてのCSSコメント (/* ... */) を削除します。/*! ... */ 構文を使用した重要なライセンスコメントは、通常、ほとんどの圧縮ツールで保持されます。
冗長文字の削除
不要なセミコロン（ルール内の最後のプロパティ）、演算子周りのスペース、余分なゼロ（0.5 → .5）を削除します。色コードを短縮します（#ffffff → #fff）。
プロパティの最適化
括弧、コロン、カンマの周りのスペースを削除します。例：`margin: 10px 20px;` が `margin:10px 20px;` になります。注：calc() やその他の必要な関数ではスペースが保持されます。
ファイルサイズへの影響
手書きCSSの場合20〜50%削減。Tailwindなどのフレームワーク出力では5〜15%程度。コメントが多いCSSでは40〜60%削減。Gzip追加で転送サイズをさらに70〜80%削減可能。
| シナリオ | 元のサイズ | 圧縮後 | 削減率 | Gzip後 |
|---|---|---|---|---|
| コメント付きの整形されたCSS | 50 KB | 25-30 KB | 40-50% | ~5-8 KB (合計85-90%) |
| コメントが少ないコンパクトなCSS | 30 KB | 24-27 KB | 10-20% | ~4-6 KB (合計80-85%) |
| コメントが多いドキュメントCSS | 100 KB | 40-50 KB | 50-60% | ~8-12 KB (合計88-92%) |
関連ツール
HTML圧縮・整形ツール
HTMLコードを圧縮または整形、空白とコメントを削除してファイルサイズを最適化、または可読性向上のためにコードをフォーマット
JavaScript圧縮・整形ツール
JavaScriptコードを圧縮または整形、空白とコメントを削除してファイルサイズを最適化、または可読性向上のためにコードをフォーマット
カラーピッカー
HEX、RGB、HSL、CMYK、YCbCr、Lab形式間で色を変換、配色スキームを生成、WCAGコントラストをチェック
カラーパレットジェネレーター
カラーミキシング、グラデーション作成、配色スキーム生成、CSS/SCSS/JSON形式へのエクスポートが可能なプロフェッショナルなカラーパレット生成ツール
画像Base64コンバーター
画像をBase64エンコードに変換、PNG、JPG、GIF、SVG、WebP形式対応、Data URIとCSSバックグラウンド生成
テキスト差分チェッカー
2つのテキストまたはファイルの差分を比較し、サイドバイサイドでハイライト表示