HTMLをGFM Markdownに変換し、省いた箇所まで表示します
HTML Markdown 変換ツールは、HTMLの見出し・段落・リスト・表・コード・リンクを GitHub Flavored Markdown(GFM)の記法に書き換えるツールです。<h2> は ## に、<strong> は ** に、リンクは [文字](URL) に、表は | で区切ったMarkdownの表になります。タグを消して文字だけを残すのではなく、文書の骨組みをそのまま移すので、結果はGitHubのREADMEやMarkdown対応のメモアプリにそのまま貼り付けられます。
HTMLコードを貼り付けるほか、Webページや Google ドキュメントでコピーした内容もそのまま貼り付けられます。画面からコピーした内容は、ブラウザが一緒に渡すHTMLの書式として受け取って変換します。結果の下には、文書がどんなブロックの順に変換されたかを示す構造マップと、結合セル・相対URL・埋め込み動画のようにMarkdownにそのまま書けず、省いたり書き方を変えたりした箇所をまとめた変換ログが表示されます。
HTMLをMarkdownに変換する場面
- ブログやCMSの記事を別の場所に移すとき: WordPressなどのCMSの記事はHTMLで保存されています。静的サイトジェネレーターやMarkdown対応のメモアプリに移す場合、見出し・リスト・リンクを打ち直すより、Markdownに変換するほうが早く済みます。
- Webの文書をREADMEや開発ドキュメントにまとめるとき: インストール手順のWebページをコピーして貼り付けると、コードブロックの言語名(
language-bash)やチェックボックスのタスクリストまでGFMの記法に変換されます。 - Google ドキュメントの議事録をMarkdownのノートに移すとき: 文書エディタからコピーした内容は、太字・斜体がタグではなく style の値で書かれていることが多くあります。このツールはその値を読み取り、
**太字**と*斜体*に変換します。 - AIツールやメモにWebの文章を短く入れたいとき: class・style などの装飾属性とスクリプトを取り除くと、同じ内容がかなり短くなります。上の例の「文書エディタからコピー」は1,182バイトが334バイトに、「メールマガジン」は1,053バイトが406バイトになりました。
- メールマガジンを保存しておくとき: メールのHTMLにはレイアウト用の表や、開封確認用の1×1画像が多く含まれます。レイアウト用の表は展開して文章にし、追跡画像は除外するので、読める文書だけが残ります。
使い方
- HTMLを入れる: HTML欄にコードを貼り付けるか、Webページで必要な部分を選んでコピー(Ctrl+C)してから貼り付けます。HTML・HTMファイルは「ファイルを開く」で選ぶか、欄にドラッグ&ドロップします。例が表示されたまま貼り付けると、例が丸ごと置き換わります。
- 貼り付けた形式を確認する: 画面からコピーした内容はHTMLの書式として、コードエディタでコピーしたHTMLコードは文字そのままで入ります。意図と違う場合は、ステータス行の「文字だけ貼り付ける」か「画面の書式で貼り付ける」を押します。
- Markdownの書き方を選ぶ: 見出し記号(
#または下線)、リスト記号(-*+)、強調記号、コードブロックの囲み、リンクの書き方、表の形式を選びます。変更するとすぐに結果が書き直されます。 - 基準URLを入れる:
/images/a.jpgのような相対URLがある場合は、元のページのURLを基準URL欄に入れて完全なURLに置き換えます。HTML内に base・canonical・og:url があれば自動で入ります。 - 確認して持ち出す: プレビューで見た目を確かめ、構造マップの帯をクリックして結果の該当部分に移動し、変換ログを読みます。「Markdownをコピー」か「.md保存」で持ち出します。結果欄で Ctrl+Enter(⌘Enter)を押してもコピーされます。
タグごとの変換結果
既定の設定(見出し #、リスト -、強調 *、コード ```、リンクは文中、表はMarkdown)でこのツールが実際に出力する結果です。
| HTML | Markdown | 説明 |
|---|---|---|
<h2>概要</h2> | ## 概要 | h1〜h6は # 1〜6個です。下線方式はレベル1・2だけに使われます。 |
<strong>太字</strong> <em>斜体</em> | **太字** *斜体* | b・i タグや、style の font-weight 600以上・font-style:italic も同じ扱いです。 |
<del>取消</del> | ~~取消~~ | GFMの取り消し線です。s・strike タグや line-through も同じです。 |
<code>npm i</code> | `npm i` | コード内にバッククォートがあれば、より長いバッククォートで囲みます。 |
<a href="https://example.com">例</a> | [例](https://example.com) | 文字とURLが同じ場合は <https://…> の形に短縮します。 |
<img src="a.png" alt="図"> |  | 画像ファイルは含まれず、URLだけが残ります。 |
<ul><li>りんご</li><li>なし</li></ul> | - りんご- なし | 入れ子のリストは、前の記号の幅だけ字下げします。 |
<ol start="3"><li>三つ目</li></ol> | 3. 三つ目 | start の番号を引き継ぎます。 |
<li><input type="checkbox" checked> 完了</li> | - [x] 完了 | リスト項目の先頭にあるチェックボックスは、GFMのタスクリストになります。 |
<blockquote>引用</blockquote> | > 引用 | 中のリストやコードにも、行ごとに > を付けます。 |
<pre><code class="language-js"> | ```js … ``` | language-・lang- のクラスから言語名を取得します。 |
1行目<br>2行目 | 1行目␣␣2行目 | 行末の半角スペース2つが改行です。表のセル内では <br> のままにします。 |
H<sub>2</sub>O | H<sub>2</sub>O | GFMに記号のない sup・sub・kbd・mark・u は、タグのまま残します。 |
<hr> | --- | 区切り線です。 |
日本語の文書でMarkdownが崩れる4つの箇所
Markdownの記号は、前後の文字によって効く場合と効かない場合があります。日本語は単語の直後に助詞が続き、範囲を ~ で書くこともあるため、記号をそのまま置き換えるだけだと次のように崩れます。「記号だけ置き換えると」欄は、CommonMark 0.31.2 の実装(markdown-it)とGFMの実装(marked)で実際にレンダリングして確認した結果です。
| 元の文 | 記号だけ置き換えると | このツール |
|---|---|---|
| 「重要」は必ず読んでください | **「重要」**は → アスタリスクがそのまま表示されます。閉じる ** の直前が括弧で直後が文字(助詞)のため、強調を閉じられません。 | <strong>「重要」</strong>は |
| 注意:この件 | **注意:**この件 → 全角コロンも句読点として扱われ、直後に文字が続くため強調になりません。 | <strong>注意:</strong>この件 |
| 10~20人と30~40人 | 10~20人と30~40人 → GFMでは「20人と30」が取り消し線になります。GFMは ~ 1つで囲んだ文字も取り消し線として読みます。 | 10\~20人と30\~40人 |
| [注意](必読) をご確認ください | [注意](必読) → 「注意」が「必読」というURLへのリンクになります。 | [注意\](必読) をご確認ください |
3行目の ~ は半角の場合だけが対象です。日本語の範囲表記に多い全角の 〜(U+301C)は、marked でも取り消し線にならないため、バックスラッシュを付けずそのまま残します。同様に、必要のないバックスラッシュは付けません。snake_case のように単語の途中にある下線は強調にならないのでそのままにし、C# のように行頭でない # もそのままです。強調記号に _ を選んだ場合は、単語の途中で効かない箇所だけを ** に書き換えます。
Web画面とGoogle ドキュメントから貼り付けるとき
ブラウザで文章をコピーすると、クリップボードには見えている文字(text/plain)と画面の書式(text/html)の両方が入ります。このツールは貼り付けの瞬間に両方を読み取り、文字の側にタグが見えればHTMLコードをコピーしたもの、タグがなければ画面をコピーしたものと判断します。そのため、Webページをドラッグしてコピーした場合はその部分のHTMLが入り、コードエディタでHTMLコードをコピーした場合は、エディタの色分けの書式ではなくコードの文字が入ります。
Google ドキュメントは、コピーした範囲全体を <b style="font-weight:normal" id="docs-internal-guid-…"> で包み、実際の太字と斜体は span の font-weight:700・font-style:italic で書きます。外側の b タグを太字としてそのまま読むと、貼り付けた文章全体が **…** で囲まれてしまう問題が、複数のエディタで報告されています。このツールは font-weight:normal の b タグを太字とみなさず、内側の span の style の値から太字・斜体・取り消し線・上付き文字を変換します。上の例「文書エディタからコピー」がそのようなHTMLです。
表を変換するときの注意点
GFMの表は、1行目がヘッダーで、2行目に --- の区切り行が必要です。区切り行のコロンの位置が配置を表します。:--- は左揃え、---: は右揃え、:---: は中央揃えです。このツールはHTMLの align 属性や style の text-align から配置を取得し、全角文字を2桁分として数えて、元のMarkdownでも列がそろうように空白で埋めます(1列が40桁を超える場合は埋めません)。
- セル内の |: セルの区切りと区別するため
\|と書きます。GFM仕様により、コードやリンクの中の | も同じように書く必要があります。 - セル内の複数行: GFMの表のセルには段落やリストなどのブロックを入れられないため、行を
<br>でつなぎます。 - 結合セル: Markdownの表ではセルを結合できません。既定では結合されていた箇所を空のセルに展開し、表の設定をHTMLに変えると、class・style を取り除いたHTMLの表を rowspan・colspan ごとそのまま残します。
- ヘッダーのない表: ヘッダー行は必須のため、1行目をヘッダーとして使います。変換ログに件数が表示されます。
- レイアウト用の表: role="presentation" が付いている表、表の中に表がある場合、1列だけの表は、データではなくレイアウト用とみなし、セルの内容を順に展開して文章にします。メールのHTMLによくあります。
Markdownの書き方を選ぶ基準
| 設定 | 値 | 選ぶとき |
|---|---|---|
| 見出し | # 見出し / 下線 | 下線(===、---)はレベル1・2にしか使えず、レベル3以降は # で書きます。多くの文書では # 方式のほうが読みやすく、直しやすくなります。 |
| リスト | - * + | 結果は同じです。同じ記号のリストが2つ続くと1つにまとまるため、間に <!-- --> を入れて分けます。 |
| 強調 | * / _ | _ は単語の途中では効かないため、助詞が続く日本語には * が向いています。_ を選んでも、効かない箇所は * で書きます。 |
| コード | ``` / ~~~ / 字下げ | 言語名(```js)が残るのは囲み方式だけです。コードの中に同じ囲みがある場合は、1文字長い囲みを使います。 |
| リンク | 文中 / 末尾にまとめる | URLが長い文章では「末尾にまとめる」が読みやすくなります。文中に [文字][1]、文書の末尾に [1]: URL が付き、URLとtitleが同じリンクは同じ番号になります。 |
| 表 | Markdown / HTML | 結合セルがある表や、セルに長いリストがある表は、HTMLのほうが見た目を保てます。HTMLを削除するエディタに入れる場合はMarkdownを選びます。 |
Markdownはどれだけ軽くなるか
同じ内容でも、装飾属性・スクリプト・レイアウト用の表を取り除くと、サイズは大きく減ります。下は、このツールの例を開いたときにサイズバーに表示される値(UTF-8のバイト数)です。style の値が多い文書エディタのHTMLと、メールのHTMLが最も小さくなりました。
| 例 | HTML | Markdown | 軽量化の割合 |
|---|---|---|---|
| ブログ記事 | 887 B | 595 B | 33% |
| 表・結合セル | 732 B | 437 B | 40% |
| 開発ドキュメント | 952 B | 668 B | 30% |
| 文書エディタからコピー | 1,182 B | 334 B | 72% |
| メールマガジン | 1,053 B | 406 B | 61% |
よくある間違い
- ページのソース全体を入れて、メニューまで変換されてしまう: ソース表示のコードには、上部のメニューやフッターのリンクも含まれます。本文だけが必要なら、画面で本文の部分だけを選んでコピーしてから貼り付けてください。
- 相対URLのまま別の場所に公開してしまう:
/uploads/a.jpgは元のサイトでしか開けません。基準URLを入れて完全なURLに置き換えてください。 - プレビューに画像が表示されないのを不具合と思う: プレビューは、プライバシーと速度のために画像を読み込まず、「画像」の表示と代替テキストだけを見せます。結果の
は正常です。 - Markdownの表の空のセルを、値が抜けたものと思う: 結合セルを展開した箇所かもしれません。変換ログに「結合セル」があれば、元の表と見比べるか、表をHTMLのままにしてください。
- 行末の半角スペース2つを削除してしまう: 改行(br)は行末の半角スペース2つで書きます。保存時に行末の空白を自動で削除するエディタを使うと、改行が消えます。
- HTMLタグを受け付けない場所に貼り付ける: 上付き文字・キーボード・折りたたみ・HTMLの表、助詞の前の太字はタグで書きます。HTMLを削除するエディタでは、その箇所の文字は残りますが装飾が消えます。
制限事項
- Markdownは文書の構造を書く形式なので、CSSの色・フォント・余白・配置は変換されません。
- URLを入力してページを取得する機能はありません。ログイン後にしか見えない内容や、スクリプトが後から埋め込む内容は、画面からコピーして貼り付ける必要があります。
- 画像・動画のファイルは .md に含まれず、URLだけが残ります。data: URLで文中に埋め込まれた画像は、結果が長くなりすぎるため除外します。
- iframe・video・audio はURLのリンクとしてだけ残り、フォーム(入力欄・ボタン)とSVG画像は変換しません。
- ワープロが、リストを行頭記号付きの段落として書き出したHTMLは、リストではなく段落として変換されることがあります。
- 入力は2 MBまで読み込みます。結果がGitHubでどう表示されるかはGFM仕様に基づくもので、エディタによってHTMLタグの扱いや改行の表示は異なる場合があります。
出典
基準: Markdownの記法は GFM 0.29-gfm 仕様と CommonMark 0.31.2 仕様、ブラウザの動作は MDN のドキュメントを、2026年10月22日に確認しました。日本語の表のレンダリング結果は markdown-it(CommonMark)と marked(GFM)で、上の表の Markdown はこのツールの出力で確認しています。
- 01GitHub Flavored Markdown Spec 0.29-gfm4.10 表(区切り行・配置・セル内の \| はコードの中でも — 例200・ブロック禁止)、5.3 タスクリスト、6.5 取り消し線(チルダ1つまたは2つ、例491)、6.11 除外されるHTMLタグ
- 02CommonMark Spec 0.31.2強調の左右境界(flanking)規則、バックスラッシュエスケープ、順序リストの番号(9桁まで)、改行
- 03MDN — DOMParser.parseFromString()text/html として読んだ文書の script は実行されない
- 04MDN — Element: paste eventclipboardData.getData() で貼り付ける内容を読み、既定の動作を変える方法
- 05RFC 7763 — The text/markdown Media Type.md ファイルの形式名 text/markdown(2016年3月)
- 06MarkText #4688 — Pasting from Google Docs makes the whole paragraph boldGoogle ドキュメントの docs-internal-guid の b ラッパーと span の font-weight の値
よくある質問
HTMLタグ除去ツールとの違いは何ですか?
タグ除去ツールは文字だけを残します。この変換ツールは、h2 を ## に、strong を ** に、リンクを [文字](URL) に、表を | で区切ったMarkdownの表にして、文書の構造を残します。結果はGitHubのREADMEやMarkdown対応のメモアプリにそのまま貼り付けられます。
WebページのURLを入力して、そのまま変換できますか?
できません。このツールはサーバーを経由せず、他のサイトのHTMLを取得しません。ページで必要な部分を選んでコピーし、HTML欄に貼り付けると、画面の書式がHTMLとして入ります。ページ全体が必要なら、ブラウザのページのソース表示からコードをコピーして入れてください。
Google ドキュメントからコピーした文章が、全部太字になりませんか?
なりません。Google ドキュメントは、コピーした範囲全体を font-weight:normal の b タグで包み、実際の太字・斜体は span の style の値(font-weight:700、font-style:italic)で書きます。この変換ツールは外側のタグを太字とみなさず、style の値を読んで太字・斜体・取り消し線を変換します。
太字にした箇所に <strong> タグが残るのはなぜですか?
CommonMarkの規則では、閉じる ** の直前が句読点や括弧で、直後が文字だと、強調として読まれません。**「重要」**は、**注意:**この件 のように、日本語でよく起きる形です。こうした箇所は <strong>「重要」</strong>は のようにタグで書くと、GitHubなどでも太字で表示されます。
10~15 の ~ の前に \ が付くのはなぜですか?
GFMは ~ 1つで囲んだ文字も取り消し線として読みます(仕様の例491)。「10~15 km、20~30 km」のように ~ が2つあると、その間が消された文字に見えるため、\~ と書きます。画面には ~ と表示されます。日本語でよく使う全角の 〜 は取り消し線にならないので、そのままです。
結合セル(rowspan・colspan)のある表はどう変換しますか?
Markdownの表ではセルを結合できないため、既定では結合された箇所を空のセルに展開します。見た目を保つには、表の設定をHTMLに変えてください。class・style を取り除いたHTMLの表をそのまま残すので、HTMLを使えるGitHubのREADMEなどでは、結合セルもそのまま表示されます。
相対URL(/images/a.jpg)はどう置き換えますか?
基準URL欄に元のページのURLを入れると、https://…/images/a.jpg のような完全なURLに置き換えます。HTML内に base・canonical・og:url のURLがあれば、自動で入ります。基準URLがない場合は相対URLをそのまま残し、変換ログに件数を表示します。
入力したHTMLはサーバーに送信されたり、保存されたりしますか?
いいえ。貼り付け、ファイルの読み込み、変換、プレビューはすべてブラウザ内で処理し、アドレスバーやブラウザの保存領域にも残しません。入力したHTMLのスクリプトは実行せず、プレビューは画像を読み込まずに代替テキストだけを表示します。