Markdown記法の「チートシート(一覧表)」と「書き方のまとめ」

この記事では『Markdown(マークダウン)』について、以下の内容をわかりやすく解説しています。

  • Markdown(マークダウン)とは
  • Markdown記法のチートシート(一覧表)
  • よく使うひな型テンプレート
  • Markdown各記法の「書き方」と「表示結果」

Markdown(マークダウン)とは

Markdown(マークダウン)は、テキストに簡単な記号を加えるだけで、文書の構造や装飾を指定できるマークアップ言語です。たとえば、#を行頭に付けると見出しに、**で囲むと太字に、-を行頭に置くと箇条書きリストになります。

HTMLに変換できるのが特徴で、ブログ記事・ドキュメント・READMEファイル・Wikiなどで広く使われています。また、記号がシンプルなので「書いたままでも読みやすい」という利点があり、エンジニアだけでなく非エンジニアの文書作成にもよく利用されています。

Markdown記法のチートシート(一覧表)

以下では、Markdownでよく使う記法をチートシート(一覧表)としてまとめました。必要なときに素早く確認できるリファレンスとして活用してください。

分類やりたいこと書き方
基本の書式見出し# H1###### H6
太字**太字**または__太字__
斜体(イタリック)*斜体*または_斜体_
打ち消し線~~打ち消し線~~
段落空行を入れる
改行行末に2つのスペース、または<br>
水平線---または***または___
文字エスケープ「バックスラッシュ(\)」を前に付ける
\* \_ \# \| など)
リスト箇条書きリスト- 項目または* 項目または+ 項目
ネストする場合は、インデントを入れる。
番号付きリスト1. item(数字 + ドット + 半角スペース)
ネストする場合は、インデントを入れる。
チェックリスト
(タスクリスト)
- [ ] タスク
- [x] 完了済み
引用引用> 引用文
ネストされた引用> > 二重引用
リンクリンク[テキスト](https://example.com)
カーソルを合わせたときに補足情報表示[テキスト](https://example.com "補足情報")
参照リンク[テキスト][id]と本文末に[id]: https://example.com
画像画像![代替テキスト](画像URL "補足情報")
テーブルテーブル| 左寄せ | 中央寄せ | 右寄せ |
|:---------|:--------:|---------:|
| aaa | bbb | ccc |
コードインラインコード`code`
コードブロック三連バッククォート```またはチルダ~~~で囲む
コードブロック(シンタックスハイライト指定)```js / ```python
数式インライン数式$x^2 + y^2$
ブロック数式$$で囲む

よく使うひな型テンプレート

以下は、ブログ記事・技術メモ・レポートなど幅広く活用できる汎用的なテンプレートの例です。必要に応じてカスタマイズしてください。

# タイトル

## 概要
- 背景
- 目的

## 手順
1. …
2. …
3. …

## 補足
> 注意点や補足説明など

## 参考
- [公式ドキュメント](https://example.com)
- [関連リンク](https://example.com)

Markdownの各記法の「書き方」と「表示結果」

ここまでで、Markdownの概要・チートシート(一覧表)、よく使うひな形テンプレートを紹介しました。

次の章からは、Markdownの各記法について「書き方」と「VSCodeでの表示結果」を具体的に解説していきます。一つひとつの機能を理解しておくと、文書を読みやすく整理したり、見栄えを整えたりするのに役立ちます。

見出し

Markdownの見出しは文章を整理するための基本機能です。行頭に「#」を置き、その数で階層を表します。「#」の後に半角スペースを入力する必要があります。

  • # → H1(文書のタイトルに使うことが多い)
  • ## → H2(大見出し)
  • ### → H3(小見出し)
  • 最大で######(H6)まで指定可能

見出しを使うことで、文書を階層的に整理し、読みやすさや目次生成に役立ちます。

# 見出し1(H1)
## 見出し2(H2)
### 見出し3(H3)
#### 見出し4(H4)
##### 見出し5(H5)
###### 見出し6(H6)

表示結果

Markdown記法 (見出し)

太字

Markdownの太字は、文章の中で強調したい部分を目立たせるときに使います。書き方は、強調したい文字列を**または__で囲みます。表示すると文字が太くなり、重要なポイントやキーワードを強調できます。イタリックよりも強い強調を表すときに便利です。

これは **重要なポイント** です。  
これは __強調したい言葉__ です。  

表示結果

Markdown記法 (太字)

斜体(イタリック)

Markdownの斜体は、文章中で特定の単語やフレーズを少しだけ強調したいときに使います。書き方は、対象の文字列を*または_で囲みます。表示すると文字が右に傾き、ニュアンスを強調したり、外国語・専門用語・タイトルなどを目立たせるときに便利です。

これは *斜体のテキスト* です。  
これは _イタリックの文字_ です。  

表示結果

Markdown記法 (斜体・イタリック)

打ち消し線

Markdownの打ち消し線は、不要になった情報や修正箇所を示したいときに使います。書き方は、対象の文字列を~~で囲むだけです。表示すると文字に横線が引かれ、「削除された」「無効になった」ことを表せます。議事録や修正履歴の共有、比較説明などでよく利用されます。

これは ~~間違った内容~~ です。 

表示結果

Markdown記法 (打ち消し線)

段落

Markdownの段落は、文章を意味ごとに区切るために使います。基本は1行以上の空行を入れることで、新しい段落として認識されます。改行だけでは同じ段落内で続けて表示されるため、文章を分けたいときは空行を入れるのがポイントです。

これは最初の段落です。

空行を入れると、ここから新しい段落になります。

表示結果

Markdown記法 (段落)

改行

Markdownでは、行を途中で折り返したいときに「改行」を使います。通常は改行しても同じ段落内に続いて表示されるため、明示的に改行を入れる必要があります。方法は主に2つあり、「行末に半角スペースを2つ入れる」か「<br>を書くこと」です。これにより、同じ段落内で意図的に行を分けられます。

1 行目の文の末尾にスペースを 2 つ␣␣  
するとここから 2 行目になります。

または <br> を使って改行する方法もあります。

表示結果

Markdown記法 (改行)

水平線

Markdownの水平線は、文章の区切りやセクションを分けるときに使います。書き方は、単独行に---***___のいずれかを3つ以上並べるだけです。文字や他の記号と混ぜずに単独で記述する必要があります。水平線を使うことで、文書の見た目が整い、読みやすさや構造の把握がしやすくなります。

本文の最後の行です。

---

ここから次のセクションが始まります。

表示結果

Markdown記法 (水平線)

文字エスケープ

Markdownでは、*#などの記号は特別な意味を持つため、そのまま表示したい場合は「バックスラッシュ(\)」を前に付けてエスケープします。これを「文字エスケープ」と呼びます。エスケープを使うことで、記号を装飾ではなく文字として表示できます。ドキュメントでコード例や特殊記号を正確に書きたいときに便利です。

\*\*この文章は太字ではなく、アスタリスク付きで表示されます。\*\*

\# 見出しではなく、シャープ記号を表示します。

表示結果

Markdown記法 (文字エスケープ)

箇条書きリスト

Markdownの箇条書きリストは、項目を並べて整理するために使います。行頭に-*+のいずれかを置き、その後に半角スペースを入れて書きます。記号の種類は異なっても結果は同じです。また、スペースやタブでインデントすると入れ子(ネスト)リストも作成できます。文章を見やすく構造化するのに便利です。

- りんご
- みかん
  - ネーブル
  - 温州みかん
- バナナ

表示結果

Markdown記法 (箇条書きリスト)

番号付きリスト

Markdownの番号付きリストは、手順や順序を示したいときに使います。行頭に「数字 + ピリオド + 半角スペース」を書くことで番号付きになります。書いた数字は必ずしも連番でなくても、自動的に整列されます。また、インデントを入れることで入れ子のリストを作成することも可能です。

1. 手順 A
2. 手順 B
   1. サブ手順 B-1
   2. サブ手順 B-2
3. 手順 C

表示結果

Markdown記法 (番号付きリスト)

チェックリスト(タスクリスト)

Markdownのチェックリストは、ToDoや進捗管理に便利な拡張記法です。書き方は「- [ ]」で未完了、「- [x]」で完了済みを表します。ただし、標準のVSCodeプレビューでは正しく表示されない場合があります。その場合、Markdown Preview Enhancedの拡張機能を導入すればチェックリストがきちんと表示されるようになります。

- [ ] 牛乳を買う
- [x] 宿題を終える
- [ ] メールを送る

表示結果

Markdown記法 (チェックリスト)

引用・二重引用

Markdownの引用は、文章中で他者の発言や参考文を示すときに使います。行頭に>を置くだけで引用表示になり、複数行も対応可能です。さらに> >のように重ねることで入れ子の引用も作れます。引用を使うことで、本文と引用部分を視覚的に区切り、読み手にとって分かりやすい文書にできます。

> これは引用です。  
> 複数行でも OK です。
>
> > これは二重引用です。

表示結果

Markdown記法 (引用・二重引用)

リンク

Markdownのリンクは、文章中にクリック可能なURLを埋め込むときに使います。基本の書き方は[表示テキスト](URL)で、テキスト部分をクリックすると指定したリンク先へ移動できます。さらに[テキスト](URL "タイトル")のようにタイトルを指定すると、カーソルを合わせたときに補足情報が表示されます。

こちらは [Google](https://www.google.com) へのリンクです。

こちらは [Google](https://www.google.com "検索エンジン") へのリンクです。

表示結果

Markdown記法 (リンク)

参照リンク

参照リンク(Reference Link)は、リンク先のURLを本文から切り離して書けるMarkdownの書き方です。本文中では[テキスト][id]のように書き、文末や別の場所に[id]: URLを定義します。これにより本文がスッキリし、同じURLを複数回使うときにも管理が簡単になります。

こちらは [Google][google-link] へのリンクです。

もう一度 [Google][google-link] を参照します。

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

表示結果

Markdown記法 (参照リンク)

画像

Markdownの画像挿入は、リンクと似た書き方で、先頭に!を付けるのが特徴です。書き方は![代替テキスト](画像URL "タイトル")で、代替テキストは画像が表示されない場合やスクリーンリーダー向けに使われます。"タイトル"を指定するとカーソルを合わせたときに補足情報が表示されます。ブログ記事やドキュメントに図解を入れるときによく使われます。

![GitHubロゴ](https://github.githubassets.com/images/modules/logos_page/GitHub-Mark.png "GitHubのロゴ")

表示結果

Markdown記法 (画像)

URLだけでなくローカルファイルのパスも利用できます。

## URL指定(Web上の画像)
![Web画像](https://example.com/sample.png)

## 相対パス(同じフォルダやサブフォルダ内)
![相対パス画像](./images/sample.png)

## 絶対パス(ローカルPCのフルパス)
![絶対パス画像](/Users/username/project/images/sample.png)

テーブル

Markdownのテーブルは、行と列を使ってデータを整理するために使います。書き方は「|(パイプ)」でセルを区切り、2行目に「---」を並べて区切り線を作ります。この区切り線は、

  • --- → デフォルト(左寄せ)
  • :--- → 左寄せ
  • ---: → 右寄せ
  • :---: → 中央寄せ

という意味になります。---のハイフンは最低3個必要ですが、それ以上は何個でも大丈夫です。---は表の中で|を文字として表示したい場合は\|とエスケープします。ドキュメントの比較表や一覧表に便利です。

| 名前   | 年齢 | 職業     |
|--------|------|----------|
| 山田太郎 | 25   | エンジニア |
| 佐藤花子 | 30   | デザイナー |

表示結果

Markdown記法 (テーブル)

位置揃えした場合のサンプルコードを以下に示します。

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

表示結果

Markdown記法 (テーブルで位置揃えした場合)

コード

Markdownのコードブロックは、プログラムコードやコマンドを見やすく整形して表示するために使います。方法は2種類あり、文中で短いコードを示すときはバッククォート(`)で囲み、複数行のコードは三連バッククォート(```)やチルダ(~~~)で囲みます。また、三連バッククォート(```)の後に言語名(例:js, python)を指定するとシンタックスハイライトが有効になり、読みやすさが向上します。

インラインコード(文中に記述)のサンプルコードを以下に示します。

これは `console.log("Hello")` の例です。

表示結果

Markdown記法 (インラインコード)

複数行コード(フェンスコードブロック)のサンプルコードを以下に示します。

```
console.log("Hello");
console.log("World");
```

表示結果

Markdown記法 (複数行コード)

シンタックスハイライトを有効にした場合のサンプルコードを以下に示します。

```js
function hello() {
  console.log("Hello, world!");
}
```

表示結果

Markdown記法 (シンタックスハイライトを有効にした場合のコード)

数式(Math)

Markdownの標準仕様には数式機能は含まれていませんが、多くの環境ではMathJaxやKaTeXなどの拡張を用いて数式を表示できます。VSCodeのMarkdownプレビューでは$...$$$...$$を使ったTeX風の記法を直接レンダリングできます。もし環境によって表示されない場合は、Markdown Preview Enhancedなどの拡張機能を導入すると数式を利用できます。

インライン数式の場合、文中に数式を入れるときは$...$で囲みます。

これはインライン数式の例です:$x^2 + y^2 = z^2$

表示結果

Markdown記法 (インライン数式)

ブロック数式の場合、独立した数式を大きく表示したいときは$$...$$で囲みます。

$$
\frac{a}{b} = \sqrt{c}
$$

表示結果

Markdown記法 (ブロック数式)

本記事のまとめ

この記事では、Markdownの概要、チートシート(一覧表)、そして実際に活用できるテンプレートを紹介しました。

Markdownは一度覚えてしまえば、どんな文章でも効率よく整えられる強力なツールです。ドキュメントやREADMEファイルはもちろん、ブログ記事やノート作成にも役立ちます。

ぜひこの記事を手元に置いて、Markdownを使いこなしていってください。

お読み頂きありがとうございました。

スポンサーリンク