🗜️
無料CSS ミニファイアー＆ビューティファイアー
CSS を圧縮してファイルサイズを減らすか、圧縮された CSS を読みやすく整形します。ブラウザ上で瞬時に。
読み込み後はオフラインでも動作
または下に .css ファイルをドロップ
.css ファイルをここにドロップ、またはクリックして選択
CSS · デバイス上で処理
または Ctrl+V でクリップボードから貼り付け
入力 CSS
出力 CSS
ここに出力が表示されます…
主な用途
- 本番環境へのデプロイ用に CSS をミニファイ本番にデプロイ前に CSS ファイルサイズを削減 — より高速なページ読み込みと低いバンド幅コスト。
- デバッグ用にミニファイされた CSS を美化圧縮またはミニファイされた CSS を読み取り可能なコードにフォーマット。スタイルを検査およびデバッグできます。
- 電子メールテンプレート用に CSS をミニファイファイルサイズとインラインスタイルの肥大化が重要な HTML メールテンプレート用に CSS をコンパクト化。
- WordPress テーマ用に CSS をミニファイカスタム WordPress テーマスタイルシートのサイズを削減してより良い PageSpeed スコアを実現。
- コードレビュー用に CSS を美化任意の CSS ファイルをクリーン、インデント、読み取り可能なコードにフォーマット。レビューとコラボレーション準備完了。
使い方
このツールはJavaScriptで完全に構築された、手書きの、依存関係のないCSSトークナイザーを使用しています — 外部ライブラリもサーバー呼び出しも不要です。トークナイザーは、変換を適用する前にすべての文字をコード、コメント、引用符付き文字列、またはurl()値として分類します。これにより、空白のルールが文字列の内容、データURI、calc()式を壊すことがなくなります。
- 1トークン化パス入力CSSは文字ごとにスキャンされ、型付きトークンに分割されます：生のコードセグメント、/* ... */コメント、引用符付き文字列（エスケープシーケンスを保持）、url(...)ブロックです。これにより次のステップの変換が実際のCSS構文にのみ触れ、文字列リテラルやデータURIの内容には決して触れないようになります。
- 2最小化または整形minifyモードでは、通常のコメントは削除され（/*! license */コメントは保持されます）、コードトークン内の連続する空白は単一のスペースに折りたたまれ、{ } : ; , > ~ の周りの句読点隣接の空白は削除されます。+と-の周りのスペースは、calc()式が壊れないよう意図的にそのまま残されます。beautifyモードでは、コードはまずクリーンなベースラインにミニファイされ、その後2スペースの深さ追跡と、a:hoverのようなセレクタのコロンとproperty: valueのコロンを区別するための宣言コロン検出を使って再トークン化・再インデントされます。
- 3gzipサイズの推定出力を生成した後、ブラウザのネイティブCompressionStream APIを使って結果をgzip圧縮し、結果のバイト数を測定します。これは、gzip圧縮を使うWebサーバーがネットワーク越しに送信するであろうサイズの現実的な推定値を提供します。
- 4コピーまたはダウンロード処理済みのCSSはClipboard APIを介してクリップボードに書き込まれるか、text/cssのMIMEタイプを持つBlobを使ってstyles.min.css（minifyモード）またはstyles.css（beautifyモード）としてダウンロードされます。サイズ削減率は入力するたびにライブ表示されます。
関連ツール
SVG オプティマイザーとミニファイザー
メタデータを削除し、空白を折りたたんで、小数点以下を四捨五入して、SVG ファイル サイズを大幅に縮小します (通常は 30 ～ 70% の削減)。視覚的なプレビューにより、何も壊れていないことが確認されます。
試してみるファイルはローカルに留まります
CSS 整形ツール
圧縮された CSS を一貫したインデントで整形、または圧縮します。プロパティをアルファベット順に並べ替えるオプションで、差分も見やすくなります。
試してみる
JSON フォーマッタ
JSON データをフォーマット、検証、縮小、探索します。ツリー ビュー、構文の強調表示、ワンクリック コピー。
試してみる