CSS圧縮ツール

CSS圧縮ツールは、CSSから不要な文字を取り除き、圧縮前後の文字数とともに圧縮済みスタイルシートを返す無料ツールです。

CSSを圧縮すると何が変わりますか？

CSS圧縮では、ブラウザに不要な書式を削除して、スタイルシートの文字数を減らします。一般に削除されるのは、インデント、改行、コメント、句読記号の前後にある省略可能な空白です。

CSSのルール、セレクター、宣言値はそのままブラウザに渡されます。意図した見た目を変えずに、ブラウザへ転送するファイルを小さくできます。ただし、実際にどれだけ効果があるかは、元のファイル、HTTP圧縮、ブラウザキャッシュによって異なります。すでに十分圧縮されているスタイルシートでは、転送バイト数がわずかしか減らないこともあります。

CSS圧縮は、デプロイ前の処理、容量が大きい外部CSSの調査、開発用の書式がファイルサイズに与える影響の確認に役立ちます。未使用のセレクターを削除したり、同等のルールを統合したり、宣言を書き換えたりする最適化とは異なります。このツールは、そうした広範な処理を行うものではありません。

CSS圧縮ツールの使い方は？

スタイルシートをCSS欄に貼り付けてツールを実行し、表示された圧縮済みCSSを該当するビルドまたはデプロイの作業工程にコピーしてください。読みやすい元のCSSファイルは残し、圧縮版で恒久的に置き換えないようにします。

1. サイトまたはアプリケーションで使用している元のCSSを用意します。
2. 圧縮する前に、CSSが正しく解析されることを確認します。
3. CSS欄に貼り付けて、ツールを実行します。
4. CSSの文字数と圧縮済みCSSの文字数を比較します。
5. レスポンシブ表示、印刷スタイル、操作可能なコンポーネントも含め、ステージングページで結果をテストします。

CSSの圧縮処理はサーバー上で行われます。送信したCSSはHTTPS経由でサーバーに送られ、保存されません。スタイルシートに機密性のあるURL、内部ホスト名、その他の取り扱いに注意が必要な情報が含まれる場合は、サーバー側で処理するツールへの送信が組織の情報管理方針に適合するか確認してください。

結果はどう確認すればよいですか？

結果には変換後のCSSと圧縮前後の文字数が表示されるため、出力内容と削減量を直接確認できます。CSSの文字数は送信したテキストの長さ、圧縮済みCSSの文字数は圧縮後の長さです。

文字数は、マルチバイト文字に対応した文字列長の計算関数で算出されます。ネットワークで実際に転送されるサイズを正確に予測する値ではありません。UTF-8の文字は1文字が複数バイトになる場合があり、Brotliやgzipによる圧縮でHTTP転送時のサイズも大きく変わることがあります。

このツールには、検証結果やエラーを表示する専用欄はありません。そのため、CSSバリデーターとしては使用できません。波括弧の閉じ忘れ、コロンの欠落、閉じられていない文字列、不正なコメント、無効な入れ子といった一般的な問題は、ブラウザの開発者ツール、リンター、または標準仕様に対応したバリデーターで確認する必要があります。無効なCSSでもコンパクトな出力になる場合がありますが、意図どおりに動作するとは限りません。

CSS圧縮の簡単な例

一般的なCSS圧縮では、ルール自体を維持したまま書式を取り除きます。

CSS

p { color: red; }

圧縮済みCSS

p{color:red}

この例では、読みやすく書式設定された入力は17文字、圧縮後は12文字です。引用符で囲まれた文字列内の空白や句読記号は、値の一部として残す必要があります。

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

圧縮済みCSS

.notice,.warning{color:#c00;margin:0 1rem}

すべての空白を機械的に削除するのは安全ではありません。空白が子孫結合子を表す場合があり、calc()などの関数内にある算術演算子にも空白の要件があります。文字列、データURL、エスケープされた識別子、カスタムプロパティの値も、構文を考慮して処理する必要があります。

アクセント付き文字や非ラテン文字は文字列内で使用でき、CSSの識別子規則に従えばセレクターにも使用できます。数字、小数点、パーセント記号、単位は装飾的なテキストではなく構文の一部です。宣言の意味を理解せず、単純に短縮することはできません。空のスタイルシートには圧縮するCSSがありません。非常に大きなスタイルシートでは、オンラインフォームでコピーするよりも、ビルド時に圧縮するほうが、通常は処理を再現しやすく監査もしやすくなります。

CSS圧縮を行わなくてもよいのはどんな場合ですか？

すでに圧縮されているファイルや、本番用のコンパクトなアセットとして生成されたファイルを再び圧縮しても、通常は効果がありません。CSSを2回圧縮してもほとんど、あるいはまったくサイズが減らない一方で、リリース工程に変換処理が1つ増えます。

• ブラウザやビルドシステムだけが読み取るCSSを整形し直してから、再圧縮しないでください。
• 未使用のフレームワークルールや重複した宣言を削除する代わりに、圧縮を使わないでください。
• 文字数の削減だけで、レンダリングを妨げるリクエスト、キャッシュの問題、フォントの読み込み遅延が分かるとは考えないでください。
• 特に詳細度、カスケードレイヤー、メディアクエリをデバッグするときのために、書式設定された元ファイルは破棄しないでください。

CSSを自動的にバンドルしている場合は、そのパイプライン内で圧縮ツールを使い、すべてのリリースに同じ設定を適用してください。関連するアセットを手動でデプロイする場合は、HTML圧縮ツールとJSミニファイアーを使って、それぞれのファイル形式に同等の処理を適用できます。

よくある質問

CSSを圧縮するとセレクターの詳細度は変わりますか？

正しく圧縮されていれば、セレクターの構成要素と順序は維持されるため、詳細度は変わりません。ただし、エスケープ、新しい擬似クラス、古い圧縮ツールでは解釈できない可能性がある自動生成構文を元のCSSで使用している場合は、複雑なセレクターを慎重に比較してください。

CSSカスタムプロパティも圧縮できますか？

カスタムプロパティも圧縮対象にできますが、その値では、後からvar()で置換するためにトークンや空白が維持されることがあります。見た目上は不要に思える空白がすべて省略可能だと判断せず、計算式、フォールバック、埋め込み文字列を含む宣言は、プロジェクトが対応するブラウザでテストしてください。

ソースマップも作成されますか？

ソースマップの出力はありません。本番環境でのデバッグ時に、圧縮されたCSSをSass、Less、その他のソースへ対応付ける必要がある場合は、元のファイル構造を把握しているコンパイラーまたはバンドラーで、圧縮ファイルとソースマップを生成してください。

ライセンスコメントは出力に残りますか？

CSSコメントが保持されるとは限りません。依存ライブラリのライセンスで、配布コードに通知を添付することが求められている場合は、その通知を別に保管するか、リリース前に生成された出力を確認してください。

壊れたCSSを圧縮すれば直せますか？

いいえ。圧縮は不要な文字を削除する処理であり、無効なセレクター、未対応のプロパティ、見つからないアセット、誤ったカスケードを修復するものではありません。まず元のCSSで、解析時の警告や表示上の不具合を解消してください。

デプロイ前の確認事項

圧縮後の出力は本番用の別アセットとして保存し、URLと引用符で囲まれた内容が維持されていることを確認してください。そのうえで、ブラウザコンソールを開きながらステージングページで読み込みます。代表的なページを狭いビューポートと広いビューポートの両方で比較し、サーバーに想定どおりのコンテンツタイプ、キャッシュポリシー、HTTP圧縮が設定されていることも確認してください。