HTML整形・圧縮
1行に潰れたHTMLを読める形に戻したいとき、納品前にHTMLを軽くしたいときに。整形と圧縮を同じ画面で切り替えられます。
🔒 入力内容はお使いのブラウザ内だけで処理され、サーバーには送信されません。
HTML を入力して「整形」または「圧縮」を押してください。
0入力サイズ(バイト)
0出力サイズ(バイト)
-削減率
0出力の行数
使い方
- 上の欄に HTML を貼り付けます。ページ全体でも、一部の断片でも構いません。
- 「整形」を押すと、タグの入れ子に合わせてインデントを付けた読みやすい形になります。インデントの種類と空行の扱いは上の選択肢で変えられます。
- 「圧縮」を押すと、改行・余分な空白・コメントを取り除いた1行のHTMLになります。削減率が数値で出ます。
- 結果は「結果をコピー」でクリップボードへ、「.html をダウンロード」でファイルに保存できます。「結果を入力欄へ戻す」で、整形したものをさらに圧縮する、といった続けての操作もできます。
変換の決まり
| 項目 | 整形 | 圧縮 |
|---|---|---|
| インデント | スペース2・4、タブから選択 | すべて削除 |
| 改行 | タグごとに改行。元の空行は「空行の保持」の設定まで残す | すべて削除(タグの間の改行は空白の扱いに従う) |
| pre・textarea・script・style の中身 | 変更しない | 変更しない |
コメント <!-- --> |
残す | 「コメントを削除」がオンなら削除。<!--[if IE]> 形式の条件付きコメントは残す |
| ブロック要素の間の空白 | - | <div>、<p>、<li>、<tr> などの間の空白は削除 |
| インライン要素の間の空白 | - | <a>、<span>、<b> などの間は1つのスペースを残す(表示が変わらないようにするため) |
| 属性の引用符 | 変更しない | 変更しない |
整形には js-beautify(オープンソースのライブラリ)を使い、圧縮はこのツール独自の処理です。
こんな時に
- CMS やメール配信ツールが出力した1行のHTMLを読める形に戻して確認したいとき
- 他の人が書いたHTMLを引き継ぐとき、インデントをそろえてから作業を始めたいとき
- LP など少数の静的ページを納品する前に、ファイルサイズを少し減らしたいとき
- ソースコードをブログに載せる前に、スペース2・タブなど自分の流儀にそろえたいとき
注意
圧縮はHTMLの構造を解析しない簡易な処理です。white-space: pre を指定した要素の中の空白や、インライン要素の並びに空白の有無が影響するレイアウトでは、圧縮後の表示を必ず確認してください。本番サイトの圧縮はビルドツールやサーバーの gzip・Brotli 圧縮に任せる方が安全です。
よくある質問
圧縮すると見た目が変わることはありますか?
インライン要素(<a>、<span>、<b> など)の間の空白は1つのスペースとして残すため、通常は変わりません。ブロック要素(<div>、<p>、<li> など)の間の空白は削除しますが、これは表示に影響しません。white-space: pre をCSSで指定している要素や、CSSでインライン要素の空白に依存したレイアウトがある場合は、圧縮後の表示を確認してください。
pre や textarea の中身はどうなりますか?
<pre>、<textarea>、<script>、<style> の中身は、整形でも圧縮でも変更しません。改行やインデントがそのまま残ります。
IE向けの条件付きコメントは消えますか?
<!--[if IE]> の形式の条件付きコメントは残します。それ以外の <!-- --> コメントは「コメントを削除」がオンのときに削除されます。
整形したら崩れたのですが
閉じタグが足りない、タグの入れ子が交差しているなど、HTMLとして正しくない箇所があると、整形ライブラリの解釈が意図と異なることがあります。整形結果をそのまま使う前に、ブラウザで表示を確認してください。