広告が嫌いですか? 行く広告なし今日 

HTMLフォーマッターとビューティファイア

開発者文章

広告削除する？

入力

自動処理

出力

クライアント側

広告削除する？

ガイド

HTMLフォーマッターとビューティファイア

縮小化またはメッシュなHTMLをクリーンで適切にインデント化されたコードに変換します。このツールは、本番環境用に圧縮されたHTML、ブラウザDevToolsからコピーされたHTML、またはCMSによって生成されたHTML（生のHTML）を取得し、読みやすく編集しやすいように一貫したインデント化と改行を使用してフォーマットします。

使用方法

HTMLを入力エリアに貼り付けるか、HTMLファイルをアップロードします。優先するインデント化スタイル（2スペース、4スペース、またはタブ）を選択してください。フォーマット済みの出力は構文ハイライト付きですぐに表示されます。オプションで「既存の空行を保持」を有効にして意図的な間隔を保つか、「HTMLコメントを削除」を選択して出力からコメントをストリップできます。

機能

リアルタイムフォーマット –入力または設定を変更すると、出力が自動的に更新されます
設定可能なインデント – 2スペース、4スペース、またはタブから選択
保持されたブロック –pre、code、script、style、およびtextareaタグ内のコンテンツは変更されていません
スマートエレメント処理 –インライン要素は1行に留まり、ブロック要素は適切なインデント化を取得します
Syntax Highlighting –出力は明確にするためにHTMLシンタックスハイライト付きで表示されます
ファイルのアップロード –貼り付ける代わりにHTMLファイルを直接アップロードします

広告削除する？

 よくある質問

HTML縮小化とビューティフィケーションの違いは何ですか？

HTML縮小化は、ファイルサイズを削減してページ読み込みを高速化するために、不要なすべての空白、コメント、およびフォーマットを削除します。ビューティフィケーションはその逆です。インデント、改行、および一貫した間隔を追加して、コードを人間が読める形にします。縮小化されたHTMLは本番環境に最適ですが、ビューティフィケーション化されたHTMLは開発中のデバッグと保守が容易です。
HTMLをフォーマットするとブラウザでの表示方法が変わりますか？

いいえ。ブラウザはページをレンダリングする際、HTMLタグ間のほとんどの空白を無視します。HTMLが1行に縮小化されていても、美しくインデント化されていても、ブラウザでの視覚的な出力は同じになります。唯一の例外は、preやtextareaなどの事前フォーマット要素内のコンテンツであり、空白が重要です。そのため、フォーマッターはこれらのブロックを保持します。
ブロックレベルのインライン要素がなぜ異なるようにインデント化されるのですか？

ブロックレベルの要素（div、p、section、ulなど）はドキュメントフロー内に新しいビジュアルブロックを作成し、通常は他の要素を含むため、ネストを示すためのインデント化から利点を得ます。インライン要素（span、strong、a、emなど）はテキストコンテンツ内でフローし、インデント化すると文を行全体に分割して可読性が破壊されます。適切なフォーマッターはHTML仕様からこの区別を尊重します。