無料オンラインCSSミニファイアー
CSSスタイルシートをミニファイしてファイルサイズを削減します。
Who uses the CSSミニファイアー?
- ビルドツールのパイプラインがないプロジェクトで手動でCSSを最適化するウェブ開発者。
- CDN導入前に素早くサイズ削減の見積もりを得たいパフォーマンスエンジニア。
- 本格的なビルドステップの前にstyle.cssのおおまかな下処理を行うテーマ開発者。
How the CSSミニファイアー works
入力エディタにCSSコードを貼り付けます。
Minifyをクリックすると、コメント、空白、不要なセミコロンが取り除かれます。
統計パネルで前後のバイトサイズと削減率を確認します。
圧縮されたCSSをコピーして本番環境で使用します。
Tips & tricks
- 圧縮後は必ずcalc()式を確認してください——このツールが+の周りのスペースを取り除くことで、calc()内で無効なCSSが生成される可能性があります。
- このツールは重複するセレクタの統合や、プロパティのショートハンド化は行いません——コメントと空白の削除のみです。
- 本番パイプラインでは、本物のCSS圧縮ツール(cssnano、Lightning CSS)がcalc()やその他のエッジケースを正しく処理します——このツールは素早い確認用に使い、最終的な本番出力には使わないでください。
- 統計パネルの削減率は、元のCSSにどれだけ空白/コメントの「余分な重さ」があったかを大まかに示す良い指標です。
Frequently Asked Questions
CSSの圧縮でどれくらい節約できますか?
CSSの圧縮は通常、ファイルサイズの10〜30%を節約します。gzip圧縮も加えると、実質的な節約は60〜80%に達します。コメントが多く空白の多い大きなスタイルシートほど恩恵が大きくなります。
このツールのCSS圧縮は何を取り除きますか?
コメント(/* ... */)、余分な空白と改行、そして閉じ括弧の直前にある不要なセミコロンを取り除きます。重複するセレクタの統合や、ロングハンドプロパティのショートハンドへの変換は行いません。
圧縮によってCSSが壊れることはありますか?
calc()式には注意してください:このツールはcalc()の内部を含め、+の周りのスペースを一律に取り除くため、calc(100% + 10px)がcalc(100%+10px)に変わってしまうことがあります——calc()の仕様では+と-の周りにスペースが必須なので、これは無効なCSSになります。デプロイ前に出力内のcalc()の使用箇所を確認してください。
インラインスタイルと外部スタイルシートのどちらを圧縮すべきですか?
外部スタイルシートに重点を置いてください——キャッシュとサイズ削減の恩恵を最も受けます。インラインスタイルは通常十分に小さく、圧縮の複雑さに見合うほどではありません。
webpackやViteのようなビルドツールの代わりにこれを使うべきですか?
本番のワークフローにはビルドツールの方が適しています——圧縮(calc()を壊さず安全に)、ソースマップ、バンドリングを自動的に統合します。このツールは、素早い単発の圧縮や、ビルドパイプラインのないプロジェクトに使用してください。
Is my data safe when using the CSSミニファイアー?
Completely safe. The CSSミニファイアー processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the CSSミニファイアー output in commercial projects?
Yes. The CSSミニファイアー is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the CSSミニファイアー follow official standards?
Yes. The CSSミニファイアー is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.