ZeroTool Workbench
HTML Minifier & Beautifier
ブラウザで動く無料の HTML 圧縮・整形ツール。コメント削除・空白圧縮・再インデントが瞬時に完了。アップロード不要、登録不要。
使い方
- HTML(断片でも doctype 付きの完全な文書でも可)を入力欄に貼り付けます。
- 圧縮 でコメント削除+空白圧縮、整形 で再インデントを実行します。
- 整形時はインデント幅を 2 スペース・4 スペース・Tab から選択できます。
- 圧縮後はステータス行に削減量(例:
12.4 KB → 8.1 KB (−34.6%))が表示されます。 - 出力パネルの コピー ボタンで結果を取得できます。
サンプル
圧縮前
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- ページメタ情報 -->
<title>こんにちは</title>
</head>
<body>
<h1>Hello World</h1>
<p>太字を含む <strong>テキスト</strong>。</p>
</body>
</html>
圧縮後
<!doctype html><html lang="ja"><head><title>こんにちは</title></head><body><h1>Hello World</h1><p>太字を含む <strong>テキスト</strong>。</p></body></html>
圧縮されるもの
- タグ間の空白(inter-tag whitespace)が折りたたまれます。
- HTML コメントは削除されます — IE 条件付きコメント(
<!—[if IE]>)は例外として保持されます。 disabled=""のような boolean 属性はdisabledに簡略化されます。- テキストノードの前後空白を切り詰め、内部の連続空白は単一スペースに圧縮します。
そのまま保持されるもの
<script>、<style>、<pre>、<textarea>、<code>、<samp>、<kbd>内のコンテンツ。- 属性値(引用符内の空白や、インラインイベントハンドラを含む)。
<!DOCTYPE>宣言。
HTML を手動圧縮するタイミング
モダンなビルドチェーン(Vite、Webpack、Astro、Next.js)はバンドル時に HTML を自動圧縮します。本ツールは単発の作業に向いています — CMS からエクスポートされたコード、圧縮前後のサイズ比較、手書きテンプレートの確認など。整形は日常的に使える機能で、本番環境の 1 行 HTML を貼り付けてデバッグや diff のための可読版を得られます。
FAQ
<script> や <style> 内の JavaScript / CSS が壊れませんか?
壊れません。インラインスクリプトとスタイルブロックはそのまま保持されます。圧縮対象はタグ間の構造的空白と <script>/<style> 外部の HTML コメントのみです。
HTML はどこかにアップロードされますか?
アップロードされません。ネイティブ DOMParser API でブラウザ内処理が完結し、マークアップが端末を離れることはありません。サーバー通信もありません。
圧縮でどれくらい削減できますか?
インデントの深さやコメントの量にもよりますが、一般的な HTML は 15〜40% 縮小します。圧縮後はステータス行に元サイズ・出力サイズ・削減率が表示されます。
整形はエディタのフォーマット機能と何が違いますか?
整形は HTML をゼロから再パースして階層に沿ってインデントし直します。CMS やテンプレートエンジンから書き出された不揃いなマークアップの整理、1 行に圧縮された HTML の展開、デバッグや diff の前処理に最適です。
doctype・属性値・インラインイベントハンドラは保持されますか?
はい。doctype、すべての属性値、boolean 属性、onclick / onload などのインラインハンドラはそのまま維持されます。IE 条件付きコメントも、他のコメントが削除されるときでも保持されます。