仕組みと特徴
DOMパーサーを用いてHTMLの階層構造を解析し、適切なインデントを自動的に付与します。単なるタグの改行だけでなく、<script>や<style>タグ内のJavaScriptやCSSもそれぞれのフォーマッターで同時に整形されるのが特徴です。
また、<pre>や<textarea>など、空白文字が意味を持つ要素内のテキストはそのまま保持されます。すべての処理はお使いのブラウザ内で完結するため、機密性の高い開発中のテンプレートコードを外部サーバーに送信する必要はありません。
注意点とレンダリングへの影響
インデントや改行の追加は、ブラウザでの表示に影響を与える場合があります。特にインライン要素（<span>や<a>など）の間に空白文字が挿入されると、意図しない余白が画面上に描画されることがあります。
そのため、ピクセル単位での厳密な表示確認が必要な本番環境用のコードに直接適用するのではなく、コードの構造確認やデバッグ時の利用をおすすめします。また、極端に構文が壊れたHTMLを入力すると、正しく解析できずインデントが崩れる可能性があります。
インデントの設定
プロジェクトのコーディング規約に合わせて、インデントの形式を選択できます。一般的にはスペース2桁または4桁が主流ですが、タブ文字を使用することも可能です。チーム開発において異なるエディタを使用している場合でも、このツールを通すことで手軽にフォーマットを統一できます。
なお、本ツールはコードのインデントを揃えて可読性を高めることを目的としており、タグの最適化や不要なコードの削除といった構造自体の変更は行いません。
よくある質問
インデントによってブラウザでの表示（見た目）は変わりますか？
はい、変わる可能性があります。インライン要素の間に改行やスペースが追加されることで、画面上に意図しない隙間（ワードブレイク）が生じることがあるため、表示確認済みの本番コードへの適用には注意が必要です。
整形するHTMLデータが外部に送信されることはありますか？
いいえ、一切ありません。すべての解析とフォーマット処理はJavaScriptを用いてブラウザ上で実行されるため、外部サーバーにデータが保存されたり送信されたりすることはありません。
styleタグやscriptタグの中身はどうなりますか？
<code><style></code>内のCSSや、<code><script></code>内のJavaScriptは自動的に検出され、それぞれ専用のフォーマッターを通して適切にインデント処理されます。
preタグやtextareaタグ内のテキストもインデントされますか？
いいえ。これらのタグ内にあるテキストは空白や改行がそのまま表示に影響するため、ツールが自動で判別し、中身を変更せずに元の状態を維持します。
構文エラーのあるHTMLでも整形できますか？
軽微なエラーであれば処理できることもありますが、タグの閉じ忘れなど大きく構造が壊れている場合は、正しく階層を認識できず誤ったインデントになる可能性があります。事前にバリデーションを行うことをおすすめします。
ツールの不具合や改善案はありますか。 フィードバックを送る