HTMLフォーマッタの使い方｜整形と圧縮(minify)の違い
公開日：2026年10月14日 更新日：2026年9月15日 運営：シルギア（アナライズギア株式会社） 対象ツール：HTMLフォーマッタ（整形・圧縮）
HTMLフォーマッタは、1行に詰まったHTMLや手作業でばらついたインデントを、目的に合わせて「読みやすい形（整形）」または「軽い形（圧縮）」に整え直すツールです。仕組みは、正規表現ベースの簡易トークナイザでHTMLをコメント・宣言（DOCTYPEなど）・タグ・テキストの4種類に分割し、順に並べ直すというもの。分割した断片をつなげれば必ず元の文字列に戻せるため、変換で内容そのものが失われることはありません。処理はすべてブラウザ内で完結し、貼り付けた内容がサーバーへ送られることはありません。
整形と圧縮(minify)の使い分け
整形モードは、タグごとに改行し、入れ子（ネスト）の深さに応じてインデントを付けて構造を見える化します。コードを読む・編集する・レビューするときに向いています。圧縮(minify)モードは、タグの間にある改行やインデント用の空白を取り除き、内容を保ったまま1行にまとめます。編集時は整形、配信時は圧縮という使い分けが基本です。圧縮すると転送量がわずかに減り、表示が少し速くなります。ツールは変換のたびに文字数を「変換前→変換後（削減量／削減率）」の形で表示するので、どれだけ軽くなったかがひと目でわかります。整形時は行数と文字数が表示されます。
インデントの考え方
インデント幅はスペース2つ・スペース4つ・タブの3種類から選べます。プロジェクトのコーディング規約やエディタ設定に合わせてください。整形では、中身がテキストだけの要素は無駄に縦長にしないため1行にまとめ、子要素を持つ要素だけを改行して階層化します。たとえば<li>項目</li>のような要素は開始タグ・中身・終了タグを同じ行に置き、リストや表の見通しを良くします。深さは開始タグで1段深くなり、対応する終了タグで1段浅くなる、という単純な規則で決まります。インデント幅の設定欄は整形モードのときだけ表示され、圧縮では使いません。
void要素と自己終了タグ
br・img・input・meta・link・hr・area・col・source などは、HTMLの仕様上、閉じタグを持たない空(void)要素です。本ツールはこれらを1つの要素として扱い、</br>のような不要な閉じタグを勝手に増やしたり、インデントの入れ子を深くしたりしません。<br />のように自分で閉じている自己終了タグも同様に、その行だけを出力して深さを変えません。おかげで、フォームや画像の多いマークアップでも閉じタグの階層がずれる心配なく素直に整形できます。
pre・textarea・script・style を保持する理由
整形・圧縮のどちらでも、pre・textarea・script・style の中身はそのまま保持します。これらの要素の内部では、空白や改行そのものに意味があるからです。preは見た目の空白がそのまま表示に反映され、textareaは中身がフォームの初期値になり、scriptのJavaScriptやstyleのCSSは空白を変えると文字列や記述の意味が変わる恐れがあります。ツールは開始タグと終了タグの位置だけを整え、中身には一切手を加えません。たとえば<script>var x = 1;</script>の中の空白は、圧縮しても詰められずに残ります。中身が1行に収まる場合は開始タグ・中身・終了タグを同じ行に、複数行にわたる場合は中身を原文のまま挟む形で出力します。
実際の整形と圧縮の例
小さな例で動きを確かめましょう。<ul><li>りんご</li><li>みかん</li></ul>を、スペース2つで整形すると次のようになります。1行目に<ul>、2〜3行目にそれぞれ半角スペース2つを付けた<li>りんご</li>と<li>みかん</li>、4行目に</ul>、という4行構成です。<li>は中身がテキストだけなので1行にまとまり、<ul>の子であることがインデント2つで示されます。
逆に、この4行の整形済みHTMLを圧縮すると、行頭の空白と各行の改行がすべて取り除かれ、元の<ul><li>りんご</li><li>みかん</li></ul>という1行に戻ります。圧縮は改行を含む整形用の空白を消し、行内の意味ある空白は1つだけ残す方式です。コメントは既定で残り、圧縮モードで「コメントを除去する」にチェックしたときだけ削除されます。
簡易整形の限界と使いどころ
本ツールは簡易トークナイザによるbest-effort（できる範囲）の整形です。ブラウザのDOMパーサのように欠けたタグを補完したり、要素を並べ替えて正しい構造に直したりはしません。閉じタグの過不足がある壊れたHTMLでは、インデントの階層が本来の意図とずれることがあります。つまり「壊れたHTMLを直す」ツールではなく、あくまで表記を整える・詰めるためのものです。また、<a>や<span>といったインライン要素の間の半角スペースは表示上の意味を持つことがあり、圧縮でまれに詰まりすぎる・残りすぎるケースがあります。重要なページは圧縮後に表示や差分を確認してください。日々の用途としては、コピーしてきたHTMLの構造を読み解くとき、規約に合わせてインデントをそろえるとき、配信前に少しでも軽くしたいときに手早く使えます。