HTMLをオンラインで整形
圧縮されたページソースを読みやすいマークアップに整えます。入れ子の深さに応じてタグをインデントし、属性を見やすく配置し、埋め込まれたスクリプトやスタイルも文書と一緒に整形します。
ページのソースが読みにくくなる理由
HTML圧縮ツールは、タグ間の空白やコメントを削除し、省略可能な終了タグを取り除き、不要な属性値の引用符を外します。サーバー側のテンプレート処理も読みにくさの一因です。数十個の部品から組み立てたページが、元のファイルの区切りとは無関係な一つのデータとして届きます。本番サイトのソースを開くと、巨大な数行に文書全体が詰め込まれ、セクションの終了タグを探すだけでも、山括弧を目で数える必要があることもあります。
文書の構造を見えるようにする
HTMLは木構造であり、それを平らに並べると読みにくくなります。入れ子の深さに合わせてインデントすれば、ヘッダーの終わり、メインコンテンツを囲むコンテナー、コンポーネントの深さ、終了タグが欠けた要素など、文書の形がすぐに分かります。整形されたソースは、見出しの順序を確認したり、フレームワークが生成したマークアップを調べたり、ほかのサイトが気になるセクションをどう組み立てているか理解したりするのに役立ちます。
埋め込みスクリプトやスタイルも整形
実際のページには、マークアップ以外のコードも含まれています。アクセス解析のコード、JSON-LDの構造化データ、設定オブジェクト、クリティカルCSSなどが文書内に直接埋め込まれ、圧縮時にはそれらもまとめて詰められます。フォーマッターは各ブロックに適したパーサーを使うため、scriptタグ内の圧縮JavaScriptは読みやすいJavaScriptに、styleタグ内のコードは読みやすいCSSになります。文書全体のインデントも保たれます。
空白が意味を持つタグにも配慮
HTMLのインデントを変えるとタグ間の空白も変わりますが、空白自体が意味を持つ場合があります。フォーマッターはその点を考慮し、preやtextareaの内容をそのまま保持します。インライン要素も、テキストの前後に見える空白が増減しないように扱います。ページの表示を保ちながら、文書を読みやすく整えます。
よくある質問
ページのソース全体を貼り付けても使えますか？
はい。ブラウザーのview-sourceからソースをコピーするか、ページを保存してファイルを開いてください。head、body、埋め込みスクリプト、構造化データを含む文書全体を整形します。
整形するとページの表示は変わりますか？
基本的には変わりません。preやtextareaなど空白が重要な要素を保ち、インラインの内容も慎重に扱います。ただし、閲覧用にコピーを整形し、検証せずに本番環境へ戻すことは避けてください。
TwigやBladeなどのテンプレートにも使えますか？
一部は使えます。通常のマークアップは整形できますが、独自構文のテンプレートタグはHTMLパーサーで正しく扱えない場合があります。このツールは、生成元のテンプレートではなく、ブラウザーが実際に受け取るHTMLを対象としています。