コード整形 / MULTIVERTO

HTML を最小化

HTML の安全に削除できる構造上の空白を詰めます。

変換ツール入力内容はこのブラウザ内にとどまり、変換のために送信されません。

ファイルはブラウザー内にとどまります。
ツールを連結

前の結果に各テキストツールを適用します。 テキスト変換ワークフロー ↗

このブラウザーには手順の名前とツールの順序だけを保存します。入力内容と結果は保存しません。

01 / 例

例

入力<ul> <li>こんにちは</li> <li>ようこそ</li> </ul>
結果<ul><li>こんにちは</li><li>ようこそ</li></ul>

02 / ガイド

HTML を最小化 — 仕組み

このツールで変わること

HTML のうち、リストや表などの構造上の空白を絞って減らします。通常のテキストノードにある空白は、二つのインライン要素の間に見える隙間になることがあるため、むやみに削除しません。出力が短くなっても、すべての HTML を対象とした本番用の最小化とは異なります。部品の表示前後を比較し、文章の間隔、属性、要素の順序が期待どおりか確認してください。

対応する構文と制約

この処理が削除するのは、主にリストや表のような構造の間にある空白です。任意の文章をつぶしたり属性を書き換えたりはしません。空白で区切られた二つのインライン要素からその空白を消すと、ブラウザーでの見た目が変わることがあります。また、HTML の省略可能な閉じタグやエラー修復の規則を、この限定的な編集器は完全には再現しません。複雑な文書は使用先で実際に描画して検証してください。

実際に使うときの手順

構造上の空白を減らす前に、元の断片をブラウザーで表示してください。サンプルの <ul> に二つの li 要素が入った場合、改行とインデントを除くと <ul><li>Hello</li><li>Welcome</li></ul> になります。Hello と Welcome は英語の文字列のままで、勝手に翻訳されません。インラインリンクを含む段落では、要素の間の空白を消すと単語がつながることがあります。結果を表示してテキストノードを確認し、単に文字列が短くなったという理由だけで採用しないでください。

結果を検証する

単純なリストや表にある構造上の空白で断片が長いときに使います。インライン要素の前後にテキストがある場合は、元と結果を並べて描画してください。HTML のすべての空白を消すと見える文章が変わるため、この処理は積極的なビルド用最小化より空白を多く保ちます。危険な raw-text 要素は対象外です。元の文書を残し、属性値、テキスト、文字参照、改行を比べてください。

入力から出力への変換過程
HTML - 入力
構文を読み取り、形式を変換
HTML - 結果

ガイドを探す

変換ガイド

ガイドを探す