HTML フォーマッタ & 圧縮器

HTML フォーマッターとは？#

HTML フォーマッターは、形を失ったマークアップ——すべてのタグを 1 行に折りたたんだテンプレートエンジンの出力、誰か別人のインデントスタイルで貼り付けられたスニペット、何か月もかけて膨らんだメールテンプレートの断片——を受け取り、入れ子がひと目で分かるように再インデントします。逆の作業である圧縮は、ブラウザが不要とするもの——コメントとタグ間の空白——を削除して同じマークアップを絞り込みます。

このページは両方を行い、2 つの方向は HTML が要求するため異なる方法で作られています。整形は js-beautify の html_beautify を使い、要素を一貫してインデントし、あなたが本当に欲しい改行を保ちます。圧縮は控えめな、手書きのスキャナーです。従う最も重要な規則は、<pre>、<code>、<textarea>、<script>、<style> 要素の内容にはまったく手を触れないことです——<pre> ブロックや <script> の中の空白を折りたたむことはページを破壊します。それらの要素では空白は装飾ではなくデータの一部だからです。これを知らない素朴な minifier こそ、コードサンプルが公開サイトで突然インデントを失う理由です。

使い方#

1. 左のHTMLペインにマークアップを貼り付けるか、サンプルをクリックして短い例ドキュメントを読み込みます。
2. ツールバーでインデントを選びます: 2、4（HTML の既定）、タブ。入れ子タグはすぐに積み上がるため、4 スペースはマークアップの一般的なハウススタイルです。
3. アクションをクリックします:
   • 整形 — js-beautify による再インデント。手動で改行された行が一緒につぶれないよう、既存の改行を保ちます。
   • 圧縮 — HTML コメントを削除し、タグ間の空白をなくし、通常のテキストノードの空白を整えます——ただし <pre>、<code>、<textarea>、<script>、<style> の中は書かれた通りにそのまま残します。
4. 出力ペインで結果を読みます。出力ヘッダーのコピーで取り出し、クリアで両ペインをリセットします。

主な特徴#

• 重要なものを保持。 <pre>、<code>、<textarea>、<script>、<style> の内容は圧縮中もそのままコピーされます。それらの要素内の空白は意味を持つため、削除すればブラウザが描画するものを変えてしまいます。
• 圧縮でコメント削除、整形で保持。 <!-- ... --> ブロックは、明示的に圧縮を求めたときだけ削除されます。整形はそれらをそのまま残します。
• HTML に優しい既定インデント。 4 スペース。深く入れ子になったマークアップは広いステップの方が読みやすいためです。プロジェクトに合うなら 2 かタブに切り替えてください。
• 2 ペイン、コピーレディ。 編集可能な入力、読み取り専用の出力、1 クリックコピー。
• ブラウザ内だけで動作。 js-beautify はページに同梱されオンデマンドで読み込まれます。バックエンドもアップロードもなく、マークアップは端末に留まります。

実例#

テンプレートから引いた、コメントと <pre> ブロックを含む商品カードの断片:

入力:

<div class="card">
<!-- price shown gross -->
<span class="price">£12.00</span>
<pre data-lang="bash">npm install
npm run build</pre>
</div>

4 スペースで整形をクリック:

<div class="card">
    <!-- price shown gross -->
    <span class="price">£12.00</span>
    <pre data-lang="bash">npm install
npm run build</pre>
</div>

同じ入力で圧縮をクリック:

<div class="card"><span class="price">£12.00</span><pre data-lang="bash">npm install
npm run build</pre></div>

注意すべきことが 3 つ。コメントは消えました。タグ間の空白は消えました——</span> と <pre> が直接隣接し、HTML ではタグ間の空白が装飾的であるため安全です。しかし <pre> の内側の改行（npm install と npm run build）は、書かれた通りにまだそこにあります。それが規則の仕事ぶりです: 装飾を折りたたみ、データを保つ。

よくある質問#

圧縮後もタグ間に一部の単一スペースが残るのはなぜですか？#

ブロックレベルのタグ間に挟まれた、空白のみのテキストノードは完全に削除されます。しかし、テキスト行内の単一スペース——Hello <em>world</em>——は意味を持ち、削除すれば単語が結合されてしまうため保持されます。スキャナーは意味のあるテキストノードのスペースを保ち、純粋に装飾的なタグ間空白だけを削除します。

圧縮は属性・クォート・既定値を削除しますか？#

いいえ。属性構文の書き換え、クォートの削除、ブール属性の折りたたみ、type="text" の削除は行いません。それらの変換はスキーマ知識を持つ完全な HTML パーサーを必要とし、間違えやすいです。このツールは安全側に立ち、コメントと装飾的な空白だけを削除します。

<script> タグ内の JavaScript も圧縮しますか？#

いいえ。<script> の内容全体は手つかずでそのまま通ります——変更すれば ASI を壊す可能性があることと、別の JS minifier が format/js ページに存在するための両方の理由からです。スクリプトを圧縮したいなら、それを引き抜いてこのツールに通し、戻して貼ってください。

{{ var }} や {% if %} のようなテンプレート構文を理解しますか？#

整形はテンプレートトークンの周りを再インデントし、通常は読める出力を生成します。圧縮はテンプレートタグを通常のテキストとして扱うため、意味を変えるような形で内部の空白を折りたたむことはありません。重いテンプレートには、出力を強力な出発点として扱い、レンダラに対して検証してください。