CSS圧縮

圧縮後に変わるのは主にテキストの見た目

このページでは、入力したCSSを圧縮して短くするか、整形して読みやすくできます。CSSはセレクターと宣言を組み合わせ、文書の表示方法を指定するスタイルシートです。圧縮では、書式上の空白やコメントなどを処理して、同じルールをより詰めた文字列にします。たとえば body { margin: 0; } は、圧縮結果では body{margin:0} のような形になります。整形を選ぶと、改行とインデントを付けた表示に戻せます。

画面には入力と出力の文字数・行数が表示され、圧縮モードでは文字数から算出した変化率も確認できます。これは入力テキストとの長さの比較であり、通信量やページ表示速度を測定した値ではありません。

CSSの空白はいつも削除できるわけではない

CSSのルールはセレクターと波括弧内の宣言で構成され、宣言はプロパティ名、コロン、値を中心に記述されます。空白やコメントの位置によってトークンの区切りが変わる場合があるため、圧縮は単純にすべての空白文字を消す作業ではありません。W3CのCSS Syntax Module Level 3は、CSSの構文解析やトークン化、コメントの扱いを定義しています。圧縮出力を実際のスタイルシートに置き換える場合は、対象ページで表示を確認してください。

貼り付けたコードを圧縮または整形する

1. CSSを入力する

   編集欄にCSSの一部またはスタイルシートを貼り付けます。処理前の原文は、必要に応じて別途保管してください。短い例を読み込んで、出力の形を先に確かめることもできます。

2. モードを選ぶ

   配布用に短くしたいときは「圧縮」、内容を読みやすく並べたいときは「整形」を選びます。CSS圧縮ページは圧縮モードで開きます。整形ではインデント幅を2・4・8スペースから選べ、インデントの種類もスペースまたはタブにできます。

3. 結果を確認して取り出す

   入力の変更に合わせて出力が作られます。入力と出力の文字数を見比べ、圧縮時は表示される変化率も確認します。必要な結果をコピーするか、ダウンロードしてから、開発中のページやビルド環境で動作を確かめます。

圧縮結果についてよくある疑問

公開ファイルへ反映する前に差分を確認

圧縮や整形で見た目が変わっても、あらゆるCSS構文や実行環境で同じ表示になることを保証するものではありません。コメントにはライセンス、生成処理の目印、保守上の説明が含まれている場合があるため、削除されると困る内容がないか確認してください。カスタムプロパティ、エスケープ、文字列、関数、メディアクエリーなどを使っている場合は、圧縮後の表示を対象ブラウザーと画面幅で確かめてから採用します。

このページの圧縮は、プロジェクト全体の最適化やビルド処理を置き換えるものではありません。CSSを複数ファイルから結合する、未使用ルールを削る、互換性に応じた変換を行う、といった作業は別の工程です。ファイルサイズやページ速度を評価するときは、実際の配信設定とページ全体の状態を合わせて確認してください。