HTML整形ツール

計算方法

HTML整形の使い方

1. ソースコードを入力欄に貼り付けます。ドキュメント全体でも一部でもかまいません。
2. 「操作」で整形か圧縮を選び、必要ならインデントの幅を変えます。
3. 結果をコピーして、エディターに戻します。

整形で行うこと

• ブロック要素（div、ul、section など）は別の行に置き、中身をインデントします。
• 文章とインライン要素（a、strong、span など）は同じ行にまとめ、100文字前後で折り返します。表示が変わらないようにするためです。
• 整形済みの内容（pre、textarea）は、空白が表示に影響するため1文字も変えません。
• スクリプトとスタイルはブロックとしてインデントしますが、中身は書き換えません。
• liやtdのように省略できる終了タグは、出力で補います。

圧縮で行うこと

連続する空白と改行を1つの空白にまとめ、コメントを取り除きます（古いブラウザー向けの条件付きコメントは残します）。ブロック要素の間の空白はなくし、インライン要素の間は表示に影響するため空白を1つ残します。style内のCSSは詰め、JavaScriptには手を加えません。

注意点

完全なHTMLパーサーではありません。誤りのあるコードは修正せず、できるだけそのまま通して警告します。{% if %}や<?php ?>のようなサーバー側の構文を含むテンプレートでは、インデントが不自然になることがあります。

よくある質問

出典・根拠

• WHATWG HTML Living Standard – Syntax: Void-Elemente, Raw-Text-Elemente (script, style), optionale End-Tags
• MDN – How whitespace is handled by HTML, CSS and in the DOM
• MDN – <pre>: the preformatted text element (whitespace is preserved)

更新日：2026年9月30日 · 編集方針