Markdown早見表 - よく使う書き方をまとめたリファレンスマニュアル

Markdownの実務でよく使う構文をまとめたリファレンス。構文ごとに記法と表示例を掲載している。

見出し

# の数で見出しレベルを指定します。# の後にはスペースが必要です。

# 見出し1（h1）
## 見出し2（h2）
### 見出し3（h3）
#### 見出し4（h4）
##### 見出し5（h5）
###### 見出し6（h6）

一般的にh1は記事タイトルに使い、本文中ではh2から使い始めます。

段落と改行

空行を挟むと別の段落になります。

これは最初の段落です。

これは次の段落です。

同じ段落内で改行したい場合は、行末に半角スペース2つを入れます。

1行目（行末にスペース2つ）
2行目

ただし、末尾のスペースは見えにくく管理しづらいため、多くの場面では空行で段落を分ける方が確実です。

テキストの装飾

太字・斜体・取り消し線

**太字（ボールド）**
*斜体（イタリック）*
***太字かつ斜体***
~~取り消し線~~

太字（ボールド） は強調に、斜体（イタリック） は英語圏では一般的ですが日本語ではあまり見た目が変わらないため、太字の方が実用的です。~~取り消し線~~は訂正の表現に使います。

インラインコード

文中にコードやコマンドを埋め込むにはバッククォート（`）で囲みます。

`npm install` を実行してください。

バッククォート自体を表示したい場合は、二重バッククォートで囲みます。

`` `バッククォート` ``

リンク

基本のリンク

[表示テキスト](URL)

例：

[Google](https://www.google.com)

タイトル付きリンク

マウスホバー時にツールチップを表示できます。

[Google](https://www.google.com "Googleトップページ")

URLをそのまま表示

<https://www.google.com>

山括弧で囲むと、URLがそのままクリック可能なリンクになります。

参照リンク

同じURLを複数箇所で使う場合に便利です。

[こちら][google]を参照してください。別の箇所でも[Google][google]と書けます。

[google]: https://www.google.com

画像

リンクの先頭に ! を付けると画像になります。

![代替テキスト](画像のURL)

代替テキスト（alt属性）は画像が表示できない場合やスクリーンリーダーで読み上げる際に使われる。アクセシビリティのために必ず記述する。

画像にリンクを付ける

画像をクリックで別ページに飛ばす場合は、リンクの表示テキスト部分に画像構文を入れます。

[![代替テキスト](画像のURL)](リンク先URL)

引用

> で始めると引用ブロックになります。

> これは引用文です。
> 複数行にまたがることもできます。

> ネストも可能です。
>> 二重引用。

他のサイトや書籍からの引用、注意書きなどに使います。

コードブロック

バッククォート3つで囲む

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

```javascript
function greet(name) {
  return `Hello, ${name}!`
}
```

よく使う言語指定

言語名	用途
`javascript` / `js`	JavaScript
`typescript` / `ts`	TypeScript
`python`	Python
`bash` / `shell`	シェルスクリプト
`html`	HTML
`css`	CSS
`json`	JSON
`yaml` / `yml`	YAML
`sql`	SQL
`markdown` / `md`	Markdown
`diff`	差分表示
`text` / `plaintext`	プレーンテキスト

diff表示

変更点を分かりやすく表現できます。

```diff
- const old = "削除される行"
+ const new = "追加される行"
```

テーブル（表）

パイプ | とハイフン - で表を作成します。

| 名前 | 年齢 | 職業 |
|------|------|------|
| 田中 | 30 | エンジニア |
| 佐藤 | 25 | デザイナー |

列の配置指定

ハイフンの部分にコロン : を付けると、左寄せ・中央寄せ・右寄せを指定できます。

| 左寄せ | 中央寄せ | 右寄せ |
|:-------|:--------:|-------:|
| aaa | bbb | ccc |
| ddd | eee | fff |

セルの幅は自動調整されるため、ソース上の列幅を揃える必要はありません（揃えると読みやすくはなります）。

水平線

3つ以上のハイフン、アスタリスク、アンダースコアで水平線を引けます。

---
***
___

いずれも同じ結果になります。セクションの区切りに使います。

エスケープ

Markdownの記号をそのまま表示したい場合は、バックスラッシュ \ を前に付けます。

\*これは太字にならない\*
\# これは見出しにならない
\- これはリストにならない

エスケープが必要な記号：\ ` * _ { } [ ] ( ) # + - . ! |

HTML直書き

Markdownの中にHTMLタグを直接書くこともできます。

<details>
<summary>クリックで展開</summary>

ここに隠す内容を書きます。
Markdownの構文も使えます。

- リスト1
- リスト2

</details>

折りたたみ（<details>）、上付き文字（<sup>）、下付き文字（<sub>）、キーボード表記（<kbd>）など、Markdownだけでは表現できないものに便利です。

H<sub>2</sub>O は水の化学式です。
<kbd>Ctrl</kbd> + <kbd>C</kbd> でコピーします。

ただし、HTMLを多用するとMarkdownの可読性が下がるため、必要な箇所に限定して使う。

脚注

本文中にマークを付け、ページ下部に注釈を表示します。

Markdownは2004年に公開されました[^1]。

[^1]: John Gruberによって開発された軽量マークアップ言語。

脚注の定義はファイル内のどこに書いても、レンダリング時にはページ末尾にまとめて表示されます。

定義リスト

一部のMarkdownパーサー（PHP Markdown Extra、Pandocなど）で使えます。

Markdown
: テキストベースの軽量マークアップ言語

HTML
: Webページを構成するマークアップ言語

GitHub Flavored Markdown（GFM）では非対応のため、利用環境の確認が必要。

数式（LaTeX）

GitHub、Jupyter Notebook、一部のブログサービスなどで対応しています。

インライン数式はドル記号で囲みます。

二次方程式の解は $x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$ です。

ブロック数式はドル記号2つで囲みます。

$$
E = mc^2
$$

GitHub Flavored Markdown（GFM）の拡張

GitHubで使える追加機能をまとめます。

自動リンク

URLを書くだけで自動的にリンクになります（山括弧不要）。

https://github.com

絵文字

コロンで囲んだショートコードで絵文字を挿入できます。

:thumbsup: :rocket: :warning:

アラート（Alerts）

引用ブロック内で特別なキーワードを使うと、注意書きや警告として表示されます。

> [!NOTE]
> 補足情報です。

> [!TIP]
> 便利なヒントです。

> [!IMPORTANT]
> 重要な情報です。

> [!WARNING]
> 注意が必要な内容です。

> [!CAUTION]
> 危険な操作についての警告です。

よくあるトラブルと対処法

リストが正しく表示されない

リストの前には必ず空行を入れてください。

テキストの直後にリストを書くと崩れることがあります。

- 空行を入れれば
- 正しく表示されます

テーブルが崩れる

テーブルの前後にも空行が必要です。また、ヘッダー行とセパレーター行（|---|）は省略できません。

インデントが効かない

ネストしたリストのインデントは、親要素のテキスト開始位置に揃えるのが確実です。半角スペース2つまたは4つが一般的ですが、パーサーによって異なります。

特殊文字がMarkdownとして解釈される

意図しない書式変換が起きる場合は、バックスラッシュでエスケープしてください。特にファイルパスの _ やURLの ( ) は注意が必要です。

参考リンク

CommonMark Spec - Markdownの標準仕様
GitHub Flavored Markdown Spec - GitHubの拡張仕様