HTMLの整形と圧縮の機能
このツールは、HTMLコードのフォーマットを再調整して可読性を高める機能と、ファイルサイズを削減して軽量化する機能を提供します。さらに、HTML内の一般的な構造上の問題を検出する検証機能も備えています。
処理可能な文字数は最大500,000文字までです。入力されたHTMLがこの制限を超えている場合は、「ドキュメントのサイズが大きすぎるため処理できません。より小さいファイルでお試しください。」というエラーメッセージが表示されます。また、解析できないコードなど、処理に失敗した場合は「このHTMLを処理できませんでした。」と表示されます。
コード整形による可読性の向上
「コード整形」を実行すると、乱雑なマークアップに適切なインデントと改行が再適用され、人間が読みやすく編集しやすい状態に整えられます。
設定項目として「インデント」の選択肢があり、好みに応じてスペース（2または4スペース）やタブを指定できます。整形処理が完了すると、ステータス欄に「整形されました。」と表示されます。
圧縮によるファイルサイズの削減とWebサイトの高速化
「圧縮」を実行すると、ブラウザのレンダリング結果に影響を与えずに、ファイルサイズを極限まで小さくするための処理が行われます。具体的には以下の処理が実行されます。
- 不要な改行、スペース、およびコメントの削除
- HTML内に記述されたインラインCSSおよびJavaScriptの圧縮
- 省略可能な属性クォーテーション（引用符）の削除
ただし、<pre>タグなどのスペースが意味を持つ事前整形テキストブロックは、圧縮処理中もそのまま保持されます。
圧縮が完了すると、ステータス欄に「圧縮されました。」または「圧縮完了 — {pct}% 削減されました。」と表示され、削減された容量の割合を確認できます。
構造エラーを検出する検証機能
「検証」を「オン」に設定すると、HTMLの構造的な問題を素早くチェックできます。検証実行中は「チェック中…」と表示され、結果に応じて以下のステータスが表示されます。
- 問題がない場合：「問題は見つかりませんでした。」
- 問題が検出された場合：「
{count}件の問題が見つかりました。」
検出対象となる構造上の問題には、閉じタグの不足や不一致、重複するID、重複する属性、エスケープされていない文字などがあります。問題が発見された場合は、「バリデーション」というヘッダーの下に、エラーの位置が「{line}行目:{col}列目」の形式で一覧表示されます。
この検証機能は、迅速な構造チェックを目的としたものであり、W3Cの完全な適合性レポートとは異なります。
処理の仕様とプライバシー
入力されたHTMLの整形、圧縮、および検証はすべてブラウザ上で行われます。BroBroGoにデータがアップロードされることはありません。
処理結果の統計情報として、以下の項目がリアルタイムに更新されます。
| 項目 | 表示内容 |
|---|---|
| 行数 | 処理後のHTMLの行数 |
| 文字数 | 処理後のHTMLの文字数 |
| サイズ | 処理後のHTMLのバイトサイズ |
入力エリアを空にすると、ステータスに「クリアされました。」と表示されます。
よくある質問
コード整形（Beautify）と圧縮（Minify）の違いは何ですか？
「コード整形（Beautify）」は、マークアップを読みやすく編集しやすくするために、インデントやスペースを再調整します。一方、「圧縮（Minify）」はその逆を行い、ブラウザのレンダリングに不要なスペースやコメントを削除してファイルサイズを削減し、ページの読み込みを高速化します。作業中は整形を行い、本番公開前に圧縮するのがおすすめです。
バリデーション検証を有効にすると、どのようなチェックが行われますか？
ブラウザが自動で補完して隠してしまうような構造上の問題（閉じタグの不足や不一致、重複するID、重複する属性、エスケープされていない文字など）を検出し、それぞれの行と列の位置を指摘します。これは迅速な構造チェックを目的しており、W3Cの完全な適合性レポートとは異なります。
HTMLを圧縮するとページの見た目に影響しますか？
はい、ページの表示や動作が変わることはありません。圧縮処理では、不要なスペースやコメントの削除、インラインCSS・JavaScriptの圧縮、省略可能な属性クォーテーションの削除などを行い、ブラウザがページを同一に描画するために必要な情報のみを残します。事前整形されたブロック（preタグなど）のように、スペースが意味を持つテキスト部分はそのまま保持されます。