オンラインHTMLミニファイア＆フォーマッタ — 無料、アップロード不要

以下にHTMLを貼り付けて、コメント・冗長な属性・余分な空白を取り除いてミニファイするか、読みやすくインデントされたマークアップに整形できます。どちらの処理も正規表現ではなく本物のHTMLパーサーでブラウザ内で完結するため、<pre>や<textarea>内のコンテンツはそのまま保たれます。

このツールとは？

HTMLミニファイアは、ブラウザがページを正しく表示するために不要なものをすべて取り除きます。コメント、タグ間の余分な空白、type="text/javascript"のような冗長な属性、省略可能な終了スラッシュなどです。結果として、機能的には同一でありながら、より速くダウンロード・解析できるHTMLになります。

このツールは、多くのビルドツールの内部でも使われているミニファイアhtml-minifier-terserを基盤としています。そのため単純に空白を削除するのではなくHTML構造を理解しており、<pre>、<textarea>、インラインの<script>/<style>ブロックなど書式が重要な部分には手を加えません。さらに、マークアップに埋め込まれたCSSやJSもミニファイできます。

なぜこれを使うのか？

正規表現ではなく本物のパーサーを使用 — <pre>ブロック、インラインスクリプト、条件付きコメントなどのエッジケースでも安全。
周囲のマークアップだけでなく、埋め込まれた<style>や<script>の内容もミニファイ。
公開前に何バイト削減できたかを正確に確認できます。
フォーマットモードでは、圧縮された1行のHTMLを人間が読める形に戻せます。
処理は100%ローカル — マークアップやその中の非公開情報がブラウザの外に出ることはありません。

使い方

入力欄にHTMLを貼り付けるか、「例を読み込む」をクリックしてサンプルを試してください。
「ミニファイ」をクリックして圧縮するか、「フォーマット」をクリックして2スペースインデントで整形します。
入力欄の下のメッセージを確認してください — ミニファイモードではサイズ削減量が表示され、HTMLが解析できない場合は壊れた結果の代わりに具体的なエラーが表示されます。
「コピー」をクリックして結果を取得します。

例

入力

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- greeting -->
    <p class="greeting">
      Hello, world!
    </p>
  </body>
</html>

出力

<!doctype html><html><head><title>Example</title></head><body><p class="greeting">Hello, world!</p></body></html>

コメント、インデント、改行が削除され、doctypeも短縮されます。表示されるページの見た目は変わりません。

実用的なヒント

ミニファイは開発中ではなくデプロイ直前に行いましょう — バージョン管理には読みやすいHTMLを保存し、ビルド出力だけをミニファイします。
ミニファイ後にページの動作がおかしくなった場合は、テキストノード内の正確な空白に依存するJavaScriptがないか確認してください（まれですが、一部の古いウィジェットで発生します）。
本番サイトのミニファイ済みHTMLをフォーマットすることは、スクレイパーを書いたりレイアウトの問題をデバッグしたりする前に構造を調べる手早い方法です。
ビルドプロセスでスタイルとスクリプトを別ファイルにしている場合は、下記のCSS・JSミニファイアと組み合わせて使用してください。

実際のワークフローにおける位置づけ

手作業で構築された静的サイト、メールテンプレート、ランディングページは、開発時に使われたのと同じインデントやコメントがそのまま出荷されることがよくあります。デプロイ前にミニファイすることで、控えめではあっても実際の転送量を削減できます。特にメールHTMLの場合、文字数がGmailの省略表示のしきい値に影響することがあるため、マークアップを小さくすることには速度以上の実用的なメリットがあります。

フォーマット方向も同様に有用です。ソースを表示から取得したミニファイ済みページを貼り付けて整形することは、競合のランディングページの構造を理解したり、サードパーティの埋め込みをデバッグしたりする最も速い方法であることが多いです。

→ CSSミニファイア · JavaScriptミニファイア

一般的な利用例

公開前に静的なランディングページやメールテンプレートのバイト数を削減する。
ソースを表示から取得したミニファイ済みHTMLスニペットを整形して構造を理解する。
WYSIWYGエディタやCMSエクスポートから貼り付けた、余分な空白の多いHTMLをクリーンアップする。
手書きのHTMLスニペットが整形式であるかを素早く確認する。解析エラーは明確なメッセージとして表示されます。

よくある質問

私のHTMLはどこかにアップロードされますか？

いいえ。ミニファイもフォーマットも、JavaScriptを使ってブラウザ内でローカルに処理されます。貼り付けた内容がサーバーに送信されることはないため、社内テンプレートや未公開ページでも安心して使用できます。

ミニファイするとページが壊れませんか？

基本的には壊れません。このツールは本物のHTMLパーサー（html-minifier-terser）を使用してタグ構造を理解しているため、<pre>や<textarea>のような空白が重要な要素を保持し、属性を誤って結合することもありません。とはいえ、特に珍しいインラインスクリプトに依存している場合は、ミニファイ後に重要なページを目視で確認することをおすすめします。

HTML内のCSSやJavaScriptもミニファイされますか？

はい。インラインの<style>ブロックや<script>ブロックは、専用のCSS・JSミニファイアツールと同じエンジンを使ってその場でミニファイされるため、手動で抽出する必要はありません。

HTMLは通常どのくらい小さくなりますか？

元のHTMLにどれだけ空白・コメント・整形が含まれていたかによります。インデントやコメントの多い手書きのHTMLは通常20〜40%程度縮小します。すでにコンパクトなフレームワーク生成のHTMLでは削減幅は小さくなります。

ミニファイされたHTMLを読みやすい形式に戻せますか？

はい — ミニファイされたHTMLを貼り付けて「ミニファイ」ではなく「フォーマット」をクリックすれば、適切にインデントされた読みやすいマークアップに戻せます。

HTMLミニファイア＆フォーマッタ