Markdown記法一覧完全チートシート【日本語・2026年最新版】≪マークダウン≫

2026年1月7日

Contents

1. 📖 Markdownとは
2. ✍️ 基本記法（段落・改行・強調）
3. 🏗 見出し・文書構造
4. 📋 リスト・ネスト・チェックリスト
5. 🔗 リンク・画像・メディア
6. 💻 コード・シンタックスハイライト
7. 📊 表（テーブル）
8. 💬 引用・注釈・脚注
9. 🚀 よく使われる拡張記法
10. ✅ ベストプラクティス & アンチパターン

📖 Markdownとは

Markdownは、プレーンテキストで書けて、そのまま読んでも理解しやすい軽量マークアップ言語です。ブログ・Qiita・GitHub・Notion・Slackなど、現代のほぼすべてのテキスト環境で使われています。

Markdownは最終的にHTMLに変換されてWebページとして表示されます。このチートシートでは、「入力するMarkdown」→「生成されるHTML」→「ブラウザでの見た目」の流れを、図解とアニメーションで直感的に理解できるように整理します。

🎯 Markdownの設計思想

1. プレーンテキスト

人間がそのまま読める文章 + 記号

# 見出しタイトル

⇨

2. Markdownパーサ

ルールに従って構造を解析

<h1>見出しタイトル</h1>

⇨

3. ブラウザ描画

HTML + CSS として表示

大きな見出しとして表示

Markdownにはいくつかの「方言」（CommonMark・GitHub Flavored Markdown など）が存在しますが、このチートシートでは
1) CommonMark（標準）をベースに、2) GitHub / Qiita / 多くのブログで使える拡張記法をまとめて紹介します。

✍️ 基本記法（段落・改行・強調）

段落と改行

Markdownの基本は「空行で段落を分ける」ことです。
行末に半角スペース2つを入れると「段落は同じまま1行だけ改行」になります（厳密には環境依存）。

Markdown

これは1つ目の段落です。
行末に2つのスペース␣␣  
これも同じ段落だけど改行されます。

これは2つ目の段落です。

これは1つ目の段落です。

行末に2つのスペース␣␣

これも同じ段落だけど改行されます。

これは2つ目の段落です。

レンダリング例（HTML表示イメージ）

これは1つ目の段落です。
これも同じ段落だけど改行されます。

これは2つ目の段落です。

💡 実務でのコツ：
– ブログやドキュメントでは、「1文1行」で書いてもOK（GitHubなどでよく使われるスタイル）です。
– WordPressではテーマ側のCSSによっては、行末スペース2つでの改行が効かないことがあります。その場合は、<br>を直接書くと確実です。

強調・太字・取り消し線

強調は * か _ を使って囲みます。
同じ記号2つで囲むと太字、~2つで囲むと~~取り消し線~~になります（多くの拡張Markdownでサポート）。

Markdown

これは *強調* です。
これは _強調_ です。
これは **太字** です。
これは __太字__ です。
これは ~~取り消し線~~ です。

これは*強調*です。

これは_強調_です。

これは**太字**です。

これは__太字__です。

これは~~取り消し線~~です。

レンダリング例

これは強調です。
これは強調です。
これは太字です。
これは太字です。
これは ~~取り消し線~~ です。

⚠️ 注意： 日本語と記号の間にスペースがないと、環境によっては意図しない箇所まで強調されることがあります。
例：これは*強調*です よりも これは *強調* です のように、前後にスペースを入れると安全です。

🏗 見出し・文書構造

ATX見出し（# 記法）

現代のMarkdownでは、ほぼすべての環境で「#を使う見出し」を利用します。
# の数がHTMLのh1〜h6に対応します。

H1（記事タイトル）

1記事につき1回だけが理想

H2（大見出し）

セクションを分ける単位

###

H3（中見出し）

H2の中の小テーマ

Markdown

# 記事タイトル（H1）

## 1. 大見出し（H2）

### 1-1. 中見出し（H3）

#### 1-1-1. 小見出し（H4）

# 記事タイトル（H1）

## 1. 大見出し（H2）

### 1-1. 中見出し（H3）

#### 1-1-1. 小見出し（H4）

💡 SEO的なコツ：
– H1は「WordPressの記事タイトル」に任せて、本文内は H2から始める のがおすすめです。
– 見た目を大きくしたいだけの場合でも、見出しのレベルを乱用せず、CSSで調整した方が構造的にきれいです。

📋 リスト・ネスト・チェックリスト

箇条書き（順序なしリスト）

-、*、+ のどれか + 半角スペースで箇条書きになります。
インデント（スペース2〜4つ）でネスト（入れ子）にできます。

Markdown

- レベル1
  - レベル2
    - レベル3

* 別の書き方
* 同じリスト扱い

-レベル1

-レベル2

-レベル3

*別の書き方

*同じリスト扱い

レンダリング例

レベル1
- レベル2
  - レベル3

別の書き方
同じリスト扱い

番号付きリスト（順序付きリスト）

1. のように数字 + ドット + 半角スペースで番号付きリストになります。
多くの実装では、数字は 見た目だけ で、1, 1, 1, … と書いても自動採番されます。

Markdown

1. 手順1
2. 手順2
3. 手順3

1. 手順A
1. 手順B
1. 手順C  <!-- 多くの環境で 1,2,3 と自動採番される -->

1.手順1

2.手順2

3.手順3

1.手順A

1.手順B

1.手順C

タスクリスト（チェックボックス）

GitHub / Qiita / 多くのサービスで使える「拡張Markdown」です。
- [ ] / - [x] でチェックボックス付きのタスクリストを作れます。

Markdown（GitHub Flavored Markdown）

- [x] 設計書を書く
- [ ] 実装する
- [ ] レビューを依頼する

-[x]設計書を書く

-[]実装する

-[]レビューを依頼する

レンダリング例（対応環境）

設計書を書く
実装する
レビューを依頼する

⚠️ WordPressでの注意：
– WordPress標準のエディタ（Gutenberg）は独自のブロック構造を持っているため、タスクリストとしては動作しないことがあります。
– プラグインやテーマによって解釈が変わるため、「見た目だけ再現したい」のか「チェック可能なUIにしたい」のか目的を明確にしましょう。

🔗 リンク・画像・メディア

リンクの基本

リンクは [リンクテキスト](URL "タイトル") の形で記述します。
タイトルは省略可能で、マウスオーバー時のツールチップとして表示されることがあります。

Markdown

[Google](https://www.google.com)
[検索エンジン](https://www.google.com "Googleで検索")

1 2	[Google](https://www.google.com) [検索エンジン](https://www.google.com "Googleで検索")

レンダリング例

Google
検索エンジン

画像の挿入

画像はリンク記法の先頭に ! を付けます。テキスト部分は alt属性（代替テキスト） になり、SEOやアクセシビリティに重要です。

Markdown

![猫の写真](https://example.com/cat.jpg "かわいい猫")

1	![猫の写真](https://example.com/cat.jpg "かわいい猫")

💡 WordPressとの連携：
– WordPressのメディアライブラリにアップした画像のURLを使えば、そのままMarkdownで埋め込めます。
– レスポンシブ対応やLazy Loadなど、テーマやプラグインの機能を活かしたい場合は、Gutenbergブロックで画像を挿入してしまう方が楽なことも多いです。

💻 コード・シンタックスハイライト

インラインコードとコードブロック

コードを表現するには バッククォート を使います。
1つで囲むとインラインコード、3つ以上で囲むとコードブロックになります。

Markdown

インラインコード: `console.log("hello");`

```python
def hello():
    print("こんにちは")
```

```bash
git status
git commit -m "メッセージ"
```

インラインコード:`console.log("hello");`

```python

def hello():

print("こんにちは")

```

```bash

git status

git commit-m"メッセージ"

```

レンダリング例

インラインコード: console.log("hello");

def hello():
    print("こんにちは")

1 2	def hello(): print("こんにちは")

git status
git commit -m "メッセージ"

1 2	git status git commit-m"メッセージ"

💡 シンタックスハイライト：
– 多くのエディタ / サービスでは、

python のように言語名を指定すると、自動的に色付き表示になります。

                - WordPressでハイライトを有効にするには、プラグイン（Prism.js / Highlight.js 系）やテーマ側のサポートが必要です。

`📊 表（テーブル）`

`基本的なテーブル構文`

テーブルは | で区切り、2行目に - を並べた「区切り線」を書きます。 :-: のようにコロンを使うと、列ごとの左寄せ・中央寄せ・右寄せを指定できます。

Markdown

| 曜日 | 天気 | 気温 |
|:-----|:----:|----:|
| 月   | 晴れ | 25℃ |
| 火   | 雨   | 18℃ |
| 水   | 曇り | 20℃ |

|曜日|天気|気温|

|:-----|:----:|----:|

|月 |晴れ|25℃|

|火 |雨 |18℃|

|水 |曇り|20℃|

レンダリング例

曜日	天気	気温
月	晴れ	25℃
火	雨	18℃
水	曇り	20℃

💡 コツ：

                - 見やすさのために | の位置を揃えていますが、実際にはずれていても構文上は問題ありません。

                - テーブルの中に改行を入れたい場合、環境によってはHTMLの <br> を併用する必要があります。

`💬 引用・注釈・脚注`

`引用（Blockquote）`

行頭に > を付けると引用になります。入れ子にして多段の引用を表現することもできます。

Markdown

&gt; これは引用です。
&gt; 複数行にまたがってもOKです。
&gt;
&gt; &gt; これは入れ子の引用です。

>これは引用です。

>複数行にまたがってもOKです。

>>これは入れ子の引用です。

レンダリング例

これは引用です。複数行にまたがってもOKです。
これは入れ子の引用です。

`脚注（Footnotes）※拡張機能`

多くの現代Markdown（特にGitHub / 一部ブログ / ドキュメントツール）では、脚注をサポートしています。 [^1] のようなマーカーと、本文の下に [^1]: 説明を書きます。

Markdown（対応環境のみ）

これは脚注付きのテキストです[^1]。

[^1]: ここに脚注の内容を書きます。

これは脚注付きのテキストです[^1]。

[^1]:ここに脚注の内容を書きます。

⚠️ WordPressでの互換性：

                - 素のWordPressでは脚注構文はサポートされていません。

                - 脚注機能を使いたい場合は、対応プラグイン（例：Markdown Extra / Jetpack など）を導入するか、HTMLで自作する必要があります。

`🚀 よく使われる拡張記法`

`水平線（区切り線）`

--- / *** / ___ のいずれかを、単独の行に3つ以上書くと、水平線になります。

Markdown

前のセクション

---

次のセクション

前のセクション

---

次のセクション

`定義リスト（Definition List）※一部方言`

用語とその説明をペアで表現するのに便利な記法です。ただし、CommonMarkのコア仕様には含まれていないため、対応していない環境もあります。

Markdown（Markdown Extra 等）

用語A
: 説明Aの1行目
: 説明Aの2行目

用語B
: 説明B

用語A

:説明Aの1行目

:説明Aの2行目

用語B

:説明B

`インラインHTML`

MarkdownはHTMLへの変換を前提にしているため、必要に応じて生のHTMLを混ぜることができます。レイアウト調整や、Markdownで表現しづらい要素（ボタン・埋め込みなど）に便利です。

Markdown + HTML

ここは通常のMarkdownです。

&lt;div class="notice"&gt;
  ここはHTMLで装飾したいエリアです。
&lt;/div&gt;

ここは通常のMarkdownです。

ここはHTMLで装飾したいエリアです。

</div>

⚠️ 注意：

                - GitHubのREADMEなど、一部の環境では危険なHTMLタグ（scriptなど）が無効化されます。

                - WordPressでもセキュリティ上の理由から、許可されていないタグは自動削除される場合があります。

`✅ ベストプラクティス & アンチパターン`

`読みやすく・壊れにくいMarkdownを書くコツ`

`👍 良い例`

見出しレベルを階層通りに使う（H2 → H3 → H4...）。
リストやテーブルの前後には必ず空行を入れる。
日本語と記号の間にスペースを入れて誤パースを防ぐ。
長いURLは必ずリンクテキストに隠す。
記事全体で記法のスタイル（例：強調は*か_か）を統一する。

`👎 よくある失敗`

見た目だけ整えようとして、見出しレベルを飛ばす（H2の次にH4など）。
リストのインデントがずれて、意図しないネストになる。
バッククォートとシングルクォートを混同する（ vs '）。
環境依存の拡張記法を多用し、別のサービスにコピペしたときに壊れる。

💡 実務的なワークフロー：
1. まずは純粋なテキストとして読みやすいかを意識してMarkdownを書く。
2. その上で、見出し・リスト・テーブルなどの構造をMarkdown記法で付けていく。
3. 最後に、WordPress / GitHub / プレビュー画面で実際のレンダリングを確認し、崩れをチェックする。

2026年1月7日Design

Posted by KodoCode