HTML整形について
テンプレート、メールビルダー、「ページのソースを表示」からコピーした markup を整えます。「整形」でレビュー用に、「圧縮」でより短いペイロードにできます。
ネストしたタグに一貫したインデントが付き、属性は元の要素に残るため diff やプロジェクトへの貼り戻しがしやすくなります。
メールテンプレートの QA 前整形、静的断片のサイズ確認などに使います。FAQ では void 要素、インライン SVG、parse エラーも扱います。
できること
HTML 整形
minify 済みや乱れた markup をインデント付き行に展開します。見出し、リスト、テーブル、インライン SVG が追いやすくなります。タグの対応が取れていればページ全体でも断片でも処理できます。
HTML 圧縮
空白を詰め HTML コメントを除き、構造と必要タグは保ちます。parse できない場合はエラーで、壊れた HTML は出力しません。
インライン SVG
SVG タグと名前空間付き属性は、木が well-formed なら周囲 HTML と一緒にインデントされます。path など未閉タグは先に直してください。
void 要素
img、br、input などの void タグは圧縮後も合法のままです。ブラウザが推論する省略閉じタグを無理に挿入しません。
よくある使い方
HTML を整形する手順は？
markup を入力欄に貼り「整形」します。ネストしたタグと属性が段組みされ、読みやすくなります。
1 行 HTML を美化するには？
CMS やビルドから 1 行 HTML を貼り「整形」します。インデントが戻り、タグとテキスト内容は変わりません。
本番向けに HTML を短くするには？
合法 HTML を貼り「圧縮」します。余分な空白とコメントが除かれ、コピー可能な compact なドキュメントになります。
よくある質問
- HTML を整形する手順は？
- markup を入力欄に貼り「整形」します。ネストしたタグと属性が段組みされ、読みやすくなります。
- 1 行 HTML を美化するには？
- CMS やビルドから 1 行 HTML を貼り「整形」します。インデントが戻り、タグとテキスト内容は変わりません。
- 本番向けに HTML を短くするには？
- 合法 HTML を貼り「圧縮」します。余分な空白とコメントが除かれ、コピー可能な compact なドキュメントになります。
- 整形と圧縮の違いは？
- 整形は人間向けに改行とインデントを足します。圧縮は合法 HTML のまま文字数を減らします。
- 圧縮が失敗するのはなぜ？
- 未閉タグ、属性の引用符ミス、切れたペーストなど parse 不能が典型です。先に「整形」して問題箇所を特定してください。
- PHP や Vue テンプレート混在 HTML は？
- HTML 以外のトークンはパーサを混乱させます。静的 HTML 部分だけ貼るか、フレームワーク compile 後の markup を整形してください。
- 圧縮で隣接テキストノードはマージされますか？
- タグ間の空白は詰まりますが、意味のあるテキストは保持されます。pre/code など空白敏感な箇所はレンダリング結果を確認してください。