CSS & JavaScript圧縮ツール
CSSとJavaScriptコードを圧縮
ツールについて
CSS / JavaScript ミニファイヤはコメント・空白・冗長なトークンを取り除き、本番用にサイズを縮小します。ビルドツールが自動でやってくれますが、インラインスニペット・メール用スタイル・バンドラーを通さない小さなスクリプトには手軽なウェブミニファイヤが便利です。
使い方
- Choose CSS or JavaScript mode at the top.
- Paste your source into the input panel.
- Click Minify — the output appears on the right with the size saving in bytes and percent.
- Copy the minified result to embed in a <style> or <script> tag.
- Use the original source as the long-term editable copy and only ship the minified version.
主な使用例
- Inlining critical CSS in the <head> for faster First Contentful Paint.
- Shrinking a Google Tag Manager custom HTML snippet to the size limit.
- Compacting a JS one-liner you want to embed in a bookmarklet.
- Reducing the size of email-safe CSS where every byte matters.
- Trimming a no-bundler vanilla JS file before deploying to a static host.
- Estimating the bundle-size impact of a snippet before adding it to a build.
よくある質問
Q. Is this safe for production JavaScript?
A. For trivial scripts yes. For real applications use a battle-tested minifier like esbuild, terser, or swc inside your build pipeline so source maps and ECMAScript edge cases are handled.
Q. Why does the output break my CSS?
A. Most often a missing semicolon in the source. CSS minification assumes valid input — fix the source, then minify.
Q. Does minifying obfuscate my code?
A. Slightly — names are not changed, only whitespace is stripped. For real obfuscation use a dedicated tool, but understand it does not provide real security.
Q. Can I minify HTML the same way?
A. HTML minification needs different rules (preserved whitespace in <pre>, attribute quoting, etc.). Use a dedicated HTML minifier for that.