DEV

CSS 圧縮ツール — ブラウザで CSS を minify してファイルサイズを削減

空白・コメント・冗長な宣言を除去して CSS を圧縮。すべてブラウザ内で動作。アップロードなし、アカウントなし、制限なし。

● ローカル動作 · タブ内で生成ページ読み込み以降のツールによる通信：0件

CSS Minifier

Minify and compress CSS code. Works entirely in your browser — no uploads.

Paste CSS

こんなツールも

行をソート MD5 ハッシュ UUID ジェネレーター JSON → CSV Base64 エンコード PDF 分割 HAR → cURL TOML ツール .env ヘルパー MsgPack インスペクター PDF 圧縮 PDF → EPUB

圧縮ツールを開く

CSS 圧縮は、一見すると大した影響がないように思える作業の一つです——回線上を送るすべての CSS のバイトは、ブラウザがパースしなくて済むバイトであり、今の回線は 1 秒あたり数 MB を流せるのだから——しかし、バイトは積み重なります。一般的な Web ページは 50〜200 KB の CSS を出力しますが、そのうち 20〜40% はブラウザが無視する空白、コメント、冗長な宣言です。圧縮はこれらすべてを剥ぎ取り、同じ cascade、同じ specificity、同じ computed style、同じレンダリング結果を残します。削減分はただの無料パフォーマンスです：小さい CSS ファイルはパースが速く、適用も速く、サイトが抱えるパフォーマンスバジェットをそれだけ消費しません。

圧縮について「自明ではない」のは、何が冗長とみなされるかです。safe preset（ここでのデフォルト）は明白なことだけを行います：コメント除去、空白の折りたたみ、文末のセミコロン削除、16 進カラーの短縮（#ffffff → #fff）。aggressive preset はさらに踏み込みます：同じセレクターのルールのマージ（h1, h2 { color: red; } と h1, h2 { font-weight: bold; } が 1 つのルールになる）、空ルールの削除、先頭ゼロの除去（0.5em の代わりに .5em）、意味的に等価な場合に longhand プロパティを shorthand に統合。aggressive preset は純粋な CSS なら安全ですが、一部のプリプロセッサ出力や古いハックは壊れる可能性があります——元ファイルを上書きする前にコピーで検証してください。

最後に引き渡しについて：もし目的が CSS を本番環境に配布することなら、出力をちゃんとしたビルドパイプライン（esbuild、Vite、Webpack）に通してください——それらのツールは 1 度のパスでバンドル、minify、autoprefix、tree-shake を行います。本ブラウザツールは、ワンショットの圧縮、単一ファイルのデバッグ、あるいは自分で書いたわけではない CSS に対して圧縮ツールが何をするかを確認するような場面に適しています。もし目的が critical CSS（ファーストビューを描画するのに必要最小限の CSS）の抽出であれば、それは別のツールです——PurgeCSS や Critters のような tree-shaker は HTML を走査して、実際に使われているルールだけを抽出します。

使い方

CSS を貼り付ける
入力エリアに CSS を貼り付けるか、ファイルピッカーから .css ファイルを読み込みます。圧縮ツールは任意の有効な CSS を受け付けます——ベンダープレフィックス、カスタムプロパティ、メディアクエリ、モダンセレクターのすべてに対応します。
圧縮レベルを選ぶ
Safe（デフォルト）は空白とコメントを除去し、すべてのルールを保持します。Aggressive はさらに単一行宣言への折りたたみ、同じセレクターのルールのマージ、空ルールの削除も行います。どちらも意味的には等価です。
結果をコピーまたはダウンロード
圧縮後の CSS をクリップボードにコピーするか、.min.css ファイルとしてダウンロードします。ダウンロードボタン上にサイズ削減率が表示されるため、削減効果を確認できます。

よくある質問

圧縮はレンダリング結果を変えますか？

いいえ。圧縮後の CSS は元とまったく同じ cascade、specificity、computed style を生成します。変更されるのは空白の除去、コメントの削除、宣言の短縮のみで、これらすべてはブラウザには見えません。

圧縮後はどれくらい小さくなりますか？

手書き CSS の一般的な削減率は 20〜40%、フレームワーク出力（Bootstrap、Tailwind）は 10〜20% です。コメントや空白が多いスタイルシートは 50% 以上縮小することもあります。

CSS バンドラーと何が違うのですか？

バンドラー（Webpack、Vite、esbuild）は複数の CSS ファイルを 1 つにまとめ、import を処理します。圧縮ツール（本ツール）は単一の CSS ファイルのサイズを削減します。多くのビルドパイプラインでは両方を使います：まずバンドルし、その結果を minify します。

source map は含まれますか？

いいえ——圧縮後の CSS にはデフォルトで source map は含まれません。本番デバッグには、ビルドパイプラインで source map を生成し（cssnano や esbuild の `--source-map` フラグ）、配布する .min.css ファイルとは別に保管してください。

Tailwind や Bootstrap の出力にも対応していますか？

はい——圧縮ツールは生成方法に関わらず純粋な CSS に対して動作します。Tailwind や Bootstrap の出力は元々かなりコンパクトなので、手書き CSS に比べて追加の削減幅は小さく（10〜20%）なります。

制限事項

source map を出力しない圧縮後の CSS には source map が含まれません。本番デバッグには、ビルドパイプラインで生成してください。本ツールはワンショットでの圧縮に適しており、完全なビルド環境の代わりにはなりません。
CSS-in-JS の変換は行わないstyled-components、Emotion などの CSS-in-JS ライブラリは CSS 文字列を埋め込んだ JavaScript を生成します。本ツールは純粋な CSS のみを扱います。先に JS を JS 圧縮ツールにかけるか、CSS-in-JS 対応のビルドツールを使用してください。
autoprefixer は行わないベンダープレフィックス（-webkit-、-moz-、-ms-）はそのまま保持されます。手動プレフィックスを含む古いコードベースの入力を扱う場合は、先に autoprefixer を通して、現在のブラウザベースラインで不要になったプレフィックスを除去してください。

プラットフォーム別の注意点

macOS: コマンドラインでの作業は `npx csso-cli input.css -o output.min.css` が同等です。本ブラウザツールは、Node と csso パッケージをインストールするほどの価値がないワンショット圧縮に適しています。
Windows: PowerShell には CSS を圧縮するネイティブ機能がありません。本ブラウザツールはアドホックな作業に適しており、ビルドパイプラインでは npm の clean-css または csso パッケージを使用してください。本ツールの圧縮アルゴリズムは clean-css の safe preset と一致しています。
Linux: GNU coreutils に CSS 圧縮機能はありません。標準的な CLI の代替は `npx clean-css-cli input.css -o output.min.css` です。本ブラウザツールは、チャットやドキュメントページからコピーした内容を貼り付ける場面に適しています。
Web: 完全にクライアントサイドで動作します。ページの読み込み後はオフラインでも動作します。safe preset を駆動する clean-css ライブラリは、npm パッケージと同じコードパスを使用しており、同じ入力に対して同じ出力を生成します。