HTML整形・ミニファイ
乱れた HTML を読みやすく整形、または本番用にミニファイ
ローカル実行
loading…
このツールについて
バンドラー、スクレイパー、WYSIWYG エディターから出てきた HTML を整形します。要素は選択した幅でインデントされ、属性は元の行に保たれ、pre/textarea の中身はバイト単位でそのまま残ります。ミニファイモードはコメントを取り除き、タグ間の空白を畳みます — 手書きのページなら通常 10–25% のサイズ削減です。
ここでのミニファイは意図的に保守的です。インラインのスクリプトとスタイルは保護され、条件付きコメントは生き残り、インライン要素間の単一スペースは保持されるため、「click <a>here</a> now」が「clickherenow」に融合することはありません。得られるのは安全なミニファイであって、最大限に攻撃的なものではありません。
どちらの操作もブラウザ内でローカルに実行されます — 未公開のページや社内管理画面のマークアップがマシンの外に出ることはありません。
よくある質問
- ミニファイでインラインの JavaScript や CSS は壊れませんか?
- 壊れません — <script>、<style>、<pre>、<textarea> ブロックは空白の畳み込みから完全に除外されます。触れるのはタグ間のマークアップだけです。スクリプト自体を圧縮するには、別途 JavaScript ミニファイアーに通してください。
- なぜタグ間の空白は安全に削除できるのですか?
- おおむね安全だからです。ブロックレベル要素間の空白には視覚的な効果がありません。インライン要素間では効果があるため、ミニファイアーは削除する代わりに、連続する空白を単一のスペースに畳みます。inline-block の空白ハックに依存したレイアウトは、目視確認する価値のある稀な例外です。
- フォーマッターは不正な HTML を修正しますか?
- HTML 仕様に対する検証はせず、与えられたものを整形します — 閉じられていないタグは閉じられないままです。ブラウザはタグの寄せ集めにも寛容なので、整形するだけでも構造が見えるようになり、問題を見つける助けになります。
- インデント幅はいくつにすべきですか?
- 2 スペースが Web コードベースの主流の慣習で、ほとんどのフレームワークのスタイルガイドのデフォルトです。チームが 4 に標準化しているなら 4 を — 選択は見た目だけの問題です。