HTML Formatter
HTML Formatterの使い方｜pre/scriptを壊さず整形・圧縮
2026-02-07
まず、ここに貼ってください
view-source で見たHTMLが1行になっていて読めない、メール用テンプレートを縮めたい、コピペで貰ったマークアップが揃っていない。HTML関連で困ったら考える前に HTML Formatter に貼ってください。
整形はPrettier（HTMLプラグイン）、圧縮は軽量regex方式。<pre> / <textarea> / <script> / <style> の中身は保護されるので、整形・圧縮で壊れません。
即断テーブル
| 困っていること | 操作 | 補足 |
|---|---|---|
| 1行HTMLを読みたい | 「整形」ボタン | Prettier準拠でインデント |
| 配信前にサイズを減らしたい | 「圧縮」ボタン | タグ間の空白・コメント削除 |
| インデントを揃えたい | 「インデント」を選択 | 2/4スペース・タブ |
このツールで解決できる3つの問題
1. 「保存したHTMLが1行で読めない」
ブラウザで「ページを保存」したり、CMSが出力したHTMLは改行ゼロのことがあります。
→ 貼り付けて「整形」をクリック
PrettierのHTMLパーサが要素ごとに改行を入れてインデントします。<a> のようなインライン要素は適度に同じ行にまとめられます（htmlWhitespaceSensitivity: "css" 設定）。
2. 「メール用HTMLを最小化したい」
HTMLメール、AMP、SSR出力などサイズが効いてくる場面で。
→ 貼り付けて「圧縮」をクリック
軽量regex方式の圧縮で:
<!-- ... -->コメントを削除（IE条件付きコメント<!--[if ...]>は保護）> <のようなタグ間の空白を削除- 連続する空白を1個に
- 行頭・行末の空白を整理
<pre>, <textarea>, <script>, <style> の中身は事前に退避してから処理し、最後に復元します。
3. 「Tailwindのclassが横に長すぎて読めない」
<div class="flex items-center justify-between rounded-lg bg-white p-4 shadow-sm hover:shadow-md transition">
このようなclass山脈も、整形すれば1属性=1行に分割されます（属性が長い場合、Prettierが自動で折り返し）。printWidth: 120 で制御。
圧縮で「保護」されるタグ
| タグ | 理由 |
|---|---|
<pre> | 整形済みテキスト。空白・改行が表示に影響 |
<textarea> | 初期値の空白がフォーム表示に影響 |
<script> | JS構文を壊す可能性 |
<style> | CSS構文を壊す可能性 |
これら以外のタグの中身は通常通り圧縮されます。
圧縮の限界
軽量regex方式のため、以下は最適化しません:
- 属性値内の余分な空白（
class=" foo bar "→class="foo bar"） - ブール属性の短縮（
disabled="disabled"→disabled） - 不要な閉じタグの省略（
<li>...</li>→<li>...） - 同一属性の正規化
本番ビルドで厳密なminifyが必要な場合は、html-minifier-terser などをビルドツール経由で利用してください。本ツールは**「だいたい縮めたい」用途**として割り切るのがおすすめです。
ボタンとオプション
| 項目 | 動作 |
|---|---|
| 整形 | Prettierで整形、120桁折り返し |
| 圧縮 | regex方式でminify |
| インデント | 2スペース / 4スペース / タブ（整形時のみ） |
判断フロー
HTMLで困った
↓
HTML Formatterに貼る
↓
何をしたい？
├── 読みたい → 「整形」
└── 縮めたい → 「圧縮」
関連記事
| 記事 | 読むタイミング |
|---|---|
| HTML圧縮で壊れやすいパターン | 圧縮後に表示崩れが起きたとき |
| pre / script / style がなぜ保護されるのか | 圧縮の保護対象を理解したいとき |