【初心者向け】Qiitaでよく使うMarkdownの記法チートシート

## はじめに

[公式チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)をかみ砕いてよく使う順に並べました。
また、解説の追加とその他便利な記法を追加しました。


### この記事でわかること

- Qiitaで特によく使うMarkdownの記法がわかる
- 基本的なMarkdownの記法がわかる


### この記事の対象者

- Qiitaでの投稿初心者
- Markdownを書き始めた人
- シンプルなチートシートが欲しい人


### 検証環境

- 2025/4/1時点のQiita


## Markdownとは

一言で表すと「簡単な書き方で文書を装飾できる書き方」のことです。
何回か手を動かしながら文書を作成すればすぐに基本を使いこなすことができます。

![markdown.256x256.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/0c9bbe03-9866-ebe3-5193-c10bd882d1b0.png)


## よく使う記法


### 見出し

`## `を行頭につけることで見出しを作成できます。
Qiitaでは見出しから目次(TOC)が自動生成されます。

Qiitaでは1番大きい見出しを`##`(h2タグ)とし、以下のように運用されていることが多いようです。
[これは`#`に相当するhtmlの`h1`タグがタイトルに使われているためです。](https://qiita.com/munieru_jp/items/fff0807f89c2896e701a)

```markdown:見出しの書き方

## 大見出し(章)
### 中見出し(節)
#### 小見出し(項)

```


### コードの挿入方法


#### コードブロック

バッククオート3つ```` ``` ````かチルダ3つ`~~~`で囲むとコードブロックになります。
始めの```` ``` ````の後に`言語:名前`を付けるとハイライトとか付いて分かりやすくなります。

コードブロック内に```` ``` ````を記述したい場合は`~~~`で囲みまます。

:::note warn
注意

'(シングルクオート Shift+7) じゃなくて
`(バッククオート Shift+@) です。(n敗)

:::

~~~markdown:コードブロックの書き方
```python:test.py
# Pythonコードの例
def hello_world():
    print("Hello, World!")
```
~~~

**結果**

```python:test.py
# Pythonコードの例
def hello_world():
    print("Hello, World!")
```

```javascript:test.js
// JavaScriptコードの例
function helloWorld() {
    console.log("Hello, World!");
}
```

**差分(diff)がある場合**
```` ```diff_python ````のように始めると差分を表現できます。
行頭に`+`で追加分、`-`で削除分です。
 
~~~markdown:差分の表現
```diff_python:test.py
def hello_world():
-   print("Hello, World")
+   print("Hello, World!")
```
~~~

```diff_python:test(diff).py
# Pythonコードの例
def hello_world():
-   print("Hello, World")
+   print("Hello, World!")
```


#### コードスパン(インラインコード)

`` ` バッククオート``で囲むと`hogehoge`のようにインライン表示ができます。

`` ` ``自体をインライン表示したい場合はn+1個で囲みます。

~~~markdown:バッククオートのインライン表示
`` ` ``
``` `` ```
```` ``` ````
~~~

**結果**
`` ` ``
``` `` ```
```` ``` ````


### リストの作成


#### 箇条書きリスト

```markdown:箇条書きリストの書き方
- 項目1
- 項目2
  - 項目2-1
  - 項目2-2
- 項目3
```
**結果**
- 項目1
- 項目2
  - 項目2-1
  - 項目2-2
- 項目3


#### 番号付きリスト

`1. `で番号付きリストになります。
番号付きリストの入れ子表現を`1.1.`にはできません。

```markdown:番号付きリストの書き方
1. 項目1
1. 項目2
    1. 項目2-1
    1. 項目2-2
1. 第3項目
```
**結果**
1. 項目1
1. 項目2
    1. 項目2-1
    1. 項目2-2
1. 第3項目


### 斜体と太字(強調)

*で囲むと文字を強調できます。
*の数が増えると強調度が増えます。

```markdown:斜体と太字の書き方
_これは斜体です_

**これは太字です**

***これは太字かつ斜体です***
```

**結果**
_これは斜体です Italic_

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

***これは太字かつ斜体です Bold Italic***

自分は斜体を強調の意味で使わないのであえて`_`で囲むことにしています。
いわゆる _イレギュラー(irregular)_ な時に使っています。

以下は[斜体(イタリック)の解釈](https://www.tohoho-web.com/html/i.htm)で自分の中でしっくり来たものです。
> 「分類学上の名称、技術用語、他言語からきた慣用句、字訳、思考、西洋文中の船名など、通常の文章とは少し性質の異なる箇所」

:::note warn
斜体はフォント対応されていないことがあるので環境によって表示されないことがあります。(太字に比べ)
:::


### リンクの挿入

URLの上下に空行があると独立するので見やすいです。
```markdown:リンクの書き方

https://qiita.com

[基本的なリンク](https://qiita.com)
[マウスホバーがついたリンク](https://qiita.com "マウスホバー")
[ページ内リンク](###リンクの挿入)

```
**結果**

https://qiita.com

[基本的なリンク](https://qiita.com)
[マウスホバーがついたリンク](https://qiita.com "マウスホバー")
[ページ内リンク](###リンクの挿入)


リンクを見出しにしたり強調したりもできます。


### コメントアウト

```markdown:コメントアウトの書き方

<!--
この部分がコメントアウトされる。
-->

```
**結果**

<!--
この部分がコメントアウトされる。
-->


### 画像の挿入

編集画面でドラッグアンドドロップするか
画像がクリップボードにある状態でCtrl+Vなどで貼り付けると
自動でアップロードされます。

[テーブル](####テーブル)の中に入れることもできます。

画像のサイズ指定はHTML表記でできます。


```markdown:画像の書き方
基本の画像
![代替テキスト](画像のURL)

幅のピクセル指定
<img src="画像のURL" width="200px">

幅の割合指定
<img src="画像のURL" width="50%">

テーブルの中の画像
|             画像1             |             画像2              |
| ----------------------------- | ------------------------------ |
| ![代替テキスト1](画像1のURL)  | ![代替テキスト2](画像2のURL)   |

読み込めない場合
![読み込めない場合](画像のURL)

```
**結果**

基本の画像
![pop_gazouha_image_desu_shikaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/80065d23-a991-c284-69c1-937635d08ee9.png)

幅のピクセル指定

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/80065d23-a991-c284-69c1-937635d08ee9.png" width="200px">

幅の割合指定
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/80065d23-a991-c284-69c1-937635d08ee9.png" width="50%">

テーブルの中の画像
| 画像1 | 画像2 |
| ------- | ------- |
| ![pop_gazouha_image_desu_shikaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/80065d23-a991-c284-69c1-937635d08ee9.png)  | ![pop_gazouha_image_desu_shikaku.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/80065d23-a991-c284-69c1-937635d08ee9.png)   |

読み込めない場合の表示
![読み込めない場合](画像のURL)

>『画像はイメージです』ってトートロジーですね


### 引用の表現

```markdown:引用の書き方
> これは引用です。
> 引用文はこのように表示されます。
>> 2つ使うこともできます。
```
**結果**

> これは引用です。
> 引用文はこのように表示されます。
>> 2つ使うこともできます。

### 水平線
`---`で区切り線を引けます。

---


### 色付きの背景で囲む

Qiitaのエディタで`/`を入力すると背景を選択できます。

!["/"で背景](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/d817db4f-7ef5-e476-b897-532c0f1518ca.png)

```markdown:色付きの背景の書き方
::: note info
緑で囲む(補足説明)
:::

:::note warn
黄色で囲む(注意)
:::

:::note alert
赤色で囲む(警告)
:::

```

**結果**

::: note info
緑で囲む(補足説明)
:::

:::note warn
黄色で囲む(注意)
:::

:::note alert
赤色で囲む(警告)
:::

### 表・テーブルの作成
`列数`x`データ行数`で`3x2`のように入力するとテーブルが挿入できます。


また、Markdownで直接書くこともできます。
```markdown:表・テーブルの書き方
| 見出し1 | 見出し2 | 見出し3 |
| ------- | ------- | ------- |
| 内容1   | 内容2   | 内容3   |
| 内容A   | 内容B   | 内容C   |
```

**結果**

| 見出し1 | 見出し2 | 見出し3 |
| ------- | ------- | ------- |
| 内容1   | 内容2   | 内容3   |
| 内容A   | 内容B   | 内容C   |


### mermaid

mermaid記法でフローチャートが書けます。
日本語表記する場合は日本語を`""`で囲むと良いです。

~~~markdown
```mermaid
graph TD;
    Start("開始")-->
    Node1["処理1"]-->
    Node2["処理2"]-->
    Judge1{"分岐1<br>改行"}
        Judge1-->|True|Node3
            Node3["処理3"]-->Node6
        Judge1-->|False|Node4
            Node4["処理4"]-->
            Node5["処理5"]-->Node6
    Node6["表示6"]-->
    End("終了")
```
~~~

**結果**

```mermaid
graph TD;
    Start("開始")-->
    Node1["処理1"]-->
    Node2["処理2"]-->
    Judge1{"分岐1<br>改行"}
        Judge1-->|True|Node3
            Node3["処理3"]-->Node6
        Judge1-->|False|Node4
            Node4["処理4"]-->
            Node5["処理5"]-->Node6
    Node6["表示6"]-->
    End("終了")
```


### 数式

コードブロックで`math`を指定すると[TeX記法](https://qiita.com/ttabata/items/92a4a72b042e6a2dbbad "Qiitaでの様々な数式の書き方")で数式を表現できます。

`%`以降がコメントアウトです。

`\begin{align}`と`\end{align}`で囲み、等号を`&=`にすると等号揃えで複数並べることができます。

括弧()は`\left(`と`\right)`で囲むとサイズが勝手に変わってくれます。
波括弧{}の場合は`\left\{`と`\right\}`です



~~~:数式の書き方
```math
%以降がコメントアウトです。

\begin{align}
I_{r} &= \frac{bh^3}{12}\\%長方形
\\
I_{c} &= \frac{\pi D^4}{64}\\%円柱
\\
I_{p} &= \frac{\pi}{64} \left( D^4-d^4 \right) \\%円筒
\end{align}
```
~~~
**結果**
```math:hoge
%以降がコメントアウトです。
%\begin{align}と\end{align}で囲み、等号を"&="にすると等号揃えで複数並べることができます。
%()は"\left("と"\right)"で囲むとサイズが勝手に変わってくれます。波括弧{}の場合は"\left\{"と"\right\}"

\begin{align}
I_{r} &= \frac{bh^3}{12}\\%長方形
\\
I_{c} &= \frac{\pi D^4}{64}\\%円柱
\\
I_{p} &= \frac{\pi}{64} \left( D^4-d^4 \right) \\%円筒
\end{align}
```

数式上で右クリックするとコンテキストメニューからコピーしたりできます。
![math](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3755504/caacee0b-ba45-034a-622d-43014ac9e250.png)


## 折り畳み

MarkdownではなくHTMLですが折り畳みをすることができます。

```html:折り畳みの書き方
<details>
<summary>
常に表示される部分(左の三角を押すと開いたり閉じたりする)
</summary>
折り畳まれる文章

- 折り畳まれるリスト

</details>
```
<details>
<summary>
常に表示される部分(左の三角を押すと開いたり閉じたりする)
</summary>
折り畳まれる文章

- 折り畳まれるリスト

</details>


## 参考資料

<!--Markdown記法 チートシート-->

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

<!--【Qiita記事/Markdown】画像横並びの神となる-->

https://qiita.com/koshishirai/items/a86ce3bb569cc4652e2f

<!--Qiitaでの様々な数式の書き方 ～ TeX記法を使ったサンプルコード付き-->

https://qiita.com/ttabata/items/92a4a72b042e6a2dbbad