HTML フォーマッター オンライン

マークアップを整形または圧縮し、インライン CSS と JS を Prettier で整形する HTML フォーマッター。

HTML の整形・圧縮・プレビューはすべてブラウザ内で行われ、サーバーにアップロードされることはありません。

開発・運営：Udit Agarwal

スタイルシートも整理しますか? CSS Formatter を試してください。

HTML フォーマッター について

この html フォーマッターは、生のマークアップを整形または圧縮し、インラインの CSS と JavaScript を Prettier で自動的に整形します。乱雑なテンプレート出力、スクレイピングしたページ、手書きのマークアップを貼り付けると、一貫してインデントされたクリーンな HTML を一度に得られます。圧縮モードに切り替えれば空白を除去して本番向けにドキュメントを縮小できます。サンドボックスプレビューはスクリプトを無効にしてマークアップを安全に描画するため、埋め込みスクリプトが実行されることはありません。html 整形ツールとして、コンテキストを切り替えずに html をオンラインで整形したいフロントエンド開発者、QA エンジニアなどに向けて作られています。すべてはブラウザ内のローカルで動作するため、データが端末から外に出ることはありません。インデントはタブまたはスペースを選んでプロジェクトのスタイルに合わせられます。

機能

• 一貫した読みやすいインデントで HTML を整形
• 空白を除去して出力を縮小する HTML 圧縮
• インラインの <style> と <script> ブロックを Prettier で整形
• サンドボックス化されたプレビューがスクリプト無効でマークアップを描画
• インデントのタブとスペースを切り替え
• 完全なページにも部分的なマークアップスニペットにも対応
• 整形済み・圧縮済み出力をワンクリックでコピー
• すべてブラウザ内で動作

HTML フォーマッター の使い方

1. 入力欄に HTML を貼り付けます。
2. 整形には Beautify、圧縮には Minify、描画には Preview を選びます。
3. Tabs をオン・オフしてインデントスタイルを設定します。
4. 出力パネルから整形済み・圧縮済み HTML をコピーします。

例

入力

<div   class="card"><h1>こんにちは</h1><p>Hello   world</p></div>

出力

<div class="card">
  <h1>こんにちは</h1>
  <p>Hello world</p>
</div>

Beautify モードがマークアップを再インデントし、空白を正規化。

よくあるエラーとトラブルシューティング

• 埋め込みスクリプトがプレビューで実行されない。 — これは意図的なものです。プレビューはスクリプト無効のサンドボックス iframe で、ページを安全に描画します。インタラクティブなコードはご自身の環境でテストしてください。
• インライン CSS や JS が再整形されない。 — コードが適切な <style> または <script> タグの内側にあることを確認してください。Prettier は整形時に認識されたインラインブロックのみを整形します。
• 不正または閉じられていないタグが予期しないインデントを生む。 — ソース内の対応していないタグを閉じてください。フォーマッターは有効な構造を再整形しますが、意図したネストを推測することはできません。
• 圧縮された出力が読みづらい。 — Beautify モードに戻してください。圧縮は読みやすさではなく本番のサイズを目的としています。

よくある質問

HTML フォーマッターとは何ですか?

HTML フォーマッターは、Prettier で HTML マークアップを整形または圧縮し、インラインの CSS と JavaScript を整形し、サンドボックス化された iframe で結果をプレビューするブラウザ内ツールです。

圧縮された HTML を整形するには?

圧縮された HTML を入力欄に貼り付けて Beautify を選びます。HTML フォーマッターはマークアップを再インデントし、インラインの <style> と <script> ブロックを読みやすく再整形します。

HTML フォーマッターはインライン CSS と JavaScript を整形しますか?

はい。Prettier がページの整形の一環として <style> と <script> ブロックを自動的に整形します。

整形だけでなく HTML を圧縮することもできますか?

はい。Minify モードに切り替えると空白を除去し、本番向けに最小の等価マークアップを生成します。

スペースの代わりにタブを選べますか?

はい。HTML フォーマッターの Tabs オプションを切り替えるとタブでインデントし、オフにするとスペースを使います。

HTML を整形するときどこかにアップロードされますか?

いいえ。整形とプレビュー描画はすべてブラウザ内のローカルで行われるため、マークアップが端末から外に出ることはありません。

関連ツール

• CSS / SCSS フォーマッター — CSS/SCSS/LESS の整形・圧縮、プロパティの並べ替え、重複の除去を行います。
• JS / TS フォーマッター — JavaScript・TypeScript・JSX/TSX を Prettier のオプションで整形。素の JavaScript は圧縮もできます。
• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• HTML エスケープ / アンエスケープ — HTMLの特殊文字とエンティティをエスケープ・アンエスケープします。
• Markdown プレビュー — MarkdownをHTMLにレンダリングし、ライブプレビューします。
• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• JSON フォーマッター — JSONの整形・圧縮・検証を行い、エラー箇所も表示します。
• SQL フォーマッター — MySQL、PostgreSQL、SQL Server、SQLite、BigQuery、Oracle 向けにSQLを整形します。

コードフォーマッターの他のツール

• XML フォーマッター — XMLの整形・圧縮・検証を行い、XML ↔ JSON を変換します。
• SQL フォーマッター — MySQL、PostgreSQL、SQL Server、SQLite、BigQuery、Oracle 向けにSQLを整形します。
• GraphQL フォーマッター — GraphQLのクエリやスキーマを整形・圧縮し、構文を検証してオペレーションを抽出します。
• Dockerfile フォーマッター — Dockerfileを整形し、ベストプラクティスやlintの提案を表示します。
• MongoDB クエリフォーマッター — MongoDBシェルのクエリと集約パイプラインを整形します。
• コントラストチェッカー — 2色間のWCAGコントラスト比とAA/AAA合格を確認します。
• Mermaid 図レンダラー — Mermaid図（フロー、シーケンス、ガント）をブラウザ内でSVGにレンダリングします。
• SVG オプティマイザー — SVGを圧縮: コメント、メタデータ、エディタの残骸を削除し、空白をまとめます。
• MongoDB クエリ整形ツール — MongoDB のクエリや find() 文をブラウザ内で整形・インデントします。
• MongoDB 集計整形ツール — MongoDB の集計パイプラインをブラウザ内で整形・インデントします。
• MongoDB エクスプローラー — MongoDB のドキュメントやコレクションのサンプルを調べ、フィールドのスキーマと型を推測します。
• OpenAPI / Swagger フォーマッター — OpenAPI / Swagger 仕様（JSON または YAML）を整形・検証し、パスと操作の数を数えます。

コードフォーマッターのツールをすべて見る (32) · すべてのツール