ホームに戻る

CSS圧縮

CSSを貼り付けると不要なコメントと空白を減らし、HEX色の短縮や0単位の整理も行います。

コーディング 結果を待っています
問題を報告

コーディングブラウザ処理

圧縮概要

小さいCSSは描画開始とキャッシュ効率に役立ちます。本番前に主要レイアウトを実ブラウザで確認してください。

CSS構造チェック

CSS構造は有効そうです

元サイズ

310 B

圧縮サイズ

227 B

削減バイト

83 B

削減率

26.8%

gzip推定

73 B

ルール数

2

宣言数

10

削除コメント

1

元のCSS

圧縮したいCSSを貼り付けます。media queryやCSS変数にも対応します。

圧縮結果

結果を確認し、コピーまたは.min.cssで保存します。

. product-card{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;padding:20px;border:1px solid #eee;border-radius:12px;background:#fff;color:#1f2937}.product-card:hover{border-color:#fc0;transform:translateY(-2px)}

デプロイ前チェック

  • 必要なライセンスコメントは保持してください。
  • SCSSやLessはCSSへ変換してから圧縮してください。
  • hover、media query、calc()を確認してください。

簡易圧縮の注意

このツールは素早い容量削減用です。複雑なCSSはビルドパイプラインも使ってください。

圧縮CSSの確認方法

コードはブラウザ内で処理されます。文字列と実用的な式を保ちながら、コメント、改行、安全な空白を削減します。

使い方メモ

  • 通常コメントを削除し、/*! ... */ ライセンスコメントは保持できます。
  • 中括弧、コロン、セミコロン、カンマ周辺の空白を削減します。
  • 削減率 = (元サイズ - 圧縮サイズ) / 元サイズ x 100。

よくある質問

CSSは送信されますか?expand_more

いいえ。ブラウザ内だけで処理されます。

SCSSも使えますか?expand_more

CSS向けです。SCSSやLessは先にCSSへビルドしてください。

ライセンスコメントは残せますか?expand_more

保持オプションで /*! から始まるコメントを残せます。

さらに探す

次に試したいツール

同じカテゴリのツールと Gogotem で人気のツールを続けて探せます。

すべてのツール arrow_forward