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

読みやすさの向上や本番利用のためにHTMLコードをフォーマット、整形、圧縮

HTML入力

インデントサイズ

2 スペース 4 スペース Tab

フォーマット結果

すべての処理はブラウザ内で行われます。データはサーバーに送信されません。

使用例

乱雑なHTMLの整理

フォーマットされていない1行のHTMLを取り、読みやすく編集しやすいように適切なインデントで整形します。

本番用の圧縮

きちんとフォーマットされたHTMLから空白やコメントを削除してファイルサイズを縮小し、本番デプロイ用に圧縮します。

テンプレートの整形

ネストされたテーブル、フォーム、コンポーネントを含む複雑なHTMLテンプレートをきれいで整理されたコードに整形します。

機能

スマートインデント

設定可能なインデントサイズ（2スペース、4スペース、タブ）でネストされたHTML要素を自動インデント

HTML圧縮

本番用にHTMLファイルサイズを最小化するため、空白、コメント、改行を削除

コンテンツ保持

pre、code、script、styleタグ内のコンテンツを再フォーマットせずに保持

プライバシー優先

すべての処理がブラウザ内でローカルに実行され、サーバーにデータは送信されません

使い方

インデント設定

好みのインデントを選択：2スペース、4スペース、またはタブ文字。

HTMLコードを貼り付け

フォーマットまたは圧縮したいHTMLコードを貼り付けまたは入力します。

整形または圧縮

読みやすいフォーマットには整形を、コンパクトな出力には圧縮をクリックします。結果をコピーします。

よくある質問

Beautify（プリティプリントとも呼ばれます）は、適切なインデント、改行、および一貫したスペースを追加することでHTMLコードを再フォーマットします。入れ子になった各要素は、親要素よりも一段深くインデントされます。その結果、人間が読みやすく、スキャン、デバッグ、編集が容易なコードになります。これは、タグが一行に繋がった圧縮された（minified）または自動生成されたHTMLを受け取った際に特に便利です。

Minificationは、すべての空白（スペース、タブ、改行）、コメント、および人間の読みやすさのために存在するだけのオプションの改行を削除します。結果として得られるHTMLは元のものと機能的に同一ですが、サイズが小さくなります。コメントの多いテンプレートの場合、ファイルサイズを10-30%削減するのが一般的です。圧縮された（minified）HTMLはダウンロードが速くなり、帯域幅を節約できるため、本番環境へのデプロイにおける標準的な慣行となっています。

いいえ。Beautificationは空白とインデントのみを変更し、タグ、属性、属性値、および表示されるテキストコンテンツには手を加えません。Minificationは、視覚的な効果のない空白とHTMLコメントのみを削除します。重要な例外が一つあります：pre, code, script, および styleタグ内のコンテンツは、再フォーマットされずにそのまま保持されます。これは、それらの要素内の空白が重要（プリフォーマットされたテキスト、コードのインデント、JavaScriptのフォーマットなど）だからです。

これは主にチームやプロジェクトの慣習による選択です。2スペース：JavaScriptプロジェクト、React、およびモダンなWebフレームワーク（ESLint/Prettierのデフォルト）で人気があります。4スペース：多くのスタイルガイドで伝統的に使われており、Pythonやバックエンドのテンプレートで一般的です。タブ：一部の開発者は、エディタごとにタブの幅をユーザーが設定できるため（アクセシビリティの議論）推奨しています。プロジェクトの既存のスタイルに合うものを選んでください。新しく始める場合は、モダンなフロントエンド開発では2スペースが最も一般的な選択です。

このフォーマッターは有効なHTMLで最高の動作をします。壊れたHTML（閉じられていないタグ、不一致の要素、属性の欠落など）は、整形後の出力に予期しないインデントを生じさせたり、クリーンな圧縮に失敗したりする場合があります。整形後の出力がおかしい場合は、まずHTMLバリデーターを使用してエラーを修正してください。self-closingタグ（<img />, <br />, <input />など）は、XHTMLスタイルかHTML5スタイルかに関係なく正しく処理されます。

元のHTMLに含まれる空白やコメントの量によって結果は大きく異なります。軽くフォーマットされたHTMLは5-15%縮小することがあります。深い入れ子構造（テーブルなど）や多くのコメントを含むテンプレートでは25-40%縮小することがあります。一般的なHTMLファイルでは、10-20%のサイズ削減が期待できます。最大限の節約を行うには、HTMLのMinificationとサーバー側でのGzip圧縮を組み合わせてください。この組み合わせにより、通常は合計で70-80%の削減が達成されます。

はい。フォーマットしたいHTML部分だけを貼り付けてください。このフォーマッターは完全なHTMLドキュメント（<html>, <head>, <body>）または部分的なスニペット（単一の<div>構造やフォームなど）の両方に対応しています。また、フレームワークでよく使われる共通構文を含むHTMLテンプレートも処理しますが、テンプレート固有のタグ（Jinja2の{% %}やPHPの<?php ?>ブロックなど）はテキストコンテンツとして扱われます。

いいえ。すべてのBeautificationおよびMinificationは、JavaScriptを使用してブラウザ内で行われます。あなたのHTMLコードがどこかにアップロード、送信、またはログ記録されることは一切ありません。機密性の高い内部マークアップ、サーバーサイドのテンプレートロジック、または独自のコンポーネント構造を含むコードを安全にフォーマットできます。