HTML コードをフォーマット・ミニファイする方法

HTML のフォーマットとミニファイは目的が逆の 2 つの作業です。フォーマットはコードを開発者にとって読みやすくします。ミニファイはブラウザ用に軽量にします。ほとんどのプロジェクトで両方が必要 — 開発時はフォーマット済み、本番ではミニファイ済みです。

フォーマット:HTML を読みやすくする

フォーマッターは圧縮された、または整っていない HTML を受け取り、適切なインデント、改行、一貫したスペーシングを加えます。一目で構造が見えるようになります。

フォーマット前:

<div class="card"><h2>タイトル</h2><p>ここに本文</p><a href="/link">続きを読む</a></div>

フォーマット後:

<div class="card">
  <h2>タイトル</h2>
  <p>ここに本文</p>
  <a href="/link">続きを読む</a>
</div>

HTML をフォーマットする方法

1. HTML を貼り付ける — 整っていない、またはミニファイされたコードをフォーマッターに入力します。
2. 設定を調整 — インデントサイズ(2 または 4 スペース)を選び、インラインタグを保持するかどうか決めます。
3. 結果をコピー — フォーマットされた HTML はエディタにそのまま貼れます。

ミニファイ:HTML を軽量にする

ミニファイヤーは、ブラウザにとって不要なもの — スペース、コメント、省略可能な閉じタグ、冗長な属性値 — をすべて取り除きます。結果はコンパクトな 1 行の文字列になります。

HTML をミニファイする方法

1. フォーマット済み HTML を貼り付ける — インデント、コメント、スペース付きのコードを入力します。
2. オプションを設定 — コメントの削除、空白の縮約、属性の最適化のいずれを行うかを選択します。
3. ミニファイ済み出力をコピー — 本番ビルドで使用してください。

どちらをいつ使うか

ヒント

• ビルドプロセスで自動化 — ほとんどのツール(Webpack、Vite、Gulp)はデプロイ時に HTML を自動でミニファイできます。フォーマット済みのコードを書き、ミニファイされたコードを配信してください。
• コミット前にフォーマット — クリーンで一貫した HTML は Git の差分を読みやすくし、コードレビューを高速化します。
• ミニファイで HTML が壊れることはない — レンダリングに影響しないものだけを取り除きます。コメント、余分な空白、省略可能なタグは安全に削除できます。
• シンタックスハイライトを使う — フォーマッターもミニファイヤーも出力が正しいかを確認するためのハイライトを提供しています。