🌐
無料HTML ビューティファイアー＆ミニファイアー
HTML を適切なネストインデントで整形または縮小します。 <pre>、<script>、<style> ブロック内のコンテンツを保持します。
読み込み後はオフラインでも動作
ここにファイルをドロップするか、クリックして選択
HTML, HTM · デバイス上で処理
または Ctrl+V でクリップボードから貼り付け
整形済み HTML
ここに出力が表示されます…主な用途
- サーバーレンダリングのHTMLをデバッグするサーバー (PHP、Rails、Django、Node) からの生のHTML出力を読み取り可能なインデント形式で表示します。
- メールHTMLテンプレートをフォーマットするメールHTMLは詳細 (テーブル、インラインスタイル) です。編集可能にして保守可能にするためにフォーマットします。
- 静的HTMLページをフォーマットする手動で編集された静的HTMLファイルは、協調編集のための一貫したフォーマットから利益を得ます。
- CMS-エクスポートHTMLをクリーンアップするWordPress、Wix、Squarespaceは多くのアーティファクトを含むHTMLをエクスポートします。編集可能にするためにフォーマットします。
- 本番環境のHTMLを圧縮する空白と不要な文字を削除して、ページ読み込みを高速化するためにHTMLファイルサイズを削減します。
使い方
このツールは、ページに直接組み込まれた手書きのタグ対応トークナイザーを使ってHTMLを整形または圧縮します — サードパーティの整形ライブラリもサーバーとのやり取りも不要です。マークアップのすべての文字は、入力または貼り付けた瞬間にブラウザ内でローカルに処理されます。
- 1トークナイザーがマークアップをスキャンするカスタムの文字ごとのスキャナーがHTML文字列を走査し、コメント、DOCTYPE宣言、開始タグ、終了タグ、自己終了型のvoid要素（br、img、inputなど）、生のテキストノードを識別します。専用のヘルパーが引用符付き属性値を追跡するため、属性内の>のような文字（例：value="a>b"）がタグを途中で分割してしまうことは決してありません。
- 2インデントの深さはタグごとに追跡されるbeautifyモードでは、トークナイザーは深さカウンターを保持します。ブロックレベルの開始タグは深さを増やし、終了タグは書き出される前に深さを減らします。インライン要素（span、a、strong、emなど）は独自のインデントされた行に押し出されるのではなく、その内容と同じ行に保持されます。pre、script、style、textareaのようなタグは、空白に敏感なコードや実行可能コードを破損させないよう、内部の内容がそのまま出力されます。
- 3ミニファイヤーが安全に空白を折りたたむminifyモードでは、pre、script、style、textareaブロックの内容は、空白の折りたたみが行われる前に番号付きのセンチネルに置き換えられます。HTMLコメントは削除され、タグ間の連続する空白は削除されます — ただし隣接するインライン要素間は例外で、単語が融合しないよう単一のスペースが保持されます。センチネルのプレースホルダーはその後、元の内容に復元されます。
- 4出力は表示され任意で保存される整形または最小化された結果は、サイズ変化のパーセンテージとともに出力パネルにライブ表示されます。ブラウザを離れることなく、クリップボードにコピーするか.htmlファイルとしてダウンロードできます。