HTML の整形と圧縮
整形処理はすべてブラウザ内で完結します。データは送信されません
1行に圧縮された HTML をインデントされた構造へ展開します。「タグを見たら改行する」方式とは違い、ここではテキストの中身を見ます。要素の中に文字が現れたら、その部分木全体をインラインのまま保ちます —— HTML では改行が実際の空白になるからです。<p>a<b>x</b> の中の <b> を次の行に移すと、レンダリング結果は「ax」から「a x」に変わってしまいます。同じ理由で、元のテキストに空白がない場所に空白を勝手に補うこともありません。
機能
- タグの階層ごとにインデント。インデントはスペース 2 個 / 4 個 / タブから選べます
- 空要素(br、img、meta、input、link など)を認識し、後続の内容が1段深くインデントされるのを防ぎます
- テキストとインライン要素は同じ行のまま。空白は元のテキストにあった位置にだけ補います
- script・style・pre・textarea の中身はそのまま保持し、終了タグは内容に接して空白を挟みません
- コメントと DOCTYPE はそれぞれ別の行になり、タグの内部の連続した空白は半角スペース1つにまとまります
- 属性値の中の空白はそのまま保持し、属性値の中の > がタグを切ることはありません
- 圧縮モードはタグの間の空白とコメントを削除します
- 構文チェックはしません:タグが閉じていない場合もエラーにせず、できる範囲でインデントします
使い方
- HTML を入力欄に貼り付けます
- 処理方法とインデントを選びます
- Ctrl/⌘ + Enter を押すか「実行」をクリックします
- 「コピー」で結果を取り出せます
よくある質問
- 圧縮したらページから空白が消えたのはなぜですか?
- 圧縮はタグの間の空白を削除します。多くの場合は影響ありませんが、インライン要素の間の空白はレンダリング時に実際の隙間になります(<span>a</span> <span>b</span> は「ab」と繋がって表示されます)。そこを保ちたいときは整形モードをお使いください。
- テキストが複数行に分割されないのはなぜですか?
- 行を分けると実際の空白が挿入され、レンダリング結果が変わってしまうからです。ですから改行は構造上の位置にだけ入れ、テキストの中身はその場に残します。
- script や pre の中身は並べ替えられますか?
- いいえ。これらの要素の中身は全体をそのまま運び、終了タグは内容に接して書きます。「見た目を整える」ために中のコードや空白を変えることはありません。
- HTML は送信されますか?
- いいえ。処理はすべてブラウザのメモリ内で完結し、ページはリクエストを一切送りません。オフラインでも使えます。
関連ツール
XML 整形
整形XML をオンラインで整形・圧縮:タグの階層ごとにインデントし、コメント・CDATA・DOCTYPE はそれぞれ別の行に。属性値の中の空白はそのまま保持します。
HTML 実体参照
エンコード・暗号< > & と引用符を HTML 実体参照に変換し、文字へ戻します。デコードは1回だけで、&lt; は山括弧ではなく < になります。すべてブラウザ内で処理します。
Markdown プレビュー
テキスト処理左に Markdown を書くと右にリアルタイムで描画します。貼り付けた HTML は文字として表示し、画像の外部リクエストも起こしません。
JSON 整形
整形JSON をオンラインで整形・圧縮し、構文エラーは行・列まで特定。キー名の再帰的な並べ替えにも対応。解析はすべてブラウザ内で行い、送信しません。
JSON → コード
整形JSON サンプルから TypeScript interface、Go struct、Java class、Rust struct を生成。欠けたキーは任意に、型の衝突は共用型に。すべてブラウザ内で処理します。
SQL 整形
整形SQL をオンラインで整形:キーワードの大文字小文字を統一し、SELECT / FROM / WHERE などの句ごとに改行。圧縮は余分な空白とコメントを削除します。