無料 HTML フォーマッター＆ビューティファイアー

HTMLフォーマットとは?

HTMLフォーマッティング(「美化」または「プリティプリント」とも呼ばれます)はミニファイの逆操作です。フォーマッターは、ミニファイされた本番出力、ブラウザのインスペクターからコピーされたもの、テンプレートエンジンから生成されたもの、または単に手書きで雑然と書かれたものなど、あらゆる形式のHTMLを取り込み、一貫したインデント、ブロック要素間の改行、予測可能な視覚構造で再出力します。ブラウザはパース時に余分な空白を無視するため、フォーマッティングはソースの見え方を変えますが、ページのレンダリングは決して変えません。なぜ気にするのか?それは、人間の目はインデントされた階層を視覚的に平坦なタグスープよりも速く解釈するからです。コードレビュー、デバッグ、HTML構造の学習、別の開発者へのマークアップの引き継ぎ、2つのバージョンの差分比較、これらすべてがインデントによって文書ツリーが視覚的に明白になると、実質的にずっと簡単になります。

フォーマッターが価値を発揮する5つの実世界のワークフロー: (1) ブラウザの「ソース表示」やDevToolsの「outer HTMLをコピー」からデバッガーに貼り付けられたミニファイされた本番HTML; (2) WYSIWYGエディタが視覚的にきれいな出力を生成したが雑然としたソースを生成したCMSのテキストエリアから抽出されたHTML; (3) テンプレートエンジン(Jinja、Twig、Handlebars、ERB)の出力デバッグで、レンダリングされたHTMLが期待したものと一致しない場合; (4) 自動生成されたHTML(Reactのサーバーサイドレンダリング、Pandoc、ドキュメントコンバーター)をコードレビュー用に読みやすい形に変換; (5) インポート時にフォーマットを剥がす可能性のあるマーケティングプラットフォームに送信する前のメールテンプレートHTMLのクリーンアップ。

主要なHTMLフォーマッター

js-beautify(Einar Lielmanis、2007年以降)はJavaScriptエコシステムの長年のフォーマッターで、HTML、CSS、JavaScript、JSONを単一のライブラリで処理します。HTMLフォーマッターはbeautifier.ioの公開フロントエンドを動かし、歴史的に数十の「HTMLをオンラインでフォーマット」サイトのバックエンドとして機能してきました。Prettier(James Long、2017)はモダンフロントエンドエコシステムを支配するに至った意見の強いフォーマッターで、HTMLサポートはローンチ直後に追加されました。Prettierのデザイン哲学は「ほぼ設定なし」で、1つのインデントスタイル(デフォルトで2スペース)、1つの行幅ターゲット(printWidth: 80)、1つの属性ラッピングルールセットです。トレードオフは、bikesheddingなしでチーム間の一貫性を得ることで、コストは個人的な柔軟性の低下です。HTML Tidy(1997年にW3CのDave Raggettが作成、現在はHTACGがメンテナンス)はオリジナルで、Webのモダンフォーマッターシーンより前から存在し、もともと1990年代後半の古く壊れた廃止予定のHTMLをクリーンアップするために設計されました。TidyはmacOSにデフォルトで(/usr/bin/tidy)、ほとんどのLinuxディストリビューションに含まれて出荷されています。2026年にはあまり一般的に使用されていませんが、その厳密さで今も尊敬されています。モダンワークフローでは、Prettierが新しいプロジェクトのデフォルトで、VS Code(HTMLファイルのデフォルトフォーマッター)、JetBrains IDE、Husky + lint-stagedによるpre-commitフックに統合されています。このツールは、Prettierを実行するビルドパイプラインを持っていない場合のためのもので、貼り付け、フォーマット、コピーして出すという用途です。

インデント規約

3つのインデントスタイルがモダンHTMLで競合しています。2スペースはモダンWebのデフォルトで、GitHubのHTML/CSSスタイルガイド、GoogleのHTML/CSSスタイルガイド、Prettierのデフォルト、WHATWGスタイル例、ほとんどのnpm公開フロントエンドパッケージで使用されています。論拠は、HTMLは深くネストする(典型的なコンポーネントは6〜10レベルのインデントになる)ため、2スペースは行が80カラムディスプレイの右端から外れないように保つというものです。4スペースはより古いJava / Microsoftの伝統で、一部のレガシープロジェクトとPSR-12 PHP標準で残存しています。水平方向のスペースを犠牲にして視覚的により明確な階層を生成します。タブはLinuxカーネルコミュニティ、一部のGoプロジェクト、タブ文字によって各閲覧者が自分の視覚的な幅の好みを設定できると主張する開発者に好まれています。「タブ対スペース」議論はほとんどの読者より古く決着がつきません。実用的な答えは、プロジェクトごとに1つを選び、フォーマッターに強制させることです。このツールは3つすべてを提供します。

インライン要素対ブロック要素、空白の罠

HTMLフォーマッティングにおける最大の落とし穴は、ブロックレベル要素とインライン要素の区別です。ブロック要素(<div>、<p>、<section>、<article>、<ul>)は段落スタイルのブロックとして流れ、それらの間の空白は何も視覚的に表示されないため、フォーマッターはそれらの周りに改行とインデントを自由に追加できます。インライン要素(<span>、<a>、<strong>、<em>、<code>)はテキスト内で流れ、それらの間の空白は表示されます。<p>Hello <strong>world</strong>!</p>を考えてみてください。「Hello」と<strong>の開始タグの間のスペースは、単語の間に表示される実際のスペース文字です。素朴なフォーマッターがその行を分割して<strong>を独自の行にインデントすると、レンダリングされた出力は静かに目に見える空白を獲得し、追加のスペースを含む「Hello world」と読めるようになる可能性があります。さらに悪いことに、インライン要素間の空白を削除するフォーマッターは隣接する単語を融合させる可能性があります: スペースなしの「Helloworld」。「インラインタグを保持」オプション(ここではデフォルトでオン)は、フォーマッターにインライン要素を周囲のテキストと同じ行に保つように指示します。これはほとんどの実世界のHTMLにとって安全な動作です。

保護されたコンテンツ、pre、textarea、script、style

4つのHTML要素は空白に意味のあるコンテンツを持ち、再フォーマットされてはいけません: <pre>は改行とスペースを含めて書かれたとおりに正確にテキストを表示します; <textarea>の初期コンテンツは空白を保持します; <script>は意味論が空白に依存するJavaScriptを含みます(または少なくともインデントを追加するとソースが破損する場所で); <style>はHTMLではなくCSS対応のフォーマッターによって再フォーマットされるべきCSSを含みます。本番HTMLフォーマッター(Prettier、Tidy、js-beautify)はこれらの要素を検出し、そのコンテンツの再フォーマットをスキップします。このツールの正直な開示: 実装は本番ライブラリをラップするのではなく手書きで作られており、インライン対ブロック + 保護コンテンツの処理は保守的ですが完全にフォルトトレラントではありません。重い本番HTMLを通して出力が<pre>ブロック内で間違って見えたりスクリプトを壊したりする場合、より安全な選択肢はローカルでPrettierを使用することです(1コマンドのインストール: npm install -g prettier、その後prettier --parser html input.html)。通常のテンプレートおよびコンポーネントレベルのHTMLには、このツールが一般的なケースを処理します。

属性と自己終了タグの規約

HTML属性には独自のフォーマッティングの選択肢があります。短い属性リストは1行に収まります(<a href="/about" class="link">); 長いリストは1属性につき1行で改行され、しばしば閉じる>が独自の行にあります。PrettierのprintWidth: 80デフォルトは、行が80文字を超える場合にラッピングをトリガーします。これがモダンな規約です。一部のチームは属性の順序を強制します(最初にclass、次にid、次にdata-*、次にARIA、次にイベントハンドラー); ほとんどのフォーマッターは既存の属性順序を尊重し並べ替えません。並べ替えは微妙なケース(CSSの特異性、JavaScriptのクラス検索)で動作を変える可能性があるためです。自己終了タグ: HTML5は空要素の末尾のスラッシュを必要としません(<br>、<hr>、<img>、<input>、<meta>、<link>、HTML5には合計14の空要素があります)が、XHTMLとJSXは必要とします(<br />)。フォーマッターは設定に応じて、存在する場合はスラッシュを保持するか、削除するか(HTML5クリーン)、追加します(XHTMLフレンドリー)。このツールは入力に従います。ソースが<br />を使用していれば出力もそれを保持し、<br>を使用していればそれを保持します。

一般的な用途

• コードレビュー · 同僚と共有またはレビューする前にHTMLをクリーンアップします。
• デバッグ · よくフォーマットされたコードは、欠落しているタグや誤ったネストを見つけやすくします。
• テンプレートのクリーンアップ · テンプレートやビルドツールによって生成されたHTMLを再フォーマットします。
• 開発者間のハンドオフ · 同じプロジェクトで作業する他の開発者のためにコードを読みやすくします。
• 学習 · インデントパターンを観察してHTML構造をよりよく理解します。
• メールテンプレート検査。 メールテンプレートビルダー(Mailchimp、ConvertKit)はしばしば読みにくいインラインスタイルのHTMLを生成します。フォーマットすると変更を送信する前に構造が見えるようになります。

モダンパイプライン、保存時のPrettier

ビルドパイプラインを持つプロジェクトの場合、2026年のデフォルトはエディタで保存時に実行されるPrettierと、pre-commitフックを介したすべてのコミット時の実行です。VS Codeは拡張機能をインストールするとデフォルトのHTMLフォーマッターとしてPrettierを出荷します; Format Document(Windows/LinuxではShift+Alt+F、macOSではShift+Option+F)でトリガーするか、設定で"editor.formatOnSave": trueを有効にします。JetBrains IDE(WebStorm、IntelliJ)は設定 → 言語とフレームワーク → JavaScript → PrettierからPrettierを統合します。Husky + lint-stagedを介したpre-commitフックはコミットを許可する前にすべてのステージされたファイルでPrettierを実行し、フォーマットされていないHTMLがリポジトリに到達しないようにします。CIチェックはプルリクエストでprettier --checkを実行してフォーマットのドリフトをキャッチします。これらは他からコピペされた1回限りのスニペットには重要ではありません。それがまさにこのブラウザ内ツールの目的です。長期プロジェクト作業にはPrettierをセットアップしてください。ブラウザ内ツールは他のすべてに対する摩擦のないオプションです。

プライバシー: なぜブラウザのみが重要なのか

HTMLにはサードパーティに見せたくないものがしばしば含まれます: 内部管理ツールテンプレート、未リリースの製品ページマークアップ、クラス名で実験仮説が明らかになるA/Bテストのバリアント、パーソナライズされたコンテンツのメールテンプレート、プレースホルダーにPIIを含む顧客ダッシュボード。サーバーサイドフォーマッターはあなたのHTMLをサードパーティサービスにアップロードし、そこでログに残ります。このツールはJavaScriptを介してブラウザ内で完全に実行されます。Formatをクリックする間にDevToolsのネットワークタブで検証するか、ロード後にページをオフラインに(機内モードに)してもフォーマッターはまだ動作することを確認できます。未リリースの製品テンプレート、内部管理ページ、A/Bテストバリアント、または見知らぬ人のハードドライブにコピーされたくないHTMLに対して安全です。

よくある質問

HTML美化とは?

HTML美化は、インデントと改行を追加してコードを読みやすく再フォーマットします。ブラウザでのHTMLのレンダリングを変更せずに、デバッグと編集をはるかに容易にします。

フォーマットはブラウザでのHTMLの表示を変更しますか?

いいえ。フォーマットはスペースとインデントのみを追加します。ブラウザはHTMLの余分なスペースを無視します。フォーマットされたHTMLは元のHTMLと同じように表示されます。

インラインタグとは?

インラインタグ(<span>、<a>、<strong>など)は、改行を作成せずにテキストに挿入されます。「インラインタグを保持」オプションは、それらが別々の行に配置されるのを防ぎ、コンテンツとともに保持します。

2スペース、4スペース、それともタブ?

2スペースはモダンWebのデフォルトで、GitHub、Google HTML/CSSスタイルガイド、Prettier、WHATWGスタイル例、ほとんどのnpmパッケージで使用されています。4スペースはより古いJava / Microsoft / PHPの伝統に残存しています。タブはLinuxカーネルと一部のGoプロジェクトに好まれています。議論はほとんどの読者より古く決着がつきません。実用的な答えは、プロジェクトがすでに使用しているもの(またはチームの一般的な規約)に合わせ、フォーマッターに強制させることです。プロジェクトコンテキストのない1回限りのスニペットの場合、2026年では2スペースが最も安全なデフォルトです。

すでにPrettierを使用している場合、これを使うべきですか?

おそらくいいえ。エディタのPrettier統合が保存時にこれを行っており、完全なHTML AST認識と本番フォーマッターが必要とする保護コンテンツ処理を備えています。このツールはビルドパイプラインがカバーしないケースのためのものです: ブラウザインスペクターから貼り付けられたHTML、メールやチャットからのスニペット、検査したいテンプレートエンジン出力、プロジェクトコンテキスト外の1回限りのフォーマッティング。長期プロジェクト作業にはローカルでPrettierをセットアップしてください。摩擦のない1回限りの作業には、このツールが正しい形です。

私のHTMLファイルはアップロードされますか?

いいえ。フォーマッティングはJavaScriptを介してブラウザ内で完全に実行されます。貼り付けたHTMLは決してネットワークを越えません。Formatをクリックする間にDevToolsのネットワークタブで検証するか、ロード後にページをオフラインに(機内モードに)してもツールはまだ動作することを確認できます。未リリースの製品テンプレート、内部管理ページ、A/Bテストバリアント、パーソナライズされたコンテンツのメールテンプレート、または見知らぬ人のハードドライブにコピーされたくないHTMLに対して安全です。

関連ツール