CoderTools

HTML 圧縮・整形ツール

本番環境用にHTMLを圧縮、または読みやすく整形（100% クライアントサイド処理）

🔒 100% ローカル処理入力されたデータはすべてブラウザ内で処理されます。サーバーに送信されることはありません。
入力サイズ: 0 bytes
出力サイズ: 0 bytes

HTML圧縮・整形ツールドキュメント

このツールとは？

HTML圧縮はブラウザレンダリングに不要な文字を削除します：タグ間空白・HTMLコメント（<!-- -->）・省略可能な終了タグ（HTML5仕様の</li>/<td>/<p>など）・ブール属性値（disabled=“disabled” → disabled）。<pre>/<textarea>/<script>/<style>の空白は保持されます。

主な機能

  • 空白・コメント削除：ブロック要素間の空白を折りたたみ、<!-- -->コメントを削除。<pre>/<code>/<textarea>内は保持。
  • 省略可能な終了タグ削除（HTML5）：HTML5解析アルゴリズムで許可される</li>/<p>/<tr>/<td>等を省略（DOM構造不変）。
  • ブール属性の圧縮：selected=“selected”などをHTML5裸形式（selected）に変換。
  • 美化設定：2/4スペース・タブ対応インデント。ブロック/インライン要素適切ネスト。<pre>/<code>内容は逐語保持。
  • 属性引用符正規化：値にスペースや特殊文字がない場合、二重引用符を除去してバイト削減。
  • ファイルサイズ差表示：元バイト数・圧縮後バイト数・圧縮率を表示。

一般的な使用例

  • サーバーサイドレンダリング最適化：PHP/Django/Rails/Node.jsから出力されるHTMLを事前圧縮。マークアップ密集ページで10-30%削減。
  • 静的サイトジェネレータ後処理：Jekyll/Hugo/Eleventy/Next.jsの最終ビルドステップとして使用。Brotli併用で85-95%削減。
  • 圧縮HTMLのデバッグ：本番サイトのview-sourceやAPIレスポンスを美化して構造・メタデータを確認。
  • テンプレート監査：WordPress/Drupal自動生成HTMLを整形してARIA属性・見出し階層を確認。

美化機能の調整項目

平坦または不整合インデントのHTMLから適切な階層を再構築。ブロック/インライン要素区別を処理し、<pre>/<code>内容を逐語保持。

  • 設定可能なインデント：2スペース・4スペース・タブ
  • ブロック要素は新行で開始；インライン要素は同行
  • <pre>/<code>/<textarea>内容を逐語保持
  • 全属性の二重引用符を統一

圧縮機能の調整項目

空白折りたたみ・コメント削除・省略可能終了タグ・ブール属性圧縮・引用符削除の各パスを制御可能。

  • タグ間空白をスペース1個に折りたたみ、ブロック境界で削除
  • HTMLコメント削除（IEコンディショナルコメント保持オプション）
  • 仕様安全な省略可能HTML5終了タグを省略
  • ブール属性を裸形式に
  • 値にスペース・特殊文字がない属性引用符を削除

ファイルサイズへの影響予測

標準コンテンツページで10-30%削減。タグ密集テンプレートページで20-40%。Brotli追加で85-95%の転送削減。

美化処理
読みやすい形式
圧縮処理
10-40%サイズ削減

関連ツール

CSS圧縮・整形ツール

CSSコードを圧縮または整形、空白とコメントを削除してファイルサイズを最適化、または可読性向上のためにコードをフォーマット

JavaScript圧縮・整形ツール

JavaScriptコードを圧縮または整形、空白とコメントを削除してファイルサイズを最適化、または可読性向上のためにコードをフォーマット

HTMLエンコーダー/デコーダー

特殊文字をHTML実体に変換、名前付き・10進数・16進数形式をサポート、XSS攻撃を防止

XML整形ツール

XMLデータを整形し、構文をハイライト表示して検証します

JSONフォーマッター

可読性とデバッグ向上のためにJSONデータをフォーマットおよび検証

テキスト差分チェッカー

2つのテキストまたはファイルの差分を比較し、サイドバイサイドでハイライト表示

クイックメニュー

最近のツールはありません