Markdown → HTML変換ツール

MarkdownテキストをHTMLに変換します。リアルタイムプレビュー、テーブル、タスクリスト、打ち消し線など多様な記法に対応。ブログ記事やドキュメント作成に最適です。

Markdown入力

Markdown記法でテキストを入力してください
クイックテンプレート: 見出し リスト テーブル コード 引用
変換オプション
出力形式をカスタマイズできます

このツールの使い方

  1. Markdown入力: テキストエリアにMarkdown形式のテキストを入力します
  2. オプション設定: リアルタイムプレビューや整形出力などのオプションを選択
  3. 変換実行: 「HTML変換」ボタンを押すと、HTMLが生成されます
  4. プレビュー確認: プレビュータブで実際の表示を確認できます
  5. HTMLコピー: HTMLコードタブでソースを確認し、コピーできます

このツールの特徴

  • リアルタイムプレビュー: 入力中に自動で変換結果を表示（オプション）
  • 多様な記法対応: 見出し、リスト、テーブル、コード、引用など豊富な記法に対応
  • 拡張記法サポート: タスクリスト、打ち消し線、テーブルなど便利な拡張記法も使用可能
  • 整形出力: 読みやすくインデントされたHTMLコードを生成
  • テンプレート機能: よく使うパターンをワンクリックで挿入
  • 統計情報表示: 文字数、単語数、行数をリアルタイムで表示
  • ブラウザ内完結: データはサーバーに送信されず、完全にローカルで処理
  • 完全無料: 登録不要で今すぐ使えます

対応しているMarkdown記法

基本記法

  • 見出し: # 見出し1、## 見出し2、### 見出し3（h1〜h6まで対応）
  • 太字: **太字** または __太字__
  • 斜体: *斜体* または _斜体_
  • 太字＋斜体: ***太字斜体***
  • 打ち消し線: ~~打ち消し~~
  • リンク: [テキスト](URL)
  • 画像: ![代替テキスト](画像URL)

リスト

  • 番号なしリスト: - 項目 または * 項目
  • 番号付きリスト: 1. 項目
  • タスクリスト: - [ ] 未完了、- [x] 完了

コード

  • インラインコード: `コード`
  • コードブロック: ```言語名で開始、```で終了

引用・区切り

  • 引用: > 引用文
  • 水平線: --- または *** または ___

テーブル

  • テーブル記法:
| 列1 | 列2 | 列3 |
|-----|-----|-----|
| A   | B   | C   |
| D   | E   | F   |

クイックテンプレートの使い方

入力エリア下部のテンプレートリンクをクリックすると、よく使うMarkdown記法のサンプルが自動入力されます。

  • 見出し: h1〜h3の見出しサンプル
  • リスト: 番号なし・番号付き・タスクリストのサンプル
  • テーブル: 3列×3行のテーブルサンプル
  • コード: インラインコードとコードブロックのサンプル
  • 引用: 引用ブロックのサンプル

既に入力があるテキストエリアにテンプレートを挿入する場合は、既存のテキストの後ろに追加されます。空のテキストエリアに挿入する場合は、そのまま入力されます。

変換オプションの説明

  • リアルタイムプレビュー: 入力中に自動で変換結果を表示します。パフォーマンスに影響する場合はオフにできます
  • 整形して出力: HTMLコードを読みやすくインデント付きで整形します。最小化したい場合はオフにできます
  • 改行を<br>に変換: Markdown内の単一改行を<br>タグに変換します。GitHub風の改行処理が必要な場合に有効

よくある使用例

  • ブログ記事のHTML化（WordPressやはてなブログなど）
  • 技術ドキュメントの作成
  • README.mdファイルのHTML変換
  • 静的サイトジェネレーター用のコンテンツ作成
  • メールマガジンのHTML版作成
  • オンラインマニュアルの作成
  • プレゼンテーション資料のHTML化
  • Wikiページの作成

Markdownを書くコツ

  • 見出しを活用: 文書構造を明確にするため、適切に見出しレベルを使い分けましょう
  • リストを使う: 箇条書きや手順は番号なし・番号付きリストで整理すると読みやすくなります
  • コードブロックの言語指定: ```javascriptのように言語を指定すると、シンタックスハイライトが有効になります
  • 空行で区切る: 段落やセクションの間に空行を入れると、HTMLで適切に分離されます
  • テーブルは簡潔に: 複雑なテーブルはHTMLで直接書いた方が良い場合もあります

Markdownとは

Markdown（マークダウン）は、2004年にJohn Gruberによって開発された軽量マークアップ言語です。

プレーンテキストで読みやすく書きやすい形式で文書を作成し、HTMLなどの形式に簡単に変換できることが特徴です。現在では、GitHub、Reddit、Stack Overflow、Slackなど多くのWebサービスで標準的に使用されています。

Markdownの利点は、特別なエディタが不要で、どんなテキストエディタでも編集でき、かつ人間が読みやすい形式であることです。また、バージョン管理システム（Git）との相性も良く、差分が見やすいため、技術ドキュメントやREADMEファイルに広く採用されています。

注意点

  • 入力内容はブラウザ上でのみ処理され、サーバーには保存されません
  • 複雑な表組みや特殊なレイアウトは、HTMLで直接記述した方が良い場合があります
  • 生成されるHTMLには、基本的なタグのみが含まれます。CSSスタイルは別途適用してください
  • 一部のMarkdown拡張記法（脚注、定義リストなど）には対応していません
  • 画像URLは正しいパスを指定してください。相対パスの解決は行われません
  • XSS対策として、スクリプトタグなどは自動的にエスケープされます