HTML縮小/整形ツール - HTML をオンラインで圧縮・整形

HTML圧縮ツール・フォーマッターの使い方

1. 1

   HTMLを貼り付けるかファイルを読み込む

   入力エリアにHTMLコードを貼り付けるか、「ファイルを選択」からローカルの.htmlファイルを読み込みます。ファイルの内容はブラウザ内にのみ保持されます。

2. 2

   圧縮かフォーマットを選ぶ

   「圧縮」をクリックすると本番向けにHTMLを最小化します。「フォーマット」をクリックすると、一貫したインデントでコードを整形してレビューしやすくします。

3. 3

   インデントを選択

   フォーマット時は2スペースか4スペースのインデントをプロジェクトのコーディングスタイルに合わせて選べます。

4. 4

   コピーまたはクリア

   「コピー」ボタンで結果をクリップボードに取得するか、「クリア」で入力・出力をリセットして最初からやり直せます。

参考資料

• WHATWG — HTML Standard

  HTML構文を定義するリビングスタンダード。どの空白が意味を持ち、パーサーがどう処理するかも規定されています。

• MDN — HTML

  MozillaによるHTMLリファレンス。要素・属性・クリーンで有効なマークアップのベストプラクティスを網羅しています。

関連ツール

よくある質問

HTML圧縮するとページの表示が変わりますか？

変わりません。圧縮で除去されるのはブラウザが元々無視している空白や改行のみです。<pre>や<textarea>内の有効な空白は保持されるため、レンダリング結果はまったく同一になります。

VSCodeのHTMLフォーマッターとどう違いますか？

このオンラインツールはインストール不要でブラウザから即座に使えます。VSCodeが手元にない環境や、エディタの設定をしていないPCでも、貼り付けてボタン1クリックで整形できるのが強みです。インデント幅は2スペース・4スペースから選択できます。

HTMLファイルはサーバーにアップロードされますか？

されません。圧縮・整形の処理はすべてブラウザ上で完結します。コードを貼り付けてもローカルファイルを読み込んでも、内容がデバイスの外に出ることは一切ありません。

HTML圧縮とHTMLフォーマットの違いは何ですか？

HTML圧縮は空白を除去してファイルを最小化し、本番環境での転送量を削減します。HTMLフォーマットはその逆で、一貫したインデントと改行を追加してコードを読みやすく整形します。開発・デバッグ時に役立ちます。

2スペースと4スペースのインデントを選べますか？

はい。フォーマット時にインデント幅を2スペースか4スペースに切り替えられます。プロジェクトのコーディング規約に合わせて選択してください。

HTMLファイルを直接読み込めますか？

はい。「ファイルを選択」をクリックしてローカルの.htmlファイルを直接入力エリアに読み込めます。ファイルはブラウザ内で処理され、どこにもアップロードされません。