🌐

HTML 整形 圧縮

Format and minify HTML code with customizable indentation.

開発者ツール ローカルで実行 データは送信されません
HTML beautify minify 整形
Indent:
HTML 入力
0文字
→
出力
0文字
注: 整形モードでは js-beautify を使用し、設定可能なインデントで HTML を整形します。圧縮モードではコメントを削除し、空白を折りたたみます。すべての処理はブラウザ内で完結し、データはサーバーに送信されません。

HTML 整形とは？

HTML 整形は、圧縮されたマークアップや不揃いなマークアップを、読みやすく適切にインデントされた HTML に変換します。ページ構造のデバッグ、テンプレートのレビュー、ドキュメントやコードレビュー用のスニペット準備に役立ち、コードをサーバーに送信する必要はありません。

HTML 整形 圧縮の使い方

  1. 入力パネルに HTML を貼り付けます。
  2. マークアップを整形するか圧縮するかを選択します。
  3. 必要に応じてインデントオプションを調整します。
  4. 編集、レビュー、デプロイ用に整形後の出力をコピーします。

関連ツール

🎨
CSS フォーマッター
カスタマイズ可能な書式設定で CSS コードを整形または圧縮
 📝
JSフォーマッター
Prettier形式のフォーマットでJavaScriptコードを整形または圧縮
 🏷️
HTML エンティティ 変換
HTML エンティティをエンコードまたはデコード — 名前付き形式と数値形式
HTML Formatterを理解する ▾
例
入力 <div><p>Hello</p><ul><li>Item</li></ul></div>
出力 <div> <p>Hello</p> <ul> <li>Item</li> </ul> </div>
一般的な使用例
  • ビルド出力や本番ページからコピーしたミニファイ済みHTMLを整形
  • テンプレートやコンポーネントを編集する前にネストされたマークアップ構造を確認
  • 公開前にCMSやWYSIWYGで生成されたHTMLを整理
  • デバッグや手動編集の後にHTMLスニペットを再度ミニファイ
このツールを使う理由
  • ネストされたHTML構造をぐっと見やすくし、デバッグしやすくします。
  • マークアップの整形にも、編集後の再圧縮にも便利です。
  • ローカルで実行されるため、テンプレートやスニペットはどこにもアップロードされません。
よくある質問
HTML FormatterはHTMLを検証しますか？

このフォーマッターはインデントと可読性に重点を置いています。不正なHTMLも可能な限り処理しますが、厳密なバリデーターではありません。仕様への準拠を確認する必要がある場合は、専用のバリデーターを使用してください。

整形するとページのレンダリング結果は変わりますか？

いいえ。ブロック要素間に空白を追加しても表示結果は変わりません。ただし、テキスト内の<span>のようなインライン要素では空白が影響する場合があるため注意してください。フォーマッターはインラインコンテンツを保持します。

<!DOCTYPE>や<head>を含む完全なHTML文書を整形できますか？

はい。フォーマッターは doctype 宣言、head セクション、スクリプト、スタイルを含む完全なドキュメントを、内容を一切削除せずに処理します。

ファイルサイズの制限はありますか？

すべてブラウザ内で実行されるため、サーバー側の制限はありません。非常に大きなファイル（数百 KB）は、デバイスによって処理に少し時間がかかる場合があります。