Markdown記法チートシート&解説

# １．はじめに
お疲れ様です。エトです。

最近「**VSCode**」を使ってMarkdown形式で情報をまとめることが増えてきました。
個人的にはテキスト入力だけで体裁を整えられるのでWordよりも使いやすく、
タスク管理ツール「**Backlog**」でも使用するので重宝しているのですが、
Markdown記法を完璧にマスターできていないことが引っかかっていました。

ということで今回はMarkdown記法を学んだ結果のOutputとして、
「**VSCodeで使えるMarkdown記法のチートシート**」
を作成しました。

VSCodeでMarkdownファイルを扱う皆様の参考になれば幸いです。

# ２．動作環境・前提条件
- VSCodeバージョン：1.90.0
- OS：Windows11 Pro
- 使用しているMarkdown関連拡張機能
「[Markdown Checkboxes](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-checkbox)」
「[Markdown All in One](https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one)」
「[Markdown PDF](https://marketplace.visualstudio.com/items?itemName=yzane.markdown-pdf)」
「[Markdown Preview Github Styling](https://marketplace.visualstudio.com/items?itemName=bierner.markdown-preview-github-styles)」
- Markdownファイルで使える記法を総じて「Markdown記法」と定義し、<br> HTMLのタグを使った記法も併せて記載する。

# ３．チートシート
:::note info
%（パーセント）で囲まれた値は**変数**です。
:::

| 記法名 | 入力値 |
|:------|:------|
| 見出し | `# %見出し%` |
| リスト・箇条書き | `- %テキスト%`  |
| リスト・番号付き | `%数字% %テキスト%` |
| リスト・記号なし | 枠`<dl>%文章%</dl>`項目`<dt>%大項目%</dt>`要素`<dd>%小項目%</dd>` |
| 空の行の挿入・改行 | `<br>` |
| 引用 | `> %テキスト% ` |
| 改ページの線 | `***` |
| コメントアウト | `<!--%テキスト%-->` |
| インライン表示 | ` `` ` |
| コード表示 | ` ``` ` |
| URLリンクの挿入 | `<%URL%>` |
| URLリンクのテキスト変更 | `[%表示テキスト%](%URL%)` |
| 画像の挿入 | `![%代替テキスト%](%URL% "%画像タイトル%")` |
| 画像の挿入・サイズ調整 | `<img width="%表示サイズ%" alt="%代替テキスト%" src="%URL%">` |
| 画像にURLリンクを設定 | `[![%代替テキスト%](%表示画像%)](%URL%)` |
| テーブルの挿入 | `（パイプ）` |
| 斜体(Italic) | `*%テキスト%*` |
| 太字(Bold) | `**%テキスト%**` |
| 打消し線 | `~%テキスト%~` |
| テキストの色変化 | `<font color="%カラーコード%">%テキスト%</font>` |
| チェックリスト | `- [ ]` |

# ４．Markdown記法解説
## 見出し
文頭に`# `（シャープ+半角スペース）を入力する。
```:記述例
# レベル1
## レベル2
### レベル3
```
# レベル1
## レベル2
### レベル3

## リスト・箇条書き
文頭に`- `（ハイフン+半角スペース）を入力する。
`* `（アスタリスク+半角スペース）でも同様に機能する。
```:記述例
- test 
- test
    - test
        - test 
```
- test 
- test
    - test
        - test

## リスト・番号付き
文頭に`%数字% `（指定の数字+半角スペース）を入力する。
```:記述例
1. test
2. test
3. test
```
1. test
2. test
3. test

## リスト・記号なし
リスト化したいテキスト全体：`<dl>%文章%</dl>`
大項目にするテキスト：`<dt>%大項目%</dt>`
小項目にするテキスト：`<dd>%小項目%</dd>`
```:記述例
<dl>
    <dt>大項目1</dt>
        <dd>小項目1-1</dd>
        <dd>小項目1-2</dd>
    <dt>大項目2</dt>
        <dd>小項目2-1</dd>
        <dd>小項目2-2</dd>
</dl>
``` 
<dl>
    <dt>大項目1</dt>
        <dd>小項目1-1</dd>
        <dd>小項目1-2</dd>
    <dt>大項目2</dt>
        <dd>小項目2-1</dd>
        <dd>小項目2-2</dd>
</dl>

## 空の行の挿入・改行
空の行を挿入、または改行したい行に`<br>`を入力する。
`  `（半角スペース2つ）でも同様に機能する。
```:記述例
test<br>
test  
test
```
test<br>
test  
test

:::note info
VSCodeとQiitaで挙動が異なるため、記術例通りに入力しても機能しません。
VSCodeで上記記述例に則って入力した場合は以下のようになります。
test
test
test
:::

## 引用
文頭に`> `（半角大なり+半角スペース）を入力する。
```:記述例
> test1,test2,test3
>> test1,test2,test3
```
> test1,test2,test3
>> test1,test2,test3

## 改ページの線
線を表示させたい箇所に`***`（アスタリスク3つ）を入力する。
`* * *`（アスタリスク3つを半角スペースで分断）でも同様に機能する。
記号は`_`（アンダースコア）または`-`（ハイフン）でも同様に機能する。
```:記述例
***
* * *
```
***
* * *

## コメントアウト
テキストの前後に`<!--`と`-->`を入力する。
```:記述例
<!-- 最終更新：2024年12月1日 -->
<!-- 変更内容：サブルーチンを追加 -->
```
<!-- 最終更新：2024年12月1日 -->
<!-- 変更内容：サブルーチンを追加 -->

:::note info
記述例と同内容を記載していますが、
コメントアウトされているため表示されません。
:::

## インライン表示
インライン表示したいテキストの前後に` `` `（バッククォーテーション）を入力する。
```:記述例
このような場合は`netstat`コマンドが有効です。
```
このような場合は`netstat`コマンドが有効です。

## コード表示
コードを入力した行の前後の行に` ``` `（バッククォーテーション3つ）を入力する。
```:記述例
netstat -an
```
:::note info
記述例と同内容なので割愛しています。
:::

## URLリンクの挿入
URLをそのまま入力する。
`<>`（小なりと大なり）で囲んでも同様に機能する。
```:記述例
<https://qiita.com/>
https://qiita.com/
```
<https://qiita.com/>

:::note info
VSCodeではどちらの記述例でも上記のような表示になりますが、
QiitaでURLをそのまま入力した場合、以下のように表示されます。
:::

https://qiita.com/

## URLリンクのテキスト変更
リンクさせたいテキスト：`[]`
リンクさせたいURL：`()`
```:記述例
[Qiitaトップページへ](https://qiita.com/)
```
[Qiitaトップページへ](https://qiita.com/)

## 画像の挿入
代替テキスト：`[%代替テキスト%]`
URLやファイルパスと画像タイトル：`(%URL% "%画像タイトル%")`
```:記述例
![狼ロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476558/c029a8b4-9ebe-e41a-1cd0-e1ef8d71d60e.png "狼のロゴ")
```
![狼ロゴ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476558/c029a8b4-9ebe-e41a-1cd0-e1ef8d71d60e.png "狼のロゴ")

:::note info
代替テキストと画像タイトルがなくても挿入自体は可能です。
「代替テキストを入力した場合」
　音声読み上げや画像が読み込めない場合に使用されます。
「画像タイトルを入力した場合」
　マウスポインタをかざした時に画像タイトルが表示されます。
:::

## 画像の挿入・サイズ調整
画像のサイズ：`img width="%表示サイズ%"`
代替テキスト：`alt="%代替テキスト%"`
画像のソース：`src="%URL%"`
```:記述例
<img width="200" alt="狼のロゴ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476558/c029a8b4-9ebe-e41a-1cd0-e1ef8d71d60e.png">
```
<img width="200" alt="狼のロゴ" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476558/c029a8b4-9ebe-e41a-1cd0-e1ef8d71d60e.png">

## 画像にURLリンクを設定
挿入したい画像と代替テキスト：`[![%代替テキスト%](%挿入したい画像%)]`
リンクさせたいURL：`(%URL%)`
```:記述例
[![Qiitaトップページへ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476558/c029a8b4-9ebe-e41a-1cd0-e1ef8d71d60e.png)](https://qiita.com/)
```
:::note info
下記画像をクリックするとQiitaのトップページにつながります。
:::


[![Qiitaトップページへ](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3476558/c029a8b4-9ebe-e41a-1cd0-e1ef8d71d60e.png)](https://qiita.com/)

## テーブルの挿入
`|`（パイプ）で区切ったスペースにデータを入力する。
1行目：列の名称
2行目：`：`（コロン）で文字を詰める方向を指定する。
3行目以降：テーブルとして表示される。
```:記述例
| 製品名 | 価格（円） | 個数 |
|:------|:------:|--------:|
| ※左詰め | ※中央詰め | ※右詰め |
| リンゴ | 120 | 12 |
| バナナ | 180 | 16 |
| みかん | 90 | 8 |
```
| 製品名 | 価格（円） | 個数 |
|:------|:------:|--------:|
| ※左詰め | ※中央詰め | ※右詰め |
| リンゴ | 120 | 12 |
| バナナ | 180 | 16 |
| みかん | 90 | 8 |

:::note info
パイプとデータの間に半角スペースを入力していますが、
入力しなくてもテーブルとして表示されます。
:::

## 斜体(Italic)
テキストの前後に`*`（アスタリスク）を入力する。
`_`（アンダースコア）でも同様に機能する。
```:記述例
*Italic*
```
*Italic*

## 太字(Bold)
テキストの前後に`**`（アスタリスク2つ）を入力する。
`__`（アンダースコア2つ）でも同様に機能する。
```:記述例
**Bold**
```
**Bold**

## 打消し線
テキストの前後に`~~`（チルダ二つ）を入力する。
```:記述例
~~この表現には誤りがありました。~~
```
~~この表現には誤りがありました。~~

## テキストの色変化
テキストの前後に`<font color="%Color%">`と`</font>`を入力する。
```:記述例
<font color="Red">red</font>
<font color="Blue">blue</font>
```
<font color="Red">red</font>
<font color="Blue">blue</font>

## チェックリスト
文頭に`- [ ] `（ハイフン+半角スペース+角括弧+半角スペース）を入力する。
角括弧の中に`x`を入力するとチェックを入れた扱いになる。
```:記述例
- [ ] 洗濯
- [x] 掃除
```
- [ ] 洗濯
- [x] 掃除

:::note warn
VSCodeで使用する場合は拡張機能が必須です。
:::

# ５．終わりに
内容に不足などあれば、ご指摘いただけると幸いです。

ご覧いただきありがとうございました。

# ６．参考にした文献・サイト
https://qiita.com/Qiita/items/c686397e4a0f4f11683d

https://qiita.com/kamorits/items/6f342da395ad57468ae3