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