HTML整形・圧縮
このツールでできること
HTMLコードを読みやすく整形（フォーマット・インデント付与）したり、改行や空白を削除して転送サイズを削減する圧縮（Minify）ができるツールです。コピペで動くブラウザ内ツールのため、機密性のあるコードを扱う場合でもサーバーに送信されません。
特徴
- 整形（フォーマット） — 開始タグごとにインデントを追加して階層を可視化。
- 圧縮（Minify） — タグ間の空白・コメント・不要改行を削除してサイズを削減。
- インデント幅の指定 — スペース2・スペース4・タブから選べます。
- クライアント完結 — すべてブラウザ内で処理、サーバー送信なし。
使い方
- 左側の入力欄にHTMLを貼り付けます。
- インデント幅を選択し、「整形」または「圧縮」ボタンを押します。
- 右側に結果が表示されます。「コピー」ボタンでクリップボードに取得できます。
こんなときに使えます
- 圧縮済み（Minify された）HTML を受け取って中身を確認したいとき
- バックエンドのテンプレートエンジンが出力した長大な HTML をデバッグするとき
- 公開前に HTML を圧縮してファイルサイズを減らしたいとき
- コピペで受け取ったコード片のインデントを整えてコードレビューで読みやすくしたいとき
- 静的サイトジェネレーター（11ty・Hugo・Jekyll）の出力を手動で確認したいとき
- メール HTML テンプレートを整形してクライアントメーラーでの表示を確認するとき
- スクレイピングで取得した HTML を分析するとき
- CMS が生成する冗長な HTML を整理してカスタマイズするとき
Minify でどのくらい小さくなる？
整形済みの HTML（改行・インデント・コメントあり）は、通常 20〜40% 程度サイズが削減できます。これに加えてサーバーの Gzip / Brotli 圧縮を併用すれば、転送量は元の 10〜20% 程度まで小さくなります。HTTP/2 や HTTP/3 ではリソース数の削減と合わせて高速化に寄与します。
保持される要素
- <pre> / <textarea> の中身 — 整形時も内部の空白・改行を保持します（これらの要素は空白が意味を持つため）。
- <script> / <style> の中身 — インラインの JS・CSS はそのまま保持されます。
- DOCTYPE 宣言 — 文書先頭の DOCTYPE は保持されます。
- コメント — 整形時は保持、圧縮時は削除されます。
よくある質問
- 構文エラーがあっても処理できますか？
- はい。厳密なHTML仕様チェックは行わず、タグのペアと位置関係を見て簡易に整形するため、多少崩れたHTMLでも動作します。
- インラインの
<script>・<style>は整形されますか？ - 内容はそのまま保持されます。JavaScript・CSS の整形はそれぞれ専用ツール（JS整形・CSS整形）をご利用ください。
- どれくらい圧縮できますか？
- インデントや空白の多いHTMLでは20〜40%程度縮むことがあります。Gzip圧縮を併用するとさらに小さくなります。
- テンプレート構文（Nunjucks・Jinja・Liquid）は整形できますか？
- 本ツールは純粋な HTML を対象としています。
{% %}{{ }}のようなテンプレート構文は HTML タグとして解釈されないため、整形後も壊れることはありませんが、整形の恩恵も受けません。 - 整形結果が意図と違うのですが？
- 本ツールは軽量な簡易整形で、厳密な HTML パーサーではありません。不正な入れ子や閉じ忘れタグがある場合、出力が乱れることがあります。まず HTML が valid であることをご確認ください。
- 行長の制限はありますか？
- 本ツールは行長（print width）による折り返しは行いません。Prettier のような wrap が必要な場合は、専用ツールをご利用ください。
- 差分を強調表示できますか？
- 本ツールには差分表示機能はありません。整形後の HTML を「テキスト差分比較（diff）」ツールに渡すと比較できます。
