HTML整形ツール

HTMLをオンラインで整形

更新日：2026年9月29日 · 著者：サマン

メール作成ツール、CMSのエクスポート、ページビルダー、圧縮された本番サイトから出てきたHTMLは、たいてい巨大な1行です。その中から1つのdivを探すのは苦痛です。このページはHTMLに設定したコード整形ツールです。マークアップを貼り付けると、すべての要素がそれぞれの行に置かれ、入れ子の深さに応じてインデントされます。

整形には、広く使われているオープンソースの整形ライブラリjs-beautifyを使い、ブラウザーのタブ内で実行します。何もアップロードされません。

整形で行われること

• ブロック要素（div、section、ul、liなど）は、それぞれ新しい行から始まり、親要素の下にインデントされます。
• インライン要素（a、b、span、emなど）は、属しているテキストの行の中に残ります。
• 属性は、書かれたとおりの内容と順序で保持されます。
• 空行は、意図して入れたものであれば、連続2行まで保持されます。

整形と圧縮の使い分け

人がファイルを読んだり編集したりするなら整形を、ブラウザーがダウンロードするなら圧縮を使います。コメントとインデントを取り除くと、gzip前のHTMLページで一般に10〜20%小さくなります。ほとんどのサイトでは、サーバー側での圧縮のほうが効果は大きいものの、メールやほかのページに埋め込むテンプレートでは圧縮も役に立ちます。

関連ツール

ページに合わせたスタイルシートにはCSS圧縮ツールを、スクリプトにはJavaScript整形ツールを使ってください。編集前後のマークアップを比べるには、テキスト比較ツールが便利です。