CSS Minifier

Compress CSS to reduce file size and improve page load speed. Removes comments, whitespace, and redundant rules — 100% in your browser.

CSS Input

Minified Output

100% Private

All processing happens in your browser. Your CSS is never sent to any server — paste confidently.

Minify & Beautify

ファイルサイズを小さくするために実稼働用に縮小するか、デバッグのために圧縮されたCSSを読み取り可能な形式に展開するために美化します。

Faster Page Load

CSSを縮小すると、レンダリングブロック時間が短縮され、First Contentful Paint （ FCP ）と全体的なページ速度スコアが向上します。

What is CSS Minification?

CSS minification removes all unnecessary characters from a CSS stylesheet without affecting how the page looks. This includes whitespace, line breaks, comments, and the last semicolon before a closing brace. The output is a single-line stylesheet that is functionally identical to the original but significantly smaller — typically 20–40% smaller before compression.

CSSはレンダリングブロッキングリソースです。ブラウザは、ページをレンダリングする前にすべてのCSSをダウンロードして解析する必要があります。つまり、大きなまたは縮小されていないCSSファイルは、First Contentful Paint （ FCP ）とLargest Contentful Paint （ LCP ）を遅らせることになります。Google PageSpeed Insightsは、縮小されていないCSSを「縮小CSS」の機会としてフラグを立て、Lighthouseなどのツールはパフォーマンス監査でレンダリングブロッキングスタイルシートにペナルティを課します。

このツールは、カスタム縮小アルゴリズムを使用して、ブラウザでCSSを完全に処理します。コメントを削除し、空白を折りたたみ、CSS構文文字（{,}、:、;、、）の周りのスペースを削除し、括弧を閉じる前に末尾のセミコロンをドロップします。Beautify関数はこのプロセスを逆転させ、読みやすさのためにルールをインデントし直します。サードパーティから縮小されたCSSを受け取り、それを読むか変更する必要がある場合に便利です。

When to Minify CSS

次の場合にCSSを縮小します。

  • ✓ 任意のWebサイトを本番環境にデプロイする
  • ✓ PageSpeed Insightsには「CSSを縮小」の機会が表示されます
  • ✓ WordPress、Shopify、またはWebflow用のカスタムテーマを作成する
  • ✓ FCPスコアを向上させるためのレンダリングブロッキング時間の短縮
  • ✓ Compressing large CSS frameworks before use
  • ✓ メールテンプレートのスタイルシートの最適化

Beautify CSS when:

  • ✓ Debugging styles in a production stylesheet
  • ✓ サードパーティのCSSライブラリの検査
  • ✓ ブラウザDevToolsから縮小されたCSSを読み取る
  • ✓ 配信されたCSSテーマを縮小して変更する
  • ✓ 自動生成されたスタイルシートのコードレビュー

よくある質問