HTML フォーマッタ — オンラインで HTML を美しく、縮小する無料

どんな HTML でも（ビルドパイプラインから出力された1行の圧縮済みコードでも）貼り付ければ、ツールが適切なインデント、1行1タグ、一貫した空白で整形し直します。インデントは2、4、8スペースから選べます。出力は、そのままエディターに貼り付けたり、コードレビューのコメントに貼り付けたりできる状態です。

整形は読みやすさのために HTML を展開します。各タグを独立した行に配置し、入れ子の子要素をインデントし、セクション間の空行を保持します。圧縮はコメントを削除し、連続する空白を詰め、改行を取り除いて、より少ないバイト数でファイルを出力します。編集や確認には整形を、本番デプロイには圧縮を使いましょう。

いいえ。フォーマッターは script ブロックと style ブロックを検出し、内容を適切な JS または CSS のルールで整形します。そのため、インラインスクリプトは正しく保たれ、スタイルシートも読みやすいままです。自己終了タグ、空要素、名前空間付き属性（svg:xmlns、xlink:href）も正しく処理されます。

通常のHTMLやHTMLライクなテンプレートはうまく処理できますが、純粋なJSX（波括弧の式、フラグメント、大文字で始まるコンポーネントタグ）はHTMLとして解析されるため、見た目に関する細かな問題が生じる場合があります。フレームワーク固有のコードには、お使いの方言に合わせて設定したPrettierをおすすめします。生のHTML、.htm、テンプレートファイルには、当ツールが最適です。

アップロードは行われません。フォーマッターはすべてブラウザ内で動作するため、社内ページのテンプレート、下書きメール、非公開データを含む HTML を、デバイスから外に出すことなく安全に貼り付けられます。

圧縮機能は、HTMLコメントを削除し、タグ間の連続する空白を1つのスペースにまとめ、改行を除去します。結果として得られるのは、表示は完全に同一でありながら通常10～30%小さくなったHTMLです。サーバー側のgzipと組み合わせれば、コンテンツの多いページの初期表示サイズを大幅に削減できます。

はい。「ダウンロード」をクリックすると、整形した出力をoutput.htmlとして、または圧縮した出力をoutput.min.htmlとして保存できます。ファイルはUTF-8でエンコードされているため、英語・キリル文字・CJK・右から左へ書く言語のコンテンツでも同様に問題なく扱えます。

これはブラウザのみで動作する小さなユーティリティで、ホスティングコストがゼロのため、開発者向けツールキットの一部として無料で提供しています。広告はなく、出力に対する追跡もなく、ブラウザがメモリに保持できる範囲を超えるファイルサイズの制限もありません。

整形モードでは、インデントを2・4・8スペースから選べます。エディターやコードスタイルで使っている幅を選び、結果をコピーするか output.html としてダウンロードすれば、書式をそのままプロジェクトに引き継げます。

インデントセレクター（2・4・8スペース）は「整形」モードでのみ適用されます。「最小化」は仕様上すべての空白と改行を除去するため、インデントする対象が残らないからです。インデント幅を再び反映させるには、「整形」に戻してください。

貼り付けや編集を行うと、ツールが自動的に構造チェックを実行し、閉じられていないタグ、対応の取れていないタグ、余分な閉じタグを出力パネルのすぐ下に一覧表示します — 別途ボタンを押す必要はありません。緑色の「構造上の問題は見つかりませんでした」というメッセージが、マークアップが正しく整形されていることを示します。

Prettify モードでインデントを 2 スペースに設定してください。これは最も一般的な慣習で、差分もコンパクトに保てます。その後、structural-issues パネルを確認して、閉じていないタグが残っていないかチェックします。確認が済んだら、本番に反映する前に Minify モードに切り替えて、余分な空白を取り除きます。

はい。.html、.htm、.xhtml ファイルをアップロードエリアにドラッグするか、クリックして参照すると、その内容が貼り付けたのと全く同じように入力ボックスにそのまま読み込まれます。そこから先は、マークアップがファイル由来でも貼り付け由来でも、Prettify、Minify、インデント幅、構造チェッカーはすべて同じように機能します。

はい。出力が生成されると、出力パネルと主要アクションエリアの隣に Copy ボタンが表示されます。それをクリックすると、現在の Prettify または Minify の結果が即座にクリップボードにコピーされ（確認として一瞬「Copied!」と表示されます）、中間の .html ファイルを保存することなくエディターやコードレビューのコメントに直接貼り付けられます。

いいえ — HTML Prettify は完全にブラウザ内で実行されるため、貼り付けた内容が使用しているマシンから離れることはありません。トークン、キー、または顧客データを含むものをチェックする場合、これは重要です。タブを閉じるだけでクリアできます。

エラーは、解析できなかった最初の位置を指します。これは通常、実際の間違いではなく、その直後です。コンマの欠落、閉じられていない引用符または括弧、または直接の引用符ではなく文書から貼り付けられたスマート引用符などです。まず、報告された位置の上の行を確認してください。

どちらもいいえ。 HTML Prettify は無料で、ダウンロードにはウォーターマークは含まれず、最後には何も求められません。作業を終えてから費用がかかることが判明するという流れでは意味がありません。

いいえ。HTML Prettify はデスクトップとスマートフォンのブラウザで使えます。インストール、トライアル開始、ライセンス購入は不要です。必要な機能かどうかは、サンプルではなく実際に困っているファイルでお試しください。