HTMLコード整形・美化

HTMLの階層を読みやすく整える

HTML整形ツールは、貼り付けたHTML文書や断片にインデントと改行を加え、タグの入れ子を追いやすい形にします。圧縮されて一行になったソースを読むときや、チームでインデントをそろえるときに使えます。出力はHTMLソースのテキストで、ページの表示結果やタグの修正案ではありません。

整形では要素名、属性、テキストの内容を編集するのではなく、主に空白の配置を組み直します。ただしHTMLでは空白が表示やテンプレート処理に関係する場合もあるため、結果をそのまま保存する前に差分を確認してください。HTMLの解析規則や適合性の考え方はWHATWG HTML Standardで確認できます。

インデント設定で変わること

インデント幅は2・4・8文字から選び、インデントの種類はスペースまたはTabにします。幅はネストした階層ごとに加わる空白の量を決めます。Tabを選んだ場合は空白文字の代わりにタブ文字で字下げします。既定値はスペース2つです。

「改行を保持」を有効にすると、入力に含まれる連続改行を一定範囲で残す設定になります。無効にすると、元の改行を引き継がずに整形します。「内部HTMLをインデント」は文書内の要素に追加の字下げを適用するかを切り替えます。既定では無効です。固定の行幅で属性や長いテキストを折り返す機能はないため、長い行が残ることがあります。

整形前後を短い例で見る

たとえば、<main><h1>お知らせ</h1><p>更新しました</p></main>のように詰まった入力は、2スペース設定では親要素と子要素の境目が改行と字下げで見分けやすくなります。4または8スペースに変えると階層の幅が変わりますが、見出しや段落の文章が別の言語に変換されるわけではありません。

元のコードと整形後を並べ、属性値、コメント、テキスト、テンプレート記法が意図どおり残っているかを確認すると、レビューや編集に使いやすくなります。

貼り付けて整形結果を確認する

1. HTMLを入力する

   入力欄にHTMLの全体または断片を貼り付けます。短い例を読み込んで設定の違いを試すこともできます。

2. プロジェクトの書式に合わせる

   インデント幅を2・4・8から選び、スペースかTabを指定します。元の改行を活用したい場合は「改行を保持」を有効にし、内部要素にも字下げを加えたい場合は「内部HTMLをインデント」を切り替えます。

3. 出力を比較する

   整形結果の文字数と行数を見ながら、要素の順序、属性、文章、コメントが保たれているかを元データと照らし合わせます。整った見た目だけで正しいHTMLだとは判断できません。

4. コピーまたは保存する

   確認後に結果をコピーするか、HTMLファイルとしてダウンロードします。編集元を上書きする場合は、差分と実際の表示を確認してから保存してください。

整形についてよくある質問

保存前に確認するポイント

整形結果は読みやすさのための出力です。HTMLの妥当性、安全性、アクセシビリティやブラウザー間の動作を証明するものではありません。

• 空白や改行の変化が問題になりやすいpre、textarea、メール本文、テンプレート、文字列比較テストを含む場合は、該当箇所を特に確認してください。
• 結果にエラーが出たり期待と異なる配置になった場合は、出力を採用せず、入力の一部を分けて試すか、専用のHTML検査手段で原因を調べてください。
• 認証情報や未公開のコードを扱うときは、利用する環境のデータ取扱いを確認し、必要最小限の内容だけを入力してください。
• 配布や本番反映の前に、差分、プロジェクトのテスト、対象ブラウザーでの表示を確認してください。