HTML整形ツール（無料・登録不要）
HTMLを貼り付けるだけで即座に整形・圧縮。インデント幅・タグ名大文字小文字・空白行のオプション設定に対応。シンタックスハイライト・エスケープ変換・ダークモード・整形前後比較・.htmlダウンロード対応。ブラウザ完結・無料・登録不要。
最終更新：2026年5月14日
HTML整形ツールの使い方
- 左側の入力欄にHTMLを貼り付ける（.htmlファイルのドラッグ&ドロップも可）
- インデント幅・タグ名変換・空白行のオプションを選択する
- 「整形」ボタンを押す（または Ctrl+Enter）
- 右側に整形・シンタックスハイライト済みのHTMLが表示される
- 「コピー」で即クリップボード、「.html保存」でファイルダウンロード
- 「比較」タブで整形前後の変化を確認する
- 「エスケープ」でHTMLタグを文字として掲載可能な形に変換する
使い方ガイド：こんな場面で役立ちます
圧縮されたHTML・ライブラリから取得したHTML・ブラウザで「ページのソースを表示」からコピーしたHTMLを左側の入力欄にそのまま貼り付けてください。.htmlファイルをドラッグ&ドロップで読み込むこともできます。
インデント幅（2/4スペース/タブ）・タグ名（変換なし/小文字化/大文字化）・空白行ルールを選択します。チームの規約に合わせて設定してください。
「整形」：読みやすい複数行フォーマットへ変換。「圧縮」：本番環境向けの軽量HTML。「エスケープ」：特殊文字をHTMLエンティティに変換（<→<）。「比較」タブ：整形前後の差分をサイドバイサイドで確認。整形結果はシンタックスハイライトでタグ名・属性名・属性値が色分けされます。
「コピー」で即クリップボード転送、「.html保存」でファイルダウンロード。入力したHTMLは自動的にLocalStorageに保存され、「履歴」から最新5件を再呼び出しできます。
主な利用シーン
コードレビュー前の整形
インデントを統一することでチームのHTMLスタイルを揃えます。PRレビュー前に整形することで、フォーマット差分によるノイズを防げます。
本番デプロイ前の圧縮
本番環境向けに空白・コメントを除去してファイルサイズを削減。CDN経由で配信する場合のネットワーク転送量を最小化できます。
ブログ・記事へのコード掲載
技術ブログでHTMLコードを掲載するとき、エスケープ変換を使って「<div>」をそのまま文字として表示できます。
HTML学習・教材作成
崩れたHTMLを整形して構造を理解。シンタックスハイライトでタグ・属性・値の関係が視覚的に把握しやすくなります。
HTMLのminify（圧縮）でファイルサイズ削減
HTMLのminifyとは、空白・改行・コメントを取り除き、ファイルサイズを最小化する処理です。本番環境への配信速度向上に直結します。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
</head>
<body>
<!-- ヘッダー -->
<header class="site-header">
<h1>見出し</h1>
</header>
</body>
</html>
<!DOCTYPE html><html lang="ja"><head><meta charset="UTF-8"><title>ページタイトル</title></head><body><header class="site-header"><h1>見出し</h1></header></body></html>
minifyによる最適化の内容
タグ間の余分な空白・タグ属性間のタブ・要素間の改行を全て削除します。
<!-- ... --> 形式のコメントを除去します。開発用メモが本番環境に残るのを防げます。
テキストノード内の複数の空白を1つの空白に圧縮します。
HTMLエスケープとは：特殊文字変換の仕組み
HTMLエスケープとは、HTMLで特別な意味を持つ文字を、ブラウザに文字として表示させるために専用の「エンティティ参照」形式に変換することです。技術ブログやドキュメントでHTMLコードをそのまま表示したい場合に必要です。
| 元の文字 | エスケープ後（エンティティ） | 用途 |
|---|---|---|
< |
< |
タグの開始記号。エスケープしないとHTMLタグとして解釈される |
> |
> |
タグの終了記号 |
& |
& |
エンティティの開始記号。URLクエリパラメータのセパレータ等 |
" |
" |
属性値の引用符（ダブルクォート内での使用） |
' |
' |
属性値の引用符（シングルクォート内での使用） |
アンエスケープ（逆変換）の使い場面
メール本文やDBから取得したHTMLにエンティティ参照が含まれている場合、アンエスケープすることで実際のHTMLコードに戻せます。バックエンドからAPIで受け取ったHTMLコンテンツの確認にも活用できます。
読みやすいHTMLの書き方ガイド
整形ツールを使った後も、HTMLコードの品質を保つための基本的なベストプラクティスを把握しておきましょう。
| 項目 | 推奨 | 理由 |
|---|---|---|
| タグ名 | すべて小文字（HTML5準拠） | XHTML互換性・一貫性 |
| 属性値 | ダブルクォートで統一 | 可読性・エスケープ管理 |
| インデント | 2スペースまたはタブで統一 | プロジェクト内の一貫性 |
| コメント | セクション区切りのみ（過剰コメント禁止） | 本番コード肥大化防止 |
| 自己終了タグ | HTML5では <br>（スラッシュ不要） | HTML5標準に準拠 |
HTMLバリデーションも合わせて実施しよう
整形後は W3C HTML Validator でHTMLの構文エラーや非推奨タグを確認することをおすすめします。検索エンジンのクロールエラー防止・アクセシビリティ改善にも有効です。
よくある質問（FAQ）
- HTML整形ツールとは何ですか？
- HTML整形ツール（HTMLフォーマッター）は、崩れたHTMLや圧縮されたHTMLに適切なインデントと改行を追加して読みやすく整形するツールです。コードレビューやデバッグの際に活用されます。
- minify（圧縮）で何バイト削減できますか？
- 一般的なHTMLファイルで30〜70%程度のサイズ削減が見込めます。コメントが多いHTMLほど圧縮率が高くなります。圧縮後の実際のサイズと圧縮率は統計バーに表示されます。
- <pre>タグ内のテキストも整形されますか？
- いいえ。<pre>・<code>・<textarea>タグ内のテキストはコンテンツの一部なので、整形・圧縮時も空白・改行が保持されます。
- 入力したHTMLはサーバーに送られますか？
- いいえ。すべての処理はブラウザ内（JavaScript）で完結します。サーバーへの送信は一切行われないため、機密情報を含むHTMLも安心してお使いいただけます。
- スマートフォンでも使えますか？
- はい。モバイルファーストのレスポンシブデザインに対応しており、スマートフォン・タブレットでも快適に操作できます。