使い方
- CSS を貼り付けるか、
.cssファイルを開くか、サンプルから始めます。 - 入力すると圧縮された CSS が、圧縮前後のサイズとともに表示されます。
- コピーするか、
styles.min.cssとしてダウンロードします。
機能
CSS ミニファイアーは CSSO を使用しており、空白やコメントの削除にとどまりません。
- 値を短くします。
#ff0000はredに、0pxは0に、padding: 0 16px 0 16pxはpadding: 0 16pxになります。 - 同じセレクタのルールや、同じ宣言を持つセレクタを統合します。
- 同じルール内で後の宣言に上書きされる宣言を削除します。
スタイルシートの意味を保つ変更のみを行うため、ページの見た目は変わりません。
効果はありますか？
スタイルシートは読み込まれるまでページの表示をブロックするため、CSS が小さいほど最初の描画が速くなります。圧縮すると、ホストが適用する gzip や Brotli に加えて通常 5～15% 削減でき、コメントが多いスタイルシートではさらに削減できます。Vite などのビルドツールを使っている場合は本番用に CSS がすでに圧縮されています。このページは、手書きで公開するスタイルシート向けです。
よくある質問
圧縮で CSS が壊れることはありますか？
CSSO の変更は、有効な CSS の意味を保ちます。古いブラウザ向けに無効な構文を利用したハックは残らない場合があります。読みやすいバージョンをソースとして保持し、コピーを圧縮してください。
未使用の CSS を削除しますか？
いいえ。ページで使われているセレクタを確認できないためです。PurgeCSS などのツールがビルド時にそれを行います。
読みやすいバージョンに戻すには？
元のファイルを保持してください。CSS フォーマッターで圧縮された CSS をインデントし直せますが、コメントは元に戻りません。
CSS はアップロードされますか？
いいえ。圧縮はブラウザ内で行われます。