HTML / CSS / JavaScript ミニファイ・整形ツール

🔗 関連ツール

📖 つまずきやすいポイント

HTML / CSS / JavaScript の空白とコメントを削って縮めます (逆に整形もできます)。すべてブラウザ内で処理します。本番のビルドパイプラインの代わりにはなりません — ここで行うのは字句レベルの圧縮だけで、terser や esbuild が行う変数名の短縮、デッドコードの除去、Tree Shaking は含みません。手元のスニペットを 1 回縮めたい、逆に読める形に戻したい、という用途向けです。

ケース	何が起きるか	どうする
JavaScript が壊れる	原因はほぼセミコロンの省略です。改行で文が区切れていたコードから改行を取ると、次の行と 1 文につながります。JavaScript の自動セミコロン挿入は改行位置に依存するため、改行を消した瞬間に意味が変わります。`return` の直後で改行していたコードは、逆に改行を残さないと壊れます。	縮める前に Prettier などで整形し、セミコロンを補ってから通してください。縮めた結果は必ず実行して確認します。ミニファイ済みのコードで例外が出たときは Source Map が無いとスタックトレースが読めません。本番に出すコードは、この場ではなくビルド時に Source Map ごと生成してください。
HTML を縮めたら表示が詰まる	HTML の空白は意味を持つ場合があります。`<span>A</span> <span>B</span>` の間の 1 個の空白は、レンダリング時に語間として表示されます。ここを削ると `AB` になります。`inline-block` を横に並べたレイアウトでも、この空白が意図的に効いていることがあります。	タグ間の空白はブロック要素の間だけ削り、インライン要素の間は残すのが原則です。`<pre>` と `<textarea>` の中身は絶対に触れてはいけません (改行とインデントがそのまま表示される要素です)。判断が面倒なら、HTML の圧縮は諦めて gzip / Brotli に任せるのが実際的です。転送量の削減効果はそちらのほうがずっと大きく、リスクはゼロです。
CSS を縮めたら一部のスタイルが効かなくなる	古いブラウザ向けのハックが消えるのが典型です。`zoom` や `_height`、`!ie`、`/\/` といった記法は意図的な構文エラーで特定ブラウザにだけ読ませる仕掛け*なので、正しく処理されると消えます。また `content: "\f101"` のようなアイコンフォントのエスケープや、`@media` 内の空白も、実装によっては壊れます。	縮めた CSS を本番に出す前に、必ず実画面で 1 度確認してください。IE 向けのハックが残っているなら、それはもう不要な可能性が高いので、この機会に削除してしまうほうが健全です。長期的には、PostCSS + cssnano をビルドに組み込むほうが安全で、ベンダープレフィックスの付与や重複ルールの統合まで面倒を見てくれます。

ミニファイの効果を過大評価しないでください。テキストはどのみち gzip や Brotli で圧縮されて転送されます。空白を削って 30% 減ったように見えても、圧縮後の差は数パーセントに縮むのが普通です (圧縮アルゴリズムは繰り返しパターンに強く、連続した空白はまさに得意分野だからです)。表示速度に効くのは、読み込むファイルの数、画像の容量、レンダリングをブロックするリソースの有無のほうが桁違いに大きい要因です。

📖 使い方

1

言語と動作を選択

自動判定またはHTML / CSS / JavaScript を選択し、ミニファイ（圧縮）または整形（美化）を選びます。
2

コードを入力

左側の入力欄にコードを貼り付けます。「サンプル」ボタンでサンプルを確認できます。
3

削減サイズを確認してコピー

変換結果と削減サイズが表示されます。「コピー」ボタンで結果をクリップボードにコピーします。

❓ よくある質問

ミニファイによってコードの動作は変わりますか？

適切に行えば動作は変わりません。このツールはコメントの削除と空白の圧縮を行います。JavaScript の変数名の短縮（難読化）は行いません。

CSS の calc() や var() は正しく処理されますか？

はい。CSS ミニファイ処理はプロパティ値内のスペースを安全に圧縮します。

整形時のインデント幅は変更できますか？

はい。インデントオプションで 2 スペース・4 スペース・タブを選べます。

🐛 このツールで問題が発生しましたか？

完全無料・登録不要。再現手順だけでも結構です。届いたご報告は運営者に直接届き、修正の参考にします。

📦 HTML / CSS / JavaScript ミニファイ

🔗 関連ツール

📖 つまずきやすいポイント

📖 使い方

❓ よくある質問

ご報告ありがとうございます！