HTML 整形

コンパクトまたは乱雑な HTML を、読みやすいインデントされたマークアップにフォーマットします。

入力
出力
0 文字 0 行

HTML の検査と編集を容易にする

HTML 整形 は、コンパクトな HTML を、ネストされた要素の周囲に改行とインデントを備えた読みやすい構造に拡張します。 スニペット、テンプレート、生成されたマークアップ、電子メール、およびコピーされたページ フラグメントを検査するのに役立ちます。

HTML パーサーは多くの不正な形式のドキュメントから回復するため、ブラウザーの解析ルールを反映しながら、整形された出力はソースよりもきれいに見えます。書式設定ではタグと属性を保持する必要がありますが、空白を区別するインライン テキストを確認する必要があります。

使い方

  1. HTML コードを入力エディターに貼り付けます。
  2. 「HTML を整形」をクリックして、マークアップをリフローしてインデントします。
  3. 出力で予想されるネスト、コメント、インライン テキスト、および属性を確認します。
  4. クリップボードには コピー、ファイルには ダウンロード、リセットには クリア を使用します。

HTML ビューティファイヤーとは何ですか?

HTML 整形 は、高密度マークアップをスキャンして編集できるドキュメントに変換するためのブラウザベースのユーティリティです。これは、親子関係、間違って配置された終了タグ、生成された HTML の大きなブロックを明らかにするのに役立ちます。

HTML 空白は、インライン レイアウト、テキスト ノード、およびフォーマット済みコンテンツに影響を与える可能性があります。テンプレートまたはプロダクション マークアップを美しくした後、レンダリングされた出力が依然として意図と一致していることを確認します。

入力に関する注意

HTML の断片または完全なドキュメントを貼り付けます。ビルド システムが依存する可能性がある <pre>、インライン要素、テンプレート構文、コメントには注意してください。

例

ネストされた各要素を独自の行に配置すると、密度の高いドキュメントを理解しやすくなります。

--- 圧縮入力 ---
<html><head><title>Test</title></head><body><p>Hello</p></body></html>

--- 整形出力 ---
<html>
  <head>
    <title>Test</title>
  </head>
  <body>
    <p>Hello</p>
  </body>
</html>

MCP 連携

MCP (Model Context Protocol) により、AI エージェントやアプリは Coding.Tools のユーティリティを発見し、変換、整形、ハッシュ、生成ワークフローで実行できます。

MCP ツール名: html-beautifier

MCP エンドポイント: https://coding.tools/mcp

まず tools/list を呼び出してください。各ツールには inputSchema、outputSchema、examples が含まれるため、AI エージェントやクライアントは推測せずに有効な引数を作成できます。

tools/call では、表示用の値は result.content[0].text、機械処理用の値は result.structuredContent を読みます。ツール単位の失敗は isError: true、プロトコル単位の失敗は JSON-RPC error を返します。

tools/call リクエスト例:

curl -s https://coding.tools/mcp \
  -H "Content-Type: application/json" \
  -H "Accept: application/json" \
  -H "MCP-Protocol-Version: 2025-06-18" \
  -d '{"jsonrpc":"2.0","id":1,"method":"tools/call","params":{"name":"html-beautifier","arguments":{"input":"<section><h1>Docs</h1><p>MCP ready</p></section>"}}}'

ほとんどのテキストおよびデータツールは input 文字列と任意の options を受け取ります。ブラウザの画像 API が必要な画像ツールは発見用に公開され、必要に応じて Web UI へのリンクを返します。