HTML整形ツール
HTMLフォーマッターのプリセット
圧縮された、あるいはインデントの崩れたHTMLを読みやすいものに戻します。圧縮された1行を貼り付けて、正しくネストされたマークアップと一貫したインデント — ページに埋め込まれたCSSとJavaScriptも含めて — を得られます。
- ファイルは端末の外に出ません
- 無料、登録不要
- 透かしなし
- 一度読み込めばオフラインでも動作します
HTMLフォーマッターの使い方
- 1
HTMLを貼り付け
圧縮されている、インデントが崩れている、手書きされている — どれでも動作します。
- 2
インデントを選ぶ
スペース2つ、スペース4つ、またはタブ。
- 3
結果をコピー
または.htmlファイルとしてダウンロードします。
他の誰かが送った圧縮されたマークアップを読む
ビルドツールによって1行または数行の長い行に折りたたまれた圧縮HTMLは、人が読むためではなく完全に転送サイズのために最適化されています。これは、競合他社のページ構造を検査する必要があるとき、ソースコードを見て本番環境の問題をデバッグするとき、あるいはサードパーティの埋め込みウィジェットが実際にどう構築されているかを理解する必要があるときに、本当の障害になります。整形することで、人間の読者が追う必要のあるネスト構造が復元されます: 各要素が独自の行にあり、親の中でどれだけ深いかを反映するようインデントされています。これは、機械が転送するためにビルドツールが最適化した密な1行ではなく、人が実際に推論するための表現です。
自分が書いたわけではないページの構造を取り戻す
他の誰かが構築したページを検査すること — 競合他社のランディングページ、埋め込みウィジェットのマークアップ、ソースコードにアクセスできない古いプロジェクトなど — は、特に整形ツールに頼る最も一般的な理由の1つです: ブラウザの開発者ツールはライブでレンダリングされたDOMを表示し、これは1つの目的には役立ちますが、生のHTMLソースコードを整形すると、サーバーが実際に送信したドキュメント構造がインデントを復元された状態で表示され、これはページが実際にどう構築されたかを理解しようとする際に、最終的にどうレンダリングされたかを見るのとは異なる、しばしばより有用な視点です。
よくある質問
ページ内のCSSとJavaScriptも整形しますか？
はい。`<style>`と`<script>`の中身はCSSとJavaScriptのパーサーに渡されるため、1ファイル完結型のページ全体が正しく整形され、それらのブロックが手つかずのまま放置されることはありません。
整形するとページのレンダリングが変わりますか？
ほとんど変わりませんが、完全にゼロではありません: HTMLは`<pre>`、`<textarea>`、`white-space: pre`を持つ要素の中では空白を意味あるものとして扱います。それらは正確にそのまま残されます。インライン要素は極端なケースで1スペースずれることがあるため、フォーマッターはそれらに対して保守的です。
なぜHTMLが拒否されるのですか？
通常は本当にバランスの取れていないタグ、あるいはHandlebars、Jinja、Bladeのような有効なHTMLではないテンプレート構文です。ブラウザは壊れたマークアップを黙って修復しますが、フォーマッターは構造を理解する必要があるため、それはできません。
マークアップはどこかにアップロードされますか？
いいえ。パーサーはブラウザ内で動作するため、未公開のページやクライアントの作業はあなたの端末にとどまります。