HTML to Markdownコンバーター - HTMLとMarkdownの相互変換オンライン

テーブル、タスクリスト、取り消し線のGFMサポート付きでHTMLとMarkdown形式を双方向に変換します。100%クライアントサイド処理、データがサーバーに送信されることはありません。

入力

Markdown結果

よくある質問

HTML to Markdownコンバーターとは何ですか？

HTML to Markdownコンバーターは、HTMLマークアップ（Webページの構造化に使用されるタグベースの言語）をMarkdown構文（軽量で人間が読みやすいフォーマット言語）に変換するツールです。例えば、<code><h1>タイトル</h1></code>は<code># タイトル</code>に、<code>太字</code>は<code>**太字**</code>に変換されます。HTMLベースのCMS（WordPress、Drupal）からMarkdownベースのシステム（Hugo、Jekyll、Gatsby）へのコンテンツ移行、Webスクレイピングしたコンテンツの整理、HTMLドキュメントのGitHubリポジトリ用Markdownファイルへの変換に便利です。

このHTML to Markdownコンバーターの使い方は？

1. 変換方向を選択：HTML → MarkdownまたはMarkdown → HTML。2. 入力エリアにコンテンツを貼り付けるか、Sampleボタンでサンプルを読み込むか、Uploadボタンでファイルをアップロードします。3. 入力するとリアルタイムで自動変換されます。4. HTML→Markdown方向では、フォーマットオプション（見出しスタイル、箇条書き記号、コードブロックスタイル）を調整できます。5. 出力エリアで変換結果を確認します。6. Copyボタンでクリップボードにコピーするか、Downloadでファイルとして保存します。7. Swapボタンで変換方向を素早く反転できます。

データは安全ですか？サーバーに送信されますか？

データは100%安全で、ブラウザの外に出ることはありません。このコンバーターはTurndownライブラリ（HTML→Markdown用）とMarkedライブラリ（Markdown→HTML用）を使用しており、どちらも完全にクライアントサイドのJavaScriptで実行されます。データはサーバーに送信されず、データベースに保存されず、ログに記録されることもありません。すべての解析と変換はデバイス上でローカルに行われます。

Markdownへの変換でサポートされているHTML要素は？

このコンバーターは、Markdownに対応するすべての標準HTML要素をサポートしています：見出し（h1-h6）、段落（p）、太字（strong/b）、斜体（em/i）、取り消し線（del/s）、リンク（a）、画像（img）、順序付き/順序なしリスト（ol/ul/li）、引用（blockquote）、コードブロック（pre/code）、インラインコード（code）、水平線（hr）、テーブル（table）。GitHub Flavored Markdown拡張のテーブル、タスクリスト、取り消し線もサポートしています。

HTMLへの変換でサポートされているMarkdown構文は？

Markdown→HTML方向は、完全なCommonMark仕様とGitHub Flavored Markdown（GFM）拡張をサポートしています。見出し（ATX #とSetext下線）、強調と太字（*と**）、リンク（インラインと参照）、画像、言語ヒント付きフェンスコードブロック、引用、順序付き/順序なしリスト（ネスト含む）、水平線、GFMテーブル、タスクリスト、取り消し線、自動リンクURLを含みます。

Markdownの出力形式をカスタマイズできますか？

はい、HTMLからMarkdownへの変換時に、いくつかの出力フォーマットオプションを設定できます：見出しスタイル（#記号のATXまたは下線のSetext）、箇条書き記号（ダッシュ-、アスタリスク*、プラス+）、コードブロックスタイル（バッククォートフェンスまたは4スペースインデント）。すべてのオプションはURLに同期されるため、お好みの設定でリンクを共有できます。

変換時にHTMLのCSSスタイルとJavaScriptはどうなりますか？

CSSスタイル（インラインstyle属性とクラス名）、JavaScriptコード（scriptタグとイベントハンドラー）、その他の非コンテンツ要素は変換中に削除されます。コンバーターはコンテンツレベルの変換のみに焦点を当てています—HTMLからビジュアルスタイリングではなく、セマンティック構造とテキストコンテンツを抽出します。Markdownはスタイリングをサポートしないコンテンツフォーマットであるため、これは設計通りの動作です。

コード例

// HTML to Markdown conversion using Turndown library
// Install: npm install turndown turndown-plugin-gfm

const TurndownService = require('turndown');
const { gfm } = require('turndown-plugin-gfm');

function htmlToMarkdown(html, options = {}) {
  const {
    headingStyle = 'atx',
    bulletListMarker = '-',
    codeBlockStyle = 'fenced',
  } = options;

  try {
    const turndownService = new TurndownService({
      headingStyle,
      bulletListMarker,
      codeBlockStyle,
      hr: '---',
      fence: '```',
      emDelimiter: '_',
      strongDelimiter: '**',
      linkStyle: 'inlined',
    });
    turndownService.use(gfm);
    const markdown = turndownService.turndown(html);
    return { success: true, output: markdown };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// Markdown to HTML using marked
// Install: npm install marked
const { marked } = require('marked');

function markdownToHtml(markdown) {
  try {
    const html = marked.parse(markdown, { gfm: true });
    return { success: true, output: html };
  } catch (error) {
    return { success: false, error: error.message };
  }
}

// Example usage
const html = '<h1>Hello</h1><p>This is <strong>bold</strong></p>';
const result = htmlToMarkdown(html);
console.log(result.output);
// Output: # Hello\n\nThis is **bold**

HTML to Markdownコンバーター - HTMLとMarkdownの相互変換 オンライン