Markdown記法まとめてみた

# はじめに
いざQiitaで記事を書くぞとなったとき知っておかなければいけないのが __Markdown__。
この記事は新人エンジニアがMarkdown記法をまとめることでQiitaデビューを果たすものです。

参考：
[Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

# Markdownとは
Markdown（マークダウン）とは文書を記述するための記法（マークアップ言語）でシンプルな書き方で装飾されたHTML文書に変換することができます。

# Markdown記法
## ソースコード
### コードブロック
` ``` `または`~~~`で囲むことでコードブロックとして表示されます。
コードブロック内でコードブロックを書きたいときは使用する記号を変えるか、記号の数をn+3個にすることで書くことができます。
また、使用する言語、ファイル名も表記することができます。
#### 記法
~~~
```HTML:index.html
<p>Hello, world!</p>
```
~~~
#### 結果
```HTML:index.html
<p>Hello, world!</p>
```


### コードブロック内でDiffの記載
QiitaサポートのMarkdownでは`diff_*`という名前を付け、行の先頭に`+`、`-`を書くことによってDiffを表記することができます。

#### 記法
~~~
```diff_HTML:index.html
- <p>Hello, world!</p>
+ <p>Hello, world!</p>
```
~~~
#### 結果
```diff_HTML:index.html
- <p>Hoge!Hoge!</p>
+ <p>Hello, world!</p>
```

### コードスパン
文書中にインラインで表記することができます。
コードスパン内で`` ` ``（バッククオート）を使用する場合はn+1個のバッククオートで囲むことで表記できます。
CSSの`<color>`型の場合は横にその色が表示されます。
#### 記法
~~~
`<p>Hoge!Hoge</p>`を`<p>Hello, world!</p>`に修正しました。
`` `バッククオート` ``もしくは``` `` バッククオート `` ```
`#ffcccc`
~~~
#### 結果
`<p>Hoge!Hoge</p>`を`<p>Hello, world!</p>`に修正しました。
`` `バッククオート` ``もしくは``` `` バッククオート `` ```
`#ffcccc`

## テキストの装飾
### 見出し
```:記法
# H1見出し
## H2見出し
### H3見出し
```
### 強調・強勢
```:記法
_ か * で囲むと _ HTMLのemタグ _
__ か ** で囲むと __HTMLのstrongタグ__
```
#### 結果
_ か * で囲むと _HTMLのemタグ_
__ か ** で囲むと __HTMLのstrongタグ__

### 打ち消し線
```:記法
~~ で囲むと ~~打消し線~~
```
#### 結果
~~ で囲むと ~~打消し線~~

### 折りたたみ
HTMLの詳細折りたたみ要素を使用することができます。

:::note warn
HTMLタグの下に空行が必要です。
:::

```:記法
<details><summary>ラベル</summary>

(上に空行が必要)
折りたたみ内容
</details>
```
#### 結果
<details><summary>ラベル</summary>

(上に空行が必要)
折りたたみ内容
</details>

### 補足説明

```:記法
:::note info
補足説明です。
noteの後ろのinfoは省略可能です。
:::

:::note warn
警告メッセージです。
:::

:::note alert
より強い警告メッセージです。
:::
```
#### 結果
:::note info
補足説明です。
noteの後ろのinfoは省略可能です。
:::

:::note warn
警告メッセージです。
:::

:::note alert
より強い警告メッセージです。
:::

## リスト
### 順序なしリスト
* 文の先頭に`*`、`+`、`-`のいずれかを挿入することで表記できます。
* `*`、`+`、`-`の後ろにはスペースが必要です。
* ネストする場合は段落分の記号を入れることで表記できます。

### 順序ありリスト
1. 文の先頭に`数字.`を挿入することで表記できます。
1. `数字.`の後ろにはスペースが必要です。
1. ネストする場合は段落と同じ文字だけのスペースを入れることで表記できます。

### 説明リスト
HTMLの説明リスト要素を使用することができます。

```:記法
<dl>
  <dt>リンゴ</dt>
  <dd>赤い果実</dd>
  <dt>レモン</dt>
  <dd>黄色い果実</dd>
</dl>
```
#### 結果
<dl>
  <dt>リンゴ</dt>
  <dd>赤い果実。甘い。</dd>
  <dt>レモン</dt>
  <dd>黄色い果実。すっぱい。</dd>
</dl>

### チェックボックス
順序なしリストの記述の後ろに`[ ]`を入れるとチェックボックスになります。
チェック入りボックスを作成する場合は`[x]`と入力します。
```:記法
- [ ] チェックボックス１
- [x] チェックボックス２
```
#### 結果
- [ ] チェックボックス１
- [x] チェックボックス２

## 引用
```:記法
> 文の先頭に>を記載することで表記されます。
> 連続で使用すると複数行の引用を共起できます。
> > こうすることで引用をネストすることができます。
```
#### 結果
> 文の先頭に>を記載することで表記されます。
> 連続で使用すると複数行の引用を共起できます。
> > こうすることで引用をネストすることができます。

## 水平線
```:記法
***
*****
* * *
- - -
--------------------
```

## リンク
タイトルつきリンクを投稿できます。
タイトルはリンクにホバーすると表示されます。

```:記法
[Qiita](https://qiita.com/ "Qiita Home")
```
#### 結果
[Qiita](https://qiita.com/ "Qiita Home")


```:記法：複数個所同じリンクを書く
[このリンク][Qiita]はQiitaですが、[このリンク][Qiita]もQiitaです。

[Qiita]: https://qiita.com/
```
#### 結果
[ここのリンク][Qiita]はQiitaですが、[こっちのリンク][Qiita]もQiitaです。

[Qiita]: https://qiita.com/

### 画像
```:記法
![代替テキスト](URL "画像タイトル")

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355772/933ec1be-3ed6-2977-eeb1-8b524cc4ee63.png "image")
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355772/933ec1be-3ed6-2977-eeb1-8b524cc4ee63.png)

### テーブル
```:記法
| 左寄せ | 中央寄せ| 右寄せ |
|:-----------|:------------:|------------:|
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |
```

| 左寄せ | 中央寄せ| 右寄せ |
|:-----------|:------------:|------------:|
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |

# まとめ
よく使うMarkdown記法をまとめました。Markdownを使いMarkdownの記事を書く一石二鳥のいい経験となりました。