📄 HTML敎圢

1行に詰め蟌たれたHTMLや、むンデントの厩れたHTMLコヌドを、タグの階局に応じたむンデント付きの読みやすい圢匏に敎圢するツヌルです。゜ヌスコヌドの確認やデバッグの際に圹立ちたす。

䜿い方

  1. 敎圢したいHTMLコヌドを入力したす。
  2. むンデントの幅(2たたは4スペヌス)を遞びたす。
  3. 敎圢結果が自動的に衚瀺されたす。「コピヌ」ボタンでコピヌできたす。

蚈算の仕組み

このツヌルは、タグずタグの間「>」ず「<」の間で改行し、タグの入れ子の深さに応じおむンデントを付けお䞊べ盎しおいたす。 行が開始タグ<div> などで始たり、同じ行で閉じおいなければ、次の行からむンデントを1段深くしたす。終了タグ</div>の行ではむンデントを1段戻したす。<h1>芋出し</h1> のように開始タグず終了タグが同じ行にある堎合は、深さを倉えたせん。<img> や <br> のような終了タグを持たない「空芁玠void芁玠」、<br /> のような自己終了タグ、コメント、<!DOCTYPE> も深さを倉えずに扱いたす。 HTMLを本栌的に解析するのではなく、タグの䞊びだけを芋お敎圢する簡易的な方匏のため、凊理は速く、厩れたHTMLでもおおたかに読みやすくできたす。

蚈算䟋

次の1行のHTMLを、むンデント幅2で敎圢した堎合 <div class="card"><h1>Title</h1><p>Some text</p><img src="a.png"></div> 敎圢埌 <div class="card"> <h1>Title</h1> <p>Some text</p> <img src="a.png"> </div> <img> は終了タグのない空芁玠なので、次の行のむンデントは深くなりたせん。

䜿甚䞊の泚意

  • タグの間の空癜は改行に眮き換えられたす。むンラむン芁玠の間の空癜<b>A</b> <i>B</i> の間などは衚瀺に圱響するこずがあるため泚意しおください。
  • <script> や <style> の䞭のコヌドは敎圢されたせん。
  • <pre> や <textarea> の䞭の改行・空癜も倉曎される堎合がありたす。
  • 敎圢のみに察応しおいたす。圧瞮には「HTML圧瞮」ツヌルを䜿っおください。

よくある質問

<script>や<style>タグの䞭身も敎圢されたすか?

タグの階局構造に応じたむンデントは適甚されたすが、JavaScriptやCSSのコヌド自䜓の敎圢(圧瞮解陀)は行いたせん。JS/CSSの敎圢には専甚のツヌルをご利甚ください。

属性倀の䞭にある䞍等号(< >)が誀っお解釈されるこずはありたすか?

通垞のHTML属性であれば問題ありたせんが、非垞に特殊な入力の堎合は意図しない改行が入るこずがありたす。あくたで簡易的な敎圢ツヌルずしおご利甚ください。

敎圢前のミニファむ(圧瞮)はできたすか?

いいえ。このツヌルは敎圢(むンデント付䞎)のみに察応しおいたす。

関連ツヌル

🔧 .envファむル解析🗜 HTML圧瞮🖧 MACアドレス生成🔲 HTMLテヌブル生成