Web開発
CSS Minify / Beautify
本番用にCSSを圧縮するか、圧縮されたCSSを読みやすい形式に整形します。
プレビューするには大きすぎます
プレビューするには大きすぎます
Minifying CSS strips whitespace, comments, and line breaks that only exist for human readability and have no effect on how a browser applies styles. The result is a smaller file and a faster page load.
How to use it
- Minify: paste CSS and the tool strips unnecessary whitespace, comments, and line breaks while keeping behavior identical.
- Beautify: paste minified CSS with no indentation to get a readable version back, with indentation and line breaks.
- Handy for quickly reading CSS from a third-party site that only ships a minified version.
Common uses
- Minifying CSS for production when there's no build tool (Vite, Webpack) set up, or for a quick one-off minification.
- Beautifying minified CSS from a third-party library to read or debug it.
- Estimating how much a CSS file will shrink before setting up an automated build.
Things to keep in mind
Minification never changes styling behavior — it's a purely syntactic transformation; if a page looks different after minifying, that's a bug in the tool, not an intentional change.
Without a source map, debugging minified CSS in production is harder — the line numbers shown in the browser console won't match the original file.
よくある質問
圧縮によって私のCSSから実際に何が削除されますか?
Minifyは空白、改行、コメントを取り除き、一部の値を短縮することで、CSSの動作を変えずにファイルサイズを削減します。
Beautifyは元のフォーマットを完全に復元できますか?
Beautifyは読みやすさのためにインデントと改行を使って圧縮されたCSSを再フォーマットしますが、圧縮時に既に削除されたコメントや元のスタイルの選択を復元することはできません。
圧縮は有効なCSSであれば安全ですか?
はい — 構文的に有効なCSSの場合、圧縮は冗長な文字を削除するだけでセレクタやプロパティ値を変更することはなく、すべてブラウザ内でローカルに実行されます。
サーバーがすでにGzipでファイルを圧縮している場合でも、圧縮は必要ですか?
はい — 圧縮とGzip/Brotli圧縮は互いを補完します。圧縮は圧縮処理の前にソースファイル自体を小さくし、Gzip/Brotliは転送中にその結果をさらに圧縮するため、両方合わせるとどちらか一方だけよりも最終的なサイズが小さくなります。
圧縮されたCSSのソースマップとは何ですか?
ソースマップは、圧縮されたCSSの行を元のフォーマットされたコードに対応付ける別ファイルです。これにより、実際に本番環境に配信されるのが圧縮版であっても、ブラウザの開発者ツールがデバッグ時に正しい行番号とファイル名を表示できるようになります。