必要なツールを、すぐ使えるように

Markdown HTML 変換ツール

左側にMarkdownを入力するか貼り付けると、右側にWeb表示とHTMLコードがすぐに現れます。本文のみ・スタイル付き・文書全体の中から貼り付け先に合う形式を選び、下のチェック表で、強調が記号のまま残った箇所、つながった行、相対パスなど、貼り付けたあとに問題になりそうな箇所を確認できます。

最終更新 2026-10-22計算はブラウザ内だけで処理
サンプル
変換ルール
改行
元の HTML
HTML 形式

チェック

      最終更新 2026-10-22入力値は保存しません

      ROBERINの基準必要なツールを、
      すぐ使えるように。
      • ひと目で分かる画面入力と結果の位置をはっきり分けます。
      • 結果が先主要な結果を先に示し、過程は必要なときだけ。
      • 求めない登録や不要な入力なしですぐ使えます。

      Markdown を Web に貼れる HTML に変換し、貼る前に崩れる箇所を先に知らせます

      Markdown HTML 変換ツールは、#、**、- などの記号で書いた Markdown の文章を、Web ページが読み取れる HTML タグに変換するツールです。変換ルールは GitHub Flavored Markdown（GFM）の仕様に従い、エンジンには広く使われているオープンソースのライブラリ marked 18 をこのページに組み込んでいます。入力するそばから右側に Web 表示と HTML コードが現れ、結果は本文のみの HTML、スタイル付きの HTML、文書全体（.html）の中から、貼り付け先に合う形でコピーまたは保存できます。

      変換して終わりではなく、貼り付けたあとに問題になりそうな箇所をチェック表にまとめて表示します。日本語や韓国語の文章でよく起きる「強調の記号が文字として残る」箇所、空行なしの改行で1行につながってしまった行、別のサイトでは開けない相対パス、閉じ忘れたコードブロックなどが対象です。チェックカードを押すとエディタがその行へ移動し、中央の構造バーには、文書がどんなブロックでできているかとチェックすべき位置が一緒に表示されます。文章の変換はブラウザの中だけで行われ、サーバーには送信しません。

      Markdown を HTML に変換する場面

      • ブログやホームページの HTML 欄に文章を載せるとき：WordPress の「カスタム HTML」ブロックのように HTML を直接受け付ける欄へ Markdown の記号をそのまま貼ると、## や ** が文字として見えてしまいます。先に HTML へ変換しておけば、見出し・リスト・表が本来の見た目で入ります。
      • AI チャットの回答やメモを Web に移すとき：AI チャットツールの回答や開発者向けメモアプリの文章は、Markdown の記号で整えられていることが多くあります。そのまま貼ると記号が残るため、HTML や「書式ごとコピー」で移すほうがきれいに収まります。
      • メールマガジンを作るとき：メールサービスによっては <style> が制限されます。caniemail.com の調査では、Gmail の Web 版は本文（body）内の <style> に対応しておらず、サイズも 16 KB までに制限されています。この場合は、タグごとに装飾を直接入れる「スタイル付き」が安全です。
      • README や説明書を1枚の Web ページとして配るとき：「.html で保存」は、フォント・表・コードの装飾とダークモードの配色を備えた文書を1ファイル作ります。受け取る人は専用ソフトなしで、ブラウザからそのまま開けます。
      • HTML 入力欄のないエディタに貼るとき：「書式ごとコピー」は、クリップボードに HTML とプレーンテキストを同時に入れます。メール作成画面や文書エディタのように書式付きの貼り付けを受け付ける場所では、見出し・リスト・表の見た目がそのまま入ります。

      使い方

      1. Markdown を入れる：左側のエディタに文章を入力するか貼り付けます。.md・.markdown・.txt ファイルは「ファイルを開く」で選ぶか、エディタにドラッグ＆ドロップします。UTF-8 ではない古いファイルは EUC-KR として読み直します。
      2. 記法ボタンを使う：エディタ上のボタンは、選択した文字を太字・斜体・リンクで囲んだり、選択した行の先頭に見出し・リスト・引用の記号を付けたりします。Ctrl+B・Ctrl+I・Ctrl+K（Mac は ⌘）でも同じ操作ができます。記号は色分けして表示されるので、どこが見出しでどこが強調かを読み取りやすくなっています。
      3. Web 表示で確認する：右側の「Web 表示」は、結果を実際の Web ページのように見せます。エディタをスクロールすると同じ位置に追従し、エディタにカーソルを置くとそのブロックが左端のバーで示されます。「HTML コード」に切り替えると、タグが色分けされて表示されます。
      4. 変換ルールを選ぶ：改行の扱い、Markdown に混ぜた HTML の扱い、HTML 形式、強調の補正、見出し id を選びます。変更するとすぐに結果が作り直されます。
      5. チェックしてコピーする：下のチェックカードを確認し、「HTML をコピー」「書式ごとコピー」「.html で保存」のいずれかを押します。「このブラウザに保存」をオンにしておくと、入力中の文章とルールがこのブラウザにだけ残り、次に開いたときに続きから使えます。

      Markdown の記号と対応する HTML タグ

      下の表の HTML 欄は、このツールが実際に出力する結果です。表・タスクリスト・取り消し線・自動リンクは、CommonMark に GFM が加えた拡張記法です。

      MarkdownHTMLポイント
      ## 小見出し<h2>小見出し</h2># の数（1〜6）が見出しのレベルです。# の後ろには半角スペースが必要です。
      **太字** *斜体*<strong>太字</strong> <em>斜体</em>アンダースコア（__、_）でも同じですが、単語の途中では強調になりません。
      ~~取り消し線~~<del>取り消し線</del>GFM の拡張です。チルダ1つで囲んでも取り消し線になります。
      `npm install`<code>npm install</code>コード内の <、& は自動で変換され、そのまま表示されます。
      [案内](https://example.com)<a href="https://example.com">案内</a>アドレスにスペースがあるとリンクになりません。<、> でアドレスを囲むと、スペースが %20 に変わります。
      ![地図](https://example.com/map.png)<img src="…/map.png" alt="地図">角括弧の中の文字が画像の説明（alt）になります。
      - りんご
      - みかん      		<ul><li>りんご</li>…</ul>*、+ も箇条書きの記号として使えます。
      3. 三つ目
      4. 四つ目      		<ol start="3">番号は最初の項目だけ書けば、残りは順に振られます。1. 1. 1. と書いても 1・2・3 になります。
      - [x] 予約する<input checked="" disabled="" type="checkbox"> 予約するGFM のタスクリストです。結果のチェックボックスは押せない表示用です。
      > 引用文<blockquote><p>引用文</p></blockquote>>> と重ねると、引用の中の引用になります。
      | 名前 | 数量 |
      | --- | ---: |      		<table> … <td align="right">3</td>2行目の : の位置が配置を決めます（:--- 左、:---: 中央、---: 右）。
      www.example.com<a href="http://www.example.com">GFM の自動リンクです。www で始めると http:// が付くため、https のサイトはアドレスを最後まで書くほうが確実です。
      ```js … ```<pre><code class="language-js">フェンスの後ろの言語名は language- クラスになります。貼り付け先サイトのコードハイライト機能が、この名前を見て色を付けます。
      ---<hr>文章のすぐ下の行に書くと、区切り線ではなくその文章がレベル2の見出しになります。

      日本語の強調が記号のまま残る理由と「強調の補正」

      Markdown の仕様では、アスタリスクが強調を開閉できるかどうかを、前後の文字で判定します。CommonMark 0.31.2 の定義によると、強調を開く記号（左側の境界）は直後が句読点などの記号であるとき直前に空白か記号が必要で、強調を閉じる記号（右側の境界）は直前が記号であるとき直後に空白か記号が来なければなりません。そのため **「重要」**は のように、鉤括弧・丸括弧・引用符の内側に強調をかけてすぐ後ろに助詞を続けると、閉じる ** が強調を閉じられず、アスタリスクが文字として残ります。仕様の例380（a**"foo"**）は逆に開く側の例で、文字の直後にある ** が引用符の前にあるため強調を開けません。助詞が単語にそのまま続く日本語や韓国語では、特に起こりやすい現象です。

      「強調の補正」をオンにしておくと（初期状態）、このツールはこうした箇所だけを選んで強調として読み取ります。内側の端が記号で、外側が仮名・漢字・ハングルのため標準ルールに引っかかる場合にだけ変換し（外側がラテン文字や数字なら標準ルールのままなので、2*(3+4)*5 のような式は変わりません。コード・リンク・HTML タグを含む強調も変えません）、標準ルールですでに強調になる文には手を加えません。補正した箇所は、チェック表の「強調を補正しました」カードでお知らせします。

      Markdown標準ルール（GitHub・marked）補正をオンにした結果
      **「重要」**は**「重要」**は（記号が見える）「重要」は
      **（注）**を**（注）**を（記号が見える）（注）を
      ~~"1,000円"~~から~~"1,000円"~~から（記号が見える）"1,000円"から
      「本」*「副題」*のように「本」*「副題」*のように（記号が見える）「本」「副題」のように
      **強調**は強調は（問題なし）強調は
      __強調__は__強調__は（記号が見える）__強調__は（アンダースコアは補正しない）

      補正が効くのは、このツールが作る HTML だけです。同じ Markdown の原文を GitHub のように標準ルールを使う場所へそのまま載せると、その箇所は依然として記号のまま表示されます。原文自体をどこでも通用する形に直すには、強調を記号の外側にかける方法（"**重要**"は）がいちばん簡単です。引用符まで太字にしたい場合は、<strong>"重要"</strong>は のように HTML タグで書きます。アンダースコア（__）は単語の途中では強調にならない決まりで、snake_case のような名前を守る役目があるため、日本語の文章ではアスタリスクを使うほうが安全です。

      改行したのに1行につながってしまう理由

      Markdown で段落を分けるのは空行です。GFM の仕様では、空行なしで1回だけ改行した箇所を「ソフト改行」と呼び、HTML では改行か空白として表せると定めています。ブラウザはこの改行を空白1つとして表示するため、結果では2行が1行につながって見えます。GitHub のドキュメントによると、GitHub は Issue やコメントでは改行を自動で反映しますが、.md ファイルでは同じ文章が1行で表示されます。

      書き方空行で段落（標準）行ごとに <br>
      ただ改行する1行につながる<br> で行が分かれる
      行末に半角スペース2つ<br> で行が分かれる<br> で行が分かれる
      行末にバックスラッシュ（\）<br> で行が分かれる<br> で行が分かれる
      空行を1つ入れる段落が2つ段落が2つ

      詩・住所・歌詞のように行ごとに区切って読む文章は、「行ごとに <br>」を選べば対応できます。文書全体は標準のままにして数行だけ分けたいときは、その行末にバックスラッシュを付ける方法がおすすめです。行末の半角スペース2つは目に見えず、エディタが保存時に削除してしまうこともあるためです。標準の状態でつながってしまった行は、チェック表の「1回の改行がつながっている」カードが行番号つきで知らせます。

      Markdown 内の HTML と安全性

      Markdown の文章には HTML タグを混ぜて書くことができ、変換ツールは既定ではそのタグを結果にそのまま移します。marked のドキュメントも「marked は出力 HTML をサニタイズしない」と明言し、別途フィルターを使うよう勧めています。他人が書いた文章や AI が作った文章を変換するときは、スクリプトやクリック動作が紛れ込む可能性があるため、「元の HTML」ルールを3種類に分けました。

      • 安全に（初期状態）：許可リストにないタグと属性を取り除きます。script、style、iframe、object、embed、form、入力欄、svg は中身ごと削除し、onclick などの on イベント属性、javascript:、vbscript: のアドレス、画像以外の data: アドレスも削除します。取り除いたものは「取り除いた HTML」カードに種類別の件数で表示されます。
      • そのまま：書かれた HTML を変更しません。自分で書いた表や動画の埋め込みコードを残したいときに選びます。スクリプトや on 属性が残っている場合は、「危険な HTML が残っています」カードが警告します。
      • 文字として：タグを実行せず、タグの文字のまま表示します。HTML の使い方を説明する文章のように、タグそのものを見せたいときに使います。GFM 仕様の「許可しない HTML」拡張も、title、textarea、style、xmp、iframe、noembed、noframes、script、plaintext の9タグの < を文字に置き換える方式です。

      Web 表示のプレビューは、どのルールでもスクリプトを実行しません。プレビューは allow-scripts を与えていない sandbox の iframe の中に描画され、MDN のドキュメントによると、この場合その中のスクリプトは実行が許可されません。ただし「安全に」は、貼り付け先サイトのセキュリティフィルターの代わりにはなりません。サイトごとに受け付けるタグが異なるため、貼り付けたあとにそのサイトのプレビューでもう一度確認してください。

      HTML 形式の選び方

      形式貼り付け先含まれるもの
      本文のみブログや CMS の HTML 欄、自作の Web ページの本文<h2>、<p>、<ul> などのタグだけが入ります。装飾は貼り付け先サイトのデザインに従います。
      スタイル付きメール本文、<style> を削除するエディタタグごとに style="…" で文字サイズ・余白・表の罫線・コードの背景を直接入れます。プレビューの明るい画面と同じ見た目です。
      文書全体ブラウザで直接開く .html ファイル<!doctype html>、<meta charset="utf-8">、タイトル、<style> まで入り、コンピューターがダークモードなら暗い配色で表示されます。「.html で保存」は常にこの形式で保存します。
      書式ごとコピーHTML 欄のないメールや文書エディタスタイル付きの HTML とプレーンテキストをクリップボードに同時に入れます。貼り付け先のエディタが書式に対応していれば書式として、そうでなければ文字として入ります。

      見出し id と文書内リンク

      [インストール](#インストール) のように # で始まるリンクは、同じ文書内の見出しへ移動する目次リンクです。このリンクが動作するには見出しに同名の id が必要ですが、marked は見出しに id を付けません。「見出し id」をオンにすると、GitHub のドキュメントが説明する規則どおりに id を付けます。英字は小文字にし、空白はハイフン（-）に変え、それ以外の空白と句読点は削除し、同じ見出しが再び出てきたら -1、-2 を付けます。文書に # リンクがあるのに見出し id がオフになっているとチェック表が知らせ、カードのボタンですぐにオンにできます。

      見出し付く id
      ## インストール方法インストール方法
      ## Q&Aqa
      ## 2026年10月のお知らせ2026年10月のお知らせ
      ## C++ 入門c-入門
      ## インストール方法（2回目）インストール方法-1

      チェック表でわかること

      • 強調が記号のまま残る / 強調を補正しました：句読点や括弧に接した強調のせいで、標準ルールではアスタリスクが残る箇所です。補正をオンにすると「補正しました」、オフにすると「記号のまま残る」と表示されます。
      • 1回の改行がつながっている：空行なしで改行した行が、空白でつながった箇所です。
      • 閉じていないコードブロック：``` で開いたまま閉じておらず、その下の文章がすべてコードになった場合です。
      • 表のセルがはみ出し：見出し行よりセルの多い行です。GFM は余ったセルを捨てるため、内容が消えます。
      • 相対パス：/images/a.png や docs/a.md のように、サイトのアドレスなしで書いた画像やリンクです。プレビューではこのページのアドレスを基準に開きますが、別のサイトに貼るとリンク切れになることがあります。
      • 説明のない画像：![](アドレス) のように、代替テキストが空の画像です。
      • 見出しレベルの飛び越し：## の次にすぐ #### が来るように、レベルを飛ばした見出しです。スクリーンリーダーで目次をたどる人には、構造が崩れて見えます。
      • 見出し id が必要なリンク / 移動先のない # リンク：文書内リンクの移動先となる見出しがない場合や、見出し id がオフで移動しない場合です。
      • 取り除いた HTML / 危険な HTML が残っています / 文字にした HTML：「元の HTML」ルールに従って、取り除いた・残した・文字にしたタグです。

      間違えやすい例

      • 段落のすぐ下の番号付きリスト：空行なしで段落の下に 2. 項目 と書いてもリストにならず、段落につながります。段落を途切れさせてリストを始められる番号は 1 だけです。箇条書き（- 項目）は、段落のすぐ下でもリストになります。
      • 4文字インデントされた行：行頭に半角スペース4つまたはタブを入れると、コードブロックになります。段落を字下げするつもりの空白は結果に反映されないため、削除してください。
      • 文章のすぐ下の ---：区切り線を入れるつもりで文章のすぐ下の行に --- と書くと、上の文章がレベル2の見出しになります。区切り線の前には空行を置きます。
      • ファイル先頭のメタ情報（front matter）：静的サイト用の .md ファイルの先頭にある、--- で囲まれた title: … の行は Markdown の記法ではないため、区切り線と見出しに変換されます。変換前に削除してください。
      • スペースを含むリンクのアドレス：[資料](私の 資料.pdf) はリンクになりません。[資料](<私の 資料.pdf>) のように囲むか、スペースを %20 と書きます。
      • 表の終わりの空行：表は段落のすぐ下からでも始まりますが、表が終わる位置に空行がないと、次の文章が表の中に入り込んでしまいます。
      • コピーしたあとサイト側で装飾し直す場合：「スタイル付き」で入れた style は、貼り付け先サイトのデザインより優先されます。サイトのデザインに合わせたいときは「本文のみ」を選んでください。

      制限事項

      • 脚注（[^1]）、数式、ダイアグラムの記法は marked の標準記法ではないため、文字のまま残ります。
      • コードブロックには色を付けません。言語名は language-… クラスとして残るので、貼り付け先サイトのコードハイライト機能が色を決めます。
      • 強調の補正は、外側が仮名・漢字・ハングルの **、*、~~ にだけ適用し、アンダースコアと3重アスタリスク（***）は標準ルールのままにします。
      • 「安全に」は、このツールの許可リストを基準にしています。貼り付け先サイトが別途除外するタグは、サイトごとに異なります。
      • プレビューの画像は、書かれたアドレスから直接読み込みます。書式ごとコピーした結果がどう見えるかは、貼り付け先のエディタによって異なります。
      • 2 MB を超える文章は変換せず、3万文字を超えるとエディタの構文の色表示をオフにします。

      出典

      基準：記法は CommonMark 0.31.2 と GFM 0.29-gfm の仕様、動作は marked 18.0.9 の出力、ブラウザ機能は MDN のドキュメント、メールの対応状況は caniemail.com を、2026年10月22日に確認しました。上の表の HTML は、このツールの実際の出力です。

      よくある質問

      Markdown を HTML に変換するとき、どのルールに従いますか？

      GitHub Flavored Markdown（GFM）0.29-gfm の仕様に従い、エンジンは marked 18.0.9 です。表・タスクリスト・取り消し線・自動リンクに対応しています。「強調の補正」をオンにした場合に限り、句読点や括弧に接した強調を、標準とは異なり強調として読み取ります。

      **「重要」**は と書いた箇所に、アスタリスクがそのまま見えるのはなぜですか？

      CommonMark のルールでは、強調を閉じる記号の直前が句読点や括弧のとき、直後には空白か記号が必要です。鉤括弧の後ろに助詞がすぐ続くと、強調が閉じられません。強調の補正をオンにするとこの箇所を強調に変換します。原文をどこでも通用させたい場合は、「**重要**」は のように強調を鉤括弧の外側にかけてください。

      改行したのに、結果では1行につながってしまうのはなぜですか？

      Markdown は空行で段落を分け、空行なしの改行は空白1つでつなぎます。行を残すには、行末に半角スペース2つかバックスラッシュを入れるか、変換ルールの改行で「行ごとに <br>」を選んでください。

      ブログやメールに貼るときは、何をコピーすればよいですか？

      HTML 入力欄があるなら、「本文のみ」の形式で「HTML をコピー」を押してください。HTML 欄のないエディタには「書式ごとコピー」を、<style> を削除するメールには「スタイル付き」の形式を使うと、見た目が保たれます。

      Markdown 内に書いたスクリプトも実行されますか？

      Web 表示のプレビューは、スクリプトを実行しない sandbox の iframe に描画します。結果の HTML では、初期状態の「安全に」が script・on イベント属性・javascript: アドレスを取り除き、「そのまま」を選ぶと残したうえでチェック表が警告します。

      入力した文章はサーバーに保存されますか？

      いいえ。変換はブラウザの中だけで行います。「このブラウザに保存」をオンにすると、入力中の文章とルールをこのブラウザの保存領域（localStorage）にだけ残し、オフにすると保存してあった文章も削除します。サンプルの文章は保存しません。

      目次リンクをクリックしても、見出しへ移動しません。

      [インストール](#インストール) のようなリンクは、見出しに同じ名前の id があるときだけ移動します。変換ルールの「見出し id」をオンにすると、GitHub と同じ規則（小文字、空白はハイフン、句読点は削除、同じ見出しは -1）で id を付けます。

      コードブロックに色は付きますか？

      このツールはコードに色を付けず、```js のように書いた言語名を language-js クラスとして残します。貼り付け先サイトにコードハイライト機能があれば、その機能がこの名前を見て色を付けます。

      HTML Markdown 変換ツールHTMLとWeb画面からコピーした文章をGFM Markdownに変換し、文書の構造と、省いた箇所・書き方を変えた箇所を一緒に表示します。Markdown 表 CSV 変換ツールMarkdown の表を CSV・Excel に、CSV・Excel のセルを Markdown の表に変換します。文書内の複数の表をシートに分け、列の配置も指定できます。HTMLタグ除去ツールHTMLのタグを取り除いて読める文字だけを残し、ソースが文字・タグ・属性・スクリプトでどう構成されているかも一緒に表示します。文字数カウント空白込み・除く文字数とバイト数をすぐに数え、制限を超えた位置と長い文を棒で示します。