HTML Markdown変換
HTMLやWebクリップをGitHub Flavored Markdown（GFM）に瞬時に変換。インラインスタイルを除去し、テーブルやコードブロックをクリーンなMDファイルとして出力します。
W3C DOM構文解析 ➔ Markdownシリアライズ0 nodes
HTMLソース入力HTML5
HTML入力を待機中
文字数0
単語数0
行数0
容量削減率0%
クリーン度100%
推定読了時間1m
技術リファレンス・アーキテクチャガイド
HTML to Markdown Converter (GFM & Tables) ガイド — 技術リファレンス
HTMLをクリーンなテーブル、コードブロック、画像を含むGitHub Flavored Markdown（GFM）へ即座に変換します。不要な生タグやインラインスタイルをサニタイズし、完全にブラウザローカル環境で正規化されたMarkdownドキュメントを生成・コピーできます。
主要パラメータと設定項目
見出しデリミタ形式（ATX vs Setext）ATX (#) | Setext (=== / ---)
CommonMark 仕様 §4.2 に準拠した見出し AST のシリアライズ形式を制御します。ATX プレフィックスハッシュ（# H1 〜 ###### H6）を使用することで、複数行の段落マージや Setext アンダーラインの誤認識を防ぎ、決定論的なトークン境界を保証します。
初期値: ATX (#)
GFM パイプ表アライメント区切り記号コロン区切り (:--- | :---: | ---:)
GitHub Flavored Markdown（GFM 仕様 §4.10）テーブルの2行目における列揃え区切り記号を定義します。インライン CSS の text-align スタイルや HTML の align 属性を解析し、コロン位置（:--- 左揃え、:---: 中央揃え、---: 右揃え）へとマッピングします。
初期値: :---
フェンスコードブロックの言語ヒント検出トリプルバッククォート (```lang) | 4スペース字下げ
ネストされた <pre><code> DOM ノードから構文ハイライト用のクラストークン（class="language-typescript"、class="highlight-source-python" など）を抽出し、CommonMark §4.5 に準拠した情報文字列（info string）として開始バッククォートの直後に付与します。
初期値: フェンス (```lang)
HTML タグのサニタイズとノイズ除去DOM ウォーカー・ホワイトリストフィルタ
O(n) 深さ優先探索（DFS）を用いてアクティブスクリプトや非コンテンツの DOM サブツリー（<script>、<style>、<iframe>、<object>、<nav>、<noscript>）を枝刈りし、内包テキストを保持しながらセマンティクスを持たない <div> や <span> ラッパーを除去します。
初期値: 有効（厳格）
HTML 実体参照・数値文字参照デコードUTF-8 実体正規化
名前付き実体参照（©、&）、10進数値文字参照（ ）、16進数値文字参照（—）を標準の UTF-8 文字へデコードしつつ、構文衝突を防ぐために CommonMark の有効な構文区切り文字（\*、\_、\`、\#、\|）を自動エスケープします。
初期値: 自動デコード
リンク・画像参照記法（インライン vs 参照形式）インライン [text](url) | 参照形式 [text][id]
アンカー（<a>）および画像（<img>）ノードのシリアライズ記法を制御します。インライン記法ではリンク先 URL をテキストの直後に配置し、参照記法ではドキュメント末尾に URL フットノート辞書を集約生成してトークン密度を最適化します。
初期値: インライン
現場のベストプラクティス・実践Tips
表セル内の改行をサニタイズして行の分断を防止
標準の GFM パイプ表では、すべての行が単一の物理行に収まることが義務付けられており、生の改行文字（\n や \r\n）が含まれると表のパースが即座に破綻します。<td> セル内の <br> やブロック要素（<p>、<div>）をインラインの <br /> タグや半角スペースに置換することで、表のグリッドアライメントを維持してください。
表内のインラインコードに含まれるパイプ文字をエスケープ
GFM 表パーサーは、バッククォートによるインラインコードを評価する前にリテラルパイプ文字（|）で行を分割します。セル内にシェルコマンドやビット演算（例: `cat file | grep key`）が含まれる場合は、パイプを \| とエスケープするか、パディング付き二重バッククォート（`` `cat | grep` ``）で囲んで意図しない列分割を防止してください。
ネストされた複数ブロックのリスト項目には4スペース整列を徹底
CommonMark 仕様 §5.2 では、リスト項目内のサブブロック（入れ子リスト、引用、フェンスコードブロックなど）は、リストマーカー後の最初の非空白文字に合わせてインデント（通常4スペースまたは1タブ）することが規定されています。2スペースのインデントでは、厳格な構文解析エンジンがリストを早期終了と判定する原因になります。
DOM 属性の除去前にシンタックスハイライト用クラスを抽出
Prism.js や Highlight.js などのコードハイライターは、言語識別子を親の <pre class="brush: js"> や子の <code class="language-python"> に格納することが多々あります。非セマンティックな属性を破棄する前に、正規表現 (?:lang|language)-([a-zA-Z0-9_-]+) を用いて両方のノードを走査し、言語トークンを確実に抽出してください。
よくある落とし穴とトラブルシューティング
⚠️HTML のテーブルが GFM グリッドにならず、バラバラの生テキストや断片化したパイプ区切りとして出力される
GFM 仕様 §4.10 では、ヘッダー行の直下に列数が完全に一致する構造区切り行（| :--- | ---: |）が必須です。変換元のテーブルにセマンティックな <thead> または <th> セルで構成された明確な先頭 <tr> が含まれていることを確認し、セル内部の改行が <br /> に正規化されていることを検証してください。
⚠️整形済みコードブロックの縦方向インデントが失われ、単一の平坦な段落に潰れてしまう
変換元の HTML がセマンティックな <pre><code> 要素ではなく、CSS の white-space: pre を指定した <div> や <p> タグに依存している場合に発生します。AST 走査の前にコンテナ要素をセマンティックな <pre> タグへ正規化するか、CSS の空白文字指定を考慮した抽出処理を有効にして改行とインデントを維持してください。
⚠️出力された Markdown 内に生の HTML タグ（<span>、<div>、<font>）が残留して汚れてしまう
DOM 変換エンジンは、未認識の要素や複雑なインラインスタイルを持つタグを生の HTML パススルーとして保持する傾向があります。パーサー設定で非セマンティック要素の厳格なアンラップ処理を有効化し、構造ラッパーを除去しつつ内部のテキストノードや有効なインライン子タグ（<em>、<strong>、<a>）を再帰的に維持してください。
よくある質問 (FAQ)
列の配置崩れを起こさずに HTML テーブルを Markdown に変換するには？▼
HTML のテーブルを GitHub Flavored Markdown（GFM）へ変換するには、<th> セルをヘッダー列に変換し、アライメント指定コロンを含む区切り行（| :--- | :---: | ---: |）を挿入した上で、セル内のすべての改行を <br /> タグへ平坦化する必要があります。標準の GFM パイプ表では各行が厳密に1本の連続した物理行でなければならず、<td> 要素内に未処理の復帰改行（\r\n）が残っていると、表構文が破綻して孤立したテキストブロックになってしまいます。インラインの配置属性（align="left|center|right"）や CSS の style="text-align: *" を構文解析し、2行目の区切りマーカーへと正確にシリアライズすることが不可欠です。
CommonMark と GitHub Flavored Markdown（GFM）の違いは何ですか？▼
CommonMark は Markdown のコア構文を標準化した厳密な仕様（RFC 7764）であるのに対し、GitHub Flavored Markdown（GFM）はその完全な上位互換（スーパーセット）であり、パイプ表（§4.10）、タスクリスト（§5.3）、取り消し線（§6.5）、自動リンク（§6.9）、言語指定付きフェンスコードブロックのネイティブ仕様を追加したものです。CommonMark ではパイプ文字（|）を通常テキストとして扱いテーブル構造が非構造化段落に崩れてしまいますが、GFM では表データを構造化マトリックスとして解釈でき、現代のコードリポジトリや Wiki、各種静的ドキュメントジェネレーターで広く標準サポートされています。
HTML の pre code ブロックを Markdown へ変換する際にコードハイライトを維持するには？▼
シンタックスハイライトを維持するには、<pre> または <code> タグの HTML クラス属性（class="language-typescript"、class="lang-python"、class="highlight-source-sql" など）から言語識別子を抽出し、開始トリプルバッククォートの直後に情報文字列（```typescript）として付加する必要があります。元の HTML がクラス指定を持たず span タグのみで色付けされている場合、AST パーサーは親要素の data-language や data-lang 属性をフォールバックとして走査し、CommonMark §4.5 に準拠したフェンスコードブロックを再構成します。
ネストされた div や span タグを含む HTML から出力された Markdown が乱雑になる理由は？▼
入れ子になった <div> や <span> 要素は装飾目的の汎用コンテナであり、CommonMark に直接対応する構文が存在しないため、パーサーが生の HTML タグをそのまま出力するか余計な改行トークンを挿入してしまうことが原因です。セマンティックな AST アンラップ処理を行わない変換エンジンの場合、これらのタグによって不要な段落改行や二重マージン、孤立した装飾トークンが発生します。O(n) 再帰的 DOM アンラップによるドキュメントのサニタイズを実施し、セマンティックなテキストノードを保持しながらコンテナ深度を平坦化することが解決策となります。
LLM のプロンプトコンテキスト用に HTML を Markdown へ変換してトークン消費を抑える方法は？▼
Web ページからスクレイピングした生の HTML をクリーンな Markdown に変換すると、定型的な DOM ノード（<nav>、<header>、<footer>、<script>、<style>）の除去、肥大化した CSS クラスの削除、ネストしたタグの簡潔な Markdown 構文への置換により、LLM プロンプトのトークン消費量を 55% 〜 75% 削減できます。この高密度な構造表現により、コンテキストウィンドウのオーバーヘッドが劇的に軽減され、推論レイテンシが短縮されるとともに、構文ノイズの排除によって検索拡張生成（RAG）のベクトル埋め込み精度が大幅に向上します。
関連開発者ツール
全ツール一覧 →テキスト差分比較ツール開発者ツール
テキスト、コード、設定ファイルの差分を高速比較。左右分割やインラインでの文字単位の変更確認、空白の無視、Unified Diff（.patch）の出力に対応。
ツールを開く→
カノニカルタグ生成ツール開発者ツール
有効なrel=canonicalタグやHTTPレスポンスヘッダーを瞬時に作成。不要な追跡パラメータの削除、URL正規化、重複コンテンツによるSEO評価の分散を確実に防止します。
ツールを開く→
cURLをFetchに変換開発者ツール
cURLコマンドを一瞬でFetch APIコードに変換。HTTPヘッダー、認証トークン、Cookie、JSONペイロードを自動解析し、最新のasync/await対応JavaScriptコードを生成します。
ツールを開く→
XMLサイトマップ検証ツール開発者ツール
XMLサイトマップおよびインデックスファイルの構文を瞬時に検証。5万URL制限、50MB容量上限、W3C Datetime（ISO-8601）、hreflang相互リンク、画像拡張、Google Search Console登録エラーを完全チェックします。
ツールを開く→
Google検索結果プレビュー開発者ツール
PC・モバイル対応のGoogle検索結果（SERP）スニペット表示を正確なピクセル幅でシミュレーション。リッチリザルト、サイトリンク、リアルタイムCTRスコア判定でタイトルとディスクリプションの省略を事前検証します。
ツールを開く→
CSSメッシュグラデーション開発者ツール
多点制御のCSSメッシュグラデーション、アニメーション背景、SVGカラーメッシュを瞬時に生成。アンカーポイントやフィルム粒子ノイズを微調整し、CSS・Tailwindコードを即座にコピーできます。
ツールを開く→