【Markdown】Md記法のすべてをここに集めてみた

この記事では、Markdown（マークダウン）の記法を体系的にまとめています。Markdownとは、プレーンテキストで記述した文書をHTMLなどの形式に変換できる軽量マークアップ言語です。GitHubのREADMEファイルやブログ記事の執筆、技術ドキュメントの作成など、幅広い場面で活用されています。

本ガイドでは、見出しや段落といった基本的な記法から、テーブルやチェックボックスなどの応用的な記法まで、HTML出力の例とともに包括的に解説します。Markdown記法を一箇所で確認できるリファレンスとしてご活用ください。

見出し

Markdownでは、#の数で見出しレベルを指定します。#と見出しテキストの間にはスペースを1つ入れる必要があります。

• Markdown記法

  # 見出し1
  ## 見出し2
  ### 見出し3
  #### 見出し4
  ##### 見出し5
  ###### 見出し6

• HTML出力

  <h1>見出し1</h1>
  <h2>見出し2</h2>
  <h3>見出し3</h3>
  <h4>見出し4</h4>
  <h5>見出し5</h5>
  <h6>見出し6</h6>

見出し1と見出し2は、代替記法として = や - を使用することもできます。

見出し1
=======

見出し2
-------

段落と改行

段落は空行で区切ります。単純な改行は、行末に2つのスペースを入れるか、<br>タグを使用します。

• Markdown記法

  これは1つ目の段落です。
  
  これは2つ目の段落です。
  
  これは行末に2つスペースがある行です。
  次の行です。
  
  これは<br>タグを使った改行です。

• HTML出力

  <p>これは1つ目の段落です。</p>
  
  <p>これは2つ目の段落です。</p>
  
  <p>これは行末に2つスペースがある行です。<br>
  次の行です。</p>
  
  <p>これは<br>タグを使った改行です。</p>

強調

イタリック体、太字、打ち消し線を使用できます。これらは組み合わせて使用することも可能です。

• Markdown記法

  *イタリック*
  _イタリック_
  **太字**
  __太字__
  ***太字かつイタリック***
  ___太字かつイタリック___
  **_太字かつイタリック_**
  ~~打ち消し線~~

• HTML出力

  <em>イタリック</em>
  <em>イタリック</em>
  <strong>太字</strong>
  <strong>太字</strong>
  <strong><em>太字かつイタリック</em></strong>
  <strong><em>太字かつイタリック</em></strong>
  <strong><em>太字かつイタリック</em></strong>
  <del>打ち消し線</del>

文中で強調を使う例：

この文章には**重要な部分**と*強調したい部分*があります。
また、~~間違った情報~~を訂正することもできます。

リスト

順序なしリストと順序付きリストを作成できます。インデントを使ってネストも可能です。

順序なしリスト

-、*、+ のいずれかを使用します。

• Markdown記法

  - 項目1
  - 項目2
    - サブ項目A
    - サブ項目B
      - さらにネスト
  - 項目3

• HTML出力

  <ul>
    <li>項目1</li>
    <li>項目2
      <ul>
        <li>サブ項目A</li>
        <li>サブ項目B
          <ul>
            <li>さらにネスト</li>
          </ul>
        </li>
      </ul>
    </li>
    <li>項目3</li>
  </ul>

順序付きリスト

数字とピリオドを使用します。実際の数字は順番通りでなくても、出力では自動的に連番になります。

• Markdown記法

  1. 番号付き項目1
  2. 番号付き項目2
     1. サブ番号付き項目A
     2. サブ番号付き項目B
  3. 番号付き項目3

• HTML出力

  <ol>
    <li>番号付き項目1</li>
    <li>番号付き項目2
      <ol>
        <li>サブ番号付き項目A</li>
        <li>サブ番号付き項目B</li>
      </ol>
    </li>
    <li>番号付き項目3</li>
  </ol>

リスト内での段落やコードブロック

リスト項目内に複数の段落やコードブロックを含めることもできます。

1. 最初の項目

   この段落もリスト項目の一部です。

2. 2番目の項目

   ```javascript
   console.log('コードブロックも含められます');

3. 3番目の項目

## リンク

Markdownでは、リンクを簡単に作成できます。リンクには複数のタイプがあります。

### インラインリンク

リンクテキストとURLを1行で記述する方法です。シンプルにリンクを作成したい場合に便利です。

- Markdown記法

  ```markdown
  [リンクテキスト](https://www.example.com)
  [タイトル付きリンク](https://www.example.com "リンクのタイトル")

• HTML出力

  <a href="https://www.example.com">リンクテキスト</a>
  <a href="https://www.example.com" title="リンクのタイトル">タイトル付きリンク</a>

参照リンク

リンクテキストとリンク先URLを別々に定義する方法です。複数の場所で同じリンクを使いたいときや、URLを本文から分離したいときに便利です。

• Markdown記法

  [リンクテキスト][1]
  [別のリンク][example]
  
  [1]: https://www.example.com "オプションのタイトル"
  [example]: https://www.example.org

• HTML出力

  <a href="https://www.example.com" title="オプションのタイトル">リンクテキスト</a>
  <a href="https://www.example.org">別のリンク</a>

URLの自動リンク

URLやメールアドレスをそのままリンクにする場合は、<>で囲みます。

<https://www.example.com>
<email@example.com>

画像

画像の挿入も、リンクと似た構文で行います。リンクとの違いは先頭に ! が付くことです。

• Markdown記法

  ![代替テキスト](https://example.com/image.jpg)
  ![代替テキスト](https://example.com/image.jpg "オプションのタイトル")

• HTML出力

  <img src="https://example.com/image.jpg" alt="代替テキスト">
  <img src="https://example.com/image.jpg" alt="代替テキスト" title="オプションのタイトル">

参照形式の画像

リンクと同様に、参照形式で画像を挿入することもできます。

![代替テキスト][logo]

[logo]: https://example.com/logo.png "ロゴ画像"

リンク付き画像

画像をクリックしたときにリンク先へ遷移させることもできます。

[![代替テキスト](image.jpg)](https://www.example.com)

引用

引用は > を使用します。複数行の引用やネストした引用も可能です。

• Markdown記法

  > これは引用です。
  > 複数行にわたる引用も可能です。
  >
  > > これはネストされた引用です。
  >
  > 引用の続きです。

• HTML出力

  <blockquote>
    <p>これは引用です。
    複数行にわたる引用も可能です。</p>
    <blockquote>
      <p>これはネストされた引用です。</p>
    </blockquote>
    <p>引用の続きです。</p>
  </blockquote>

引用内でも他のMarkdown記法を使用できます。

> ### 引用内の見出し
>
> - リスト項目1
> - リスト項目2
>
> **太字**や*イタリック*も使えます。

コード

インラインコードとコードブロックの2種類があります。

インラインコード

文章中にコードを埋め込む場合は、バッククォート（`）で囲みます。

• Markdown記法

  変数 `const name = "John"` を定義します。
  `npm install` コマンドを実行してください。

• HTML出力

  <p>変数 <code>const name = "John"</code> を定義します。</p>
  <p><code>npm install</code> コマンドを実行してください。</p>

インラインコード内でバッククォートを使いたい場合は、二重バッククォートで囲みます。

`` `バッククォート` を含むコード ``

コードブロック

複数行のコードは、3つのバッククォート（```）またはチルダ（~~~）で囲みます。

• Markdown記法

  ```
  複数行の
  コードブロック
  ```

• HTML出力

  <pre><code>複数行の
  コードブロック
  </code></pre>

シンタックスハイライト

言語名を指定することで、シンタックスハイライトが適用されます。

```javascript
function greet(name) {
  console.log(`Hello, ${name}!`);
}

greet('World');
```

```python
def greet(name):
    print(f"Hello, {name}!")

greet("World")
```

インデントによるコードブロック

4つのスペースまたは1つのタブでインデントすることでもコードブロックを作成できます。

    function example() {
      return true;
    }

水平線

3つ以上の*、-、_で水平線を作成します。記号の間にスペースを入れることもできます。

• Markdown記法

  ***
  ---
  ___
  * * *
  - - -

• HTML出力

  <hr>
  <hr>
  <hr>
  <hr>
  <hr>

テーブル

テーブルは|と-を使って作成します。2行目のハイフンで列の配置を指定できます。

• Markdown記法

  | 列1 | 列2 | 列3 |
  |-----|:---:|----:|
  | 左寄せ（デフォルト） | 中央寄せ | 右寄せ |
  | データ1 | データ2 | データ3 |

• HTML出力

  <table>
    <thead>
      <tr>
        <th>列1</th>
        <th align="center">列2</th>
        <th align="right">列3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>左寄せ（デフォルト）</td>
        <td align="center">中央寄せ</td>
        <td align="right">右寄せ</td>
      </tr>
      <tr>
        <td>データ1</td>
        <td align="center">データ2</td>
        <td align="right">データ3</td>
      </tr>
    </tbody>
  </table>

配置の指定方法

• :--- または ---：左寄せ
• :---:：中央寄せ
• ---:：右寄せ

テーブル内でのMarkdown

テーブルのセル内でもリンクやインラインコードなどの記法が使えます。

| 名前 | コマンド | 説明 |
|------|----------|------|
| インストール | `npm install` | パッケージをインストール |
| [公式サイト](https://example.com) | `npm start` | 開発サーバー起動 |

チェックボックス

タスクリストやチェックボックスを作成できます。GitHub Flavored Markdownで対応しています。

• Markdown記法

  - [ ] 未完了のタスク
  - [x] 完了したタスク
  - [ ] もう一つの未完了タスク

• HTML出力

  <ul>
    <li><input type="checkbox" disabled> 未完了のタスク</li>
    <li><input type="checkbox" checked disabled> 完了したタスク</li>
    <li><input type="checkbox" disabled> もう一つの未完了タスク</li>
  </ul>

ネストしたタスクリスト

- [ ] メインタスク
  - [ ] サブタスク1
  - [x] サブタスク2
- [x] 完了したメインタスク

脚注

脚注を使って、本文を邪魔せずに補足情報を追加できます。GitHub Flavored Markdownで対応しています。

• Markdown記法

  これは脚注付きのテキストです[^1]。
  
  複数の脚注も使えます[^note]。
  
  [^1]: これが脚注の内容です。
  [^note]: 脚注には名前を付けることもできます。

• HTML出力

  <p>これは脚注付きのテキストです<sup><a href="#fn1" id="fnref1">1</a></sup>。</p>
  <p>複数の脚注も使えます<sup><a href="#fn2" id="fnref2">2</a></sup>。</p>
  <hr>
  <ol>
    <li id="fn1">これが脚注の内容です。<a href="#fnref1">↩</a></li>
    <li id="fn2">脚注には名前を付けることもできます。<a href="#fnref2">↩</a></li>
  </ol>

エスケープ文字

Markdownの特殊文字をそのまま表示したい場合は、バックスラッシュ（\）でエスケープします。

• Markdown記法

  \*これはイタリックにならない\*
  \# これは見出しにならない
  \[これはリンクにならない\](url)

• HTML出力

  <p>*これはイタリックにならない*</p>
  <p># これは見出しにならない</p>
  <p>[これはリンクにならない](url)</p>

エスケープが必要な文字一覧

文字	名称
\	バックスラッシュ
`	バッククォート
*	アスタリスク
_	アンダースコア
{}	波括弧
[]	角括弧
()	丸括弧
#	シャープ
+	プラス
-	マイナス（ハイフン）
.	ピリオド
!	エクスクラメーション
`	`

定義リスト

一部のMarkdownプロセッサでは、定義リストもサポートしています。

用語1
: 用語1の定義

用語2
: 用語2の定義
: 用語2の別の定義

HTML直接記述

Markdownでは、HTMLタグを直接記述することもできます。Markdownでは表現できない複雑なレイアウトに便利です。

<div style="color: red;">
  <p>赤いテキスト</p>
</div>

<details>
<summary>クリックして展開</summary>

ここに詳細な内容を記述します。

- リストも使えます
- Markdownの記法も有効です

</details>

まとめ

以上がMarkdownの主要な記法とそのHTML出力です。これらの要素を組み合わせることで、豊かで構造化された文書を簡単に作成できます。Markdownの美しさは、その簡潔さと可読性にあります。

実際の使用では、これらの記法を自由に組み合わせて、より複雑な構造を持つ文書を作成することができます。また、多くのMarkdownプロセッサは追加の拡張機能をサポートしており、さらに高度な機能を利用できる場合もあります。

主なポイントを整理すると：

• 見出し：# の数でレベルを指定
• 強調：* または _ で囲む
• リスト：-、*、+ または数字で作成
• リンク：[テキスト](URL) 形式
• 画像：![代替テキスト](URL) 形式
• コード：` または ` ` ` で囲む
• テーブル：| と - で構成

Markdownを使いこなせば、効率的に美しい文書を作成できるようになります。

参考文献

• Markdown Guide - Basic Syntax - Markdown記法の基本的な構文ガイド
• Markdown Guide - Extended Syntax - 拡張Markdown記法のガイド
• GitHub Flavored Markdown Spec - GitHub独自のMarkdown拡張仕様
• Daring Fireball: Markdown - Markdownの公式仕様（John Gruber作成）
• CommonMark Spec - Markdownの標準化仕様