⚙️整形の設定

インデント

1行の最大文字数

元の空行を残す

📁ファイルから読み込む

ファイルをドロップ、またはクリックして選択端末内で読み込まれ、アップロードされません

圧縮では、タグの間の余分な空白とコメントを取り除きます。pre / textarea / script / style の中身と、IE向けの条件付きコメントはそのまま残します。

HTML整形ツールは、1行に詰められたHTMLや、インデントが崩れたHTMLを読みやすい形に整えるツールです。逆に、配信用に空白とコメントを取り除いて軽くすることもできます。

ビルドツールが出力したHTMLや、CMSから取り出したテンプレートは、改行がなく構造を追えないことがよくあります。整形して階層を可視化すると、閉じ忘れているタグや入れ子の誤りにも気づきやすくなります。

圧縮では、タグとタグの間の余分な空白とコメントを削ります。pre や textarea の中身は表示に影響するため、script や style の中身とあわせてそのまま残します。IE向けの条件付きコメントも保持します。

タグ同士が隣接している箇所の空白だけを取り除いています。ただしHTMLでは、インライン要素の間の空白が表示上の意味を持つ場合があります（単語の区切りなど）。圧縮後は必ずブラウザで表示を確認してください。

同じ理由で、インライン要素の間に改行やインデントが入ると、そこに半角スペース1つ分の隙間が生じることがあります。display: inline-block を横に並べているレイアウトで起きやすい現象です。CSSで font-size: 0 を使うか、Flexboxに置き換えると解消します。

戻りません。整形はインデントと改行を付け直すだけで、失われたコメントや元の改行位置は復元できません。読むためには十分ですが、元のファイルの代わりにはなりません。

数MB程度までは問題ありません。それを大きく超えると、ブラウザの反応が一時的に止まることがあります。

整形されたHTMLを圧縮すると、多くの場合10〜20%ほど小さくなります。ただしサーバーでgzipやBrotliによる圧縮が有効になっていれば、空白の削除による差はほとんど吸収されます。表示速度の改善という点では、HTMLの圧縮より画像の最適化やJavaScriptの削減のほうが効果は大きいです。