マークダウン記法・形式変換

1. 左側のエディタにMarkdownを入力します。
2. 右側のタブで「プレビュー」「HTML出力」「テキスト」を切り替えて結果を確認します。
3. コピーしたい形式に応じて「HTMLコピー」「テキストコピー」「Word/Docs向けコピー」または「MDコピー」を押します。
4. 変換や整形を使う場合は「変換・整形」タブを開き、必要に応じて入力欄へHTMLまたはCSVを貼り付け、各ボタンを押してMarkdownを生成・整形します。
5. Markdownの書き方を点検したい場合は「Lint」タブで「実行」を押して警告や改善ポイントを確認します。

マークダウン形式とは、文章を読みやすいまま書きながら、簡単な記号で見出しや箇条書き、リンク、コードなどの体裁を付けられる文章形式（記法）です。プレーンテキストなので、メモ帳のような環境でも扱え、対応するサービスやツールで表示すると整形された見た目に変換されます。

特徴

• 軽い：ファイルが小さく、どこでも編集しやすい
• 読める：装飾前の状態でも内容が理解しやすい
• 変換できる：HTML、PDF、Word形式などへ変換しやすい
• 用途が広い：README、仕様書、ブログ、議事録、メモ、チャット投稿などに使える

よくある利用場面

• GitHubのREADMEやドキュメント
• Qiita、Zennなどの技術記事
• 社内の手順書、議事録、仕様メモ
• SlackやDiscordでの整形投稿（対応している範囲で）

注意点

• 対応しているMarkdownの種類（CommonMark、GFMなど）や拡張機能はサービスごとに違います
• HTMLの埋め込みや、脚注・数式・Mermaidなどは環境によって使えないことがあります

見出し（Headers）

行頭に「#」記号をつけることで、見出しを作成します。「#」の数が見出しのレベル（重要度）を表し、1つから6つまで指定可能です。必ず「#」とテキストの間に半角スペースを入れてください。

• Markdown: # 見出し1
  • HTML: <h1>見出し1</h1>
• Markdown: ## 見出し2
  • HTML: <h2>見出し2</h2>
• Markdown: ### 見出し3
  • HTML: <h3>見出し3</h3>
• Markdown: #### 見出し4
  • HTML: <h4>見出し4</h4>
• Markdown: ##### 見出し5
  • HTML: <h5>見出し5</h5>
• Markdown: ###### 見出し6
  • HTML: <h6>見出し6</h6>

段落と改行（Paragraphs & Line Breaks）

文章の基本となる段落と、行を変えるための記述方法です。

• 段落
  • Markdown: 空行（何も書かれていない行）を挟むことで、新しい段落になります。
  • HTML: <p>テキスト</p>
• 改行
  • Markdown: 行末に半角スペースを2つ以上入れて改行するか、明示的にタグを書きます。
  • HTML: <br>

文字の装飾（Emphasis）

テキストの一部を強調したり、打ち消し線を入れたりする方法です。

• 太字
  • Markdown: テキストをアンダースコア2つ __ またはアスタリスク2つ ** で囲みます。
  • HTML: <strong>テキスト</strong>
• 斜体
  • Markdown: テキストをアンダースコア1つ _ またはアスタリスク1つ * で囲みます。
  • HTML: <em>テキスト</em>
• 打ち消し線
  • Markdown: テキストをチルダ2つ ~~ で囲みます。
  • HTML: <del>テキスト</del>

リスト（Lists）

箇条書きを作成する方法です。順序のないものと、順序があるものがあります。

• 箇条書きリスト
  • Markdown: 行頭にハイフン -、プラス +、アスタリスク * のいずれかと半角スペースを入れます。
  • HTML: <ul><li>リスト項目</li></ul>
• 番号付きリスト
  • Markdown: 行頭に数字とドット 1. と半角スペースを入れます。数字は自動的に整列されるため、すべて 1. と書いても問題ありません。
  • HTML: <ol><li>リスト項目</li></ol>

リンクと画像（Links & Images）

Webページへのリンクや、画像を埋め込む方法です。

• リンク
  • Markdown: [表示テキスト](URL)
  • HTML: <a href="URL">表示テキスト</a>
• 画像
  • Markdown: ![代替テキスト](画像URL)
  • HTML: <img src="画像URL" alt="代替テキスト">

引用（Blockquotes）

他からの引用であることを示す方法です。

• Markdown: 行頭に大なり記号 > と半角スペースを入れます。二重に引用する場合は >> とします。
  • HTML: <blockquote><p>引用テキスト</p></blockquote>

コードの表示（Code）

プログラムのコードなどを、そのままの形式で表示する方法です。

• インラインコード（文中）
  • Markdown: テキストをバッククォート ` で囲みます。
  • HTML: <code>コード</code>
• コードブロック（複数行）
  • Markdown: バッククォート3つ ``` で上下を囲みます。開始のバッククォートの後に言語名を指定することも可能です。
  • HTML: <pre><code>コード内容</code></pre>

水平線（Horizontal Rules）

区切り線を入れる方法です。

• Markdown: ハイフン -、アスタリスク *、アンダースコア _ のいずれかを3つ以上連続して書きます。
  • HTML: <hr>

表（Tables）

表形式でデータを表示する方法です。ハイフン - とパイプ | を組み合わせて作成します。2行目で列の配置（左寄せ、中央寄せ、右寄せ）を指定できます。

• Markdown:

  | 見出し1 | 見出し2 |
  | --- | --- |
  | データ1 | データ2 |

• HTML:

  <table>
    <thead><tr><th>見出し1</th><th>見出し2</th></tr></thead>
    <tbody><tr><td>データ1</td><td>データ2</td></tr></tbody>
  </table>

このツールは無料でご利用いただけます。