データ

HTML フォーマッター

圧縮されたり機械生成されたりした HTML は、たいていタグ・属性・テキストが一行に詰め込まれて出てきます。この整形ツールはそれを読みやすいツリーへインデントし直し、要素を 1 行ずつ並べて、入れ子の構造がひと目で分かるようにします。実際のページにはスタイルやスクリプトが埋め込まれているので、<style> 内の CSS と <script> 内の JavaScript も同じ処理でまとめて整形し、ファイル全体が整います。先にマークアップを構文木へ解析するので、描画結果は変わらず、整うのは体裁だけです。インデントと折り返し幅を選べて、すべてブラウザー内で完結します。

  • 圧縮や一行の HTML を読みやすいツリーへ整え直し、要素は 1 行ずつ・入れ子は構造どおり
  • マークアップだけでなく、<style> 内の CSS と <script> 内の JavaScript も同じ処理で整形
  • 本物の構文木から整形するので、タグ・属性・描画結果は変わらない
  • すべてブラウザー内で完結し、社内ページや未公開の内容も端末から出ない
工具/HTML フォーマッター
フォーマッターを読み込み中
8%
Prettier エンジンは初回のみダウンロードし、訪問中はキャッシュされます。
インデント
幅

概要

自分で書いていないページや、ビルド工程で平坦化されたページを読むには、まずマークアップを目で追える形に戻すことから始まります。このツールは、ページの意味を勝手に推測せずそれを行います。

  1. 01

    パーサーによるインデント

    出力する前にまず HTML を構文木へ読み込むので、ツールは要素・属性・入れ子を理解しており、どこで改行するかを当て推量しません。構文木から来る整形が、内容を本来の要素の外へ静かに移すことはありません。

  2. 02

    埋め込みの CSS と JS も整形

    実際のページはマークアップだけということはほとんどありません。すべての <style> 内の CSS と、すべての <script> 内の JavaScript を同じ処理で整形し直すので、別のツールへコピーしなくても読める形になります。

  3. 03

    インデントと幅は好みで

    2 スペース・4 スペース・タブを選び、折り返し幅を 80・100・120 に設定して、多くの属性を持つ長いタグをチームの期待する位置で折り返します。

  4. 04

    一目で追える構造

    各要素が 1 行ずつ並び、子要素は親の下にインデントされるので、文書のアウトラインがひと目で見えます。すべてのブロックを一括で折りたたみ・展開して、1 つのセクションに集中することもできます。

  5. 05

    行数とバイト数

    整形後の文書が何行に展開され、サイズがどれだけかを出力パネルに表示するので、元がどれほど詰まっていたかがひと目で分かります。

  6. 06

    コピー・ダウンロード・アップロード

    クリップボードから貼り付けたり、ディスクの .html ファイルを開いたりして、整った結果をコピーまたは保存できます。一連の処理は端末内で完結し、サーバーには触れません。

使い方

読めない HTML の塊を、インデントの揃った清潔な文書へ、数ステップで変えます。

  1. 01

    圧縮された、または雑然とした HTML を入力パネルに貼り付けるか、「アップロード」でディスクの .html ファイルを開きます。

  2. 02

    プロジェクトの慣習に合わせて、インデントの種類と折り返し幅を選びます。

  3. 03

    右側で整形されたマークアップを読みます。各要素が 1 行ずつ並び、埋め込みの CSS と JS も整い、オプションの調整に合わせて更新されます。

  4. 04

    結果をコピーするか .html ファイルとしてダウンロードし、エディターに取り込んで読む・レビューする・作業を続けます。

詳細

整形結果を信頼でき、付き合いやすいものにする細部。

  • Prettier を基盤にしており、どこで改行するかを当て推量せず、解析された表現から整形し直します。
  • 埋め込みの CSS と JavaScript も同じエンジンで整形するので、ページ全体が端から端まで一貫します。
  • 入力中もオプション変更時も整形が走り、結果が更新される前にボタンを押す必要はありません。
  • 構文エラーはその場でメッセージとともに表示され、半端な整形や空の出力を出すことはありません。
  • アップロードもログ記録もしません。貼り付けた HTML はブラウザー内にとどまり、タブを閉じると消えます。

活用シーン

密なマークアップを読める形へ戻すことが効いてくる場面。

  1. 圧縮されたページを読む

    ページの唯一のコピーが本番や view-source の圧縮 HTML しかないとき、ここで整形すれば、要素やセクションが実際にどう構成されているかが見えます。

  2. 生成されたマークアップのレビュー

    テンプレートエンジン・CMS・メールビルダーの出力はしばしば平坦化されています。整形して初めてコードレビューや監査が可能になります。

  3. レイアウトや入れ子の不具合のデバッグ

    インデントされた HTML なら、閉じていないタグ・位置の誤った要素・レイアウトを静かに壊しているラッパーを、ずっと見つけやすくなります。

  4. きれいな diff を作る

    ページの 2 つのバージョンを同じ方法で整形すれば、diff ツールは空白のノイズに埋もれず本当の変更を示します。

  5. 埋め込みコードを含む断片を整える

    ドキュメントから貼り付けたコンポーネントは、インラインの <style> や <script> を抱えていることがよくあります。一度の処理でマークアップと埋め込みコードをまとめて整えます。

  6. 教育や例の共有

    インデントの揃ったページは、その場限りの体裁のものより、チュートリアル・コードコメント・プルリクエストで説明しやすくなります。

関連情報

単一の言語だけを扱いますか？CSS フォーマッター はスタイルシート単体を整形し、JavaScript フォーマッター は JavaScript ファイルに同じことを行います。

整形と圧縮

整形と圧縮は同じ発想を逆向きにしたものです。どちらもタグの間でブラウザーが無視する文字だけを扱い、意味には触れません。一方はマークアップを読みやすくする空白を加え、もう一方はそれを取り除きます。

  1. 体裁の変更は可逆で安全

    要素の間にインデントや改行を加えても、ページの描画は何も変わりません。ブラウザーは 1 行と 40 行を同じ文書として扱うので、整形は人間向けの体裁変更であり、ページの書き換えではありません。

  2. 圧縮された HTML が読みにくい理由

    ビルド工程はバイトを節約するためにタグ間の任意の空白を取り除きます。配信には理想的ですが、要素・属性・テキストが境界もなく一行に詰まった状態が残ります。

  3. 埋め込みコードも文書の一部

    スタイルやスクリプトは HTML の中にあるので、タグだけを扱うフォーマッターではファイルの半分が読めないまま残ります。<style> を CSS として、<script> を JavaScript として扱うことが、実際のページを端から端まで整える鍵です。

  4. これは圧縮の逆ではない

    整形が戻すのは体裁であって、元のソースではありません。圧縮が取り除いたコメントは戻らず、ビルドがインライン化したマークアップはインラインのままです。得られるのは読める HTML であり、作者が書いた内容のバイト単位の複製ではありません。

  5. 空白に意味があることも

    多くのコードと違い、インライン要素の間の空白は描画に影響します。フォーマッターはそれを尊重するので、文書を組み直してもブラウザーでの見え方は変わりません。

  6. 読解とレビューのためのツール

    目的は理解です。平坦化された、あるいは見慣れないページを、ざっと読み、比較し、把握しやすくすること。配信時にはやはり圧縮を行い、それはこの工程の鏡像です。

使い方のヒント

HTML の整形を最大限に活かす習慣。

  • 整形は読解とレビューに使い、読める元ソースがあるなら、それを真実の情報源として保ちます。
  • プロジェクトごとにインデントの種類と幅を 1 つに決めて守れば、整形済みファイル同士がきれいに diff できます。
  • 整形はコメントを取り戻さず、ビルドがインライン化したマークアップも元に戻さないことを覚えておきます。戻すのは体裁であって元のソースではありません。
  • 自分のコードベースでは、フォーマッターをエディターや pre-commit フックに組み込み、毎回手で貼り付けなくてもファイルが一貫するようにします。
  • この解析器が想定しない構文を使うテンプレート言語そのものではなく、テンプレートの出力（ブラウザーが受け取る HTML）を整形します。

制限事項

このツールが行うことと、他の工程に委ねること。

  • 単一の HTML 文書と、その中に埋め込まれた CSS・JS をインデントし直します。リンクされたスタイルシート・スクリプト・画像は取得しません。
  • 戻すのは体裁であって、失われた情報ではありません。圧縮で取り除かれたコメントや構造は戻りません。
  • Handlebars・Jinja・ERB などのテンプレート言語はそれ単体では HTML ではありません。テンプレートのソースではなく、描画後の出力を整形してください。
  • 構文エラーは整形を止めて報告するので、ひどく壊れた入力が黙って部分的な出力を出すことはありません。

よくある質問

HTML の整形と、いつ使うかについてのよくある質問。

整形でページの描画は変わりますか？

変わりません。タグの間でブラウザーが無視する空白と改行（インデント、要素間の改行、一貫した入れ子）を加えるだけです。タグ・属性・内容は変わらず、インラインのレイアウトに影響する空白も保たれるので、描画されるページは前後で同じに見えます。

HTML 内の CSS や JavaScript も整形しますか？

します。すべての <style> 内の CSS と、すべての <script> 内の JavaScript を、専用の CSS・JS フォーマッターと同じエンジンで同じ処理として整形し直します。別ツールへ取り出す必要はありません。

圧縮を完全に元へ戻せますか？

戻せるのは体裁であって情報ではありません。整形は読めるインデントを取り戻しますが、圧縮が取り除いたコメントは戻らず、インライン化されたマークアップはそのままです。得られるのは読める HTML であり、元ソースのバイト単位の複製ではありません。

どんなインデントの選択肢がありますか？

2 スペース・4 スペース・タブを選べ、折り返し幅は 80・100・120 に設定でき、多くの属性を持つ長いタグを期待する位置で折り返せます。読みながらすべて折りたたみ・展開や折り返しの切り替えもできます。

Handlebars や Jinja のようなテンプレートファイルを整形できますか？

直接はできません。このツールが整形するのはブラウザーが受け取る標準 HTML です。{{ }} や {% %} のようなテンプレート構文はそれ単体では正しい HTML ではないので、描画後の出力を整形するか、テンプレート言語を理解するフォーマッターを使ってください。

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

いいえ。すべてブラウザー内で動きます。貼り付けた HTML も開いたファイルもローカルで処理され、送信も保存もされず、タブを閉じると消えます。社内ページや未公開の作業も非公開のままです。

関連ツール

データと整形のツールキットの残りも続けてどうぞ。