Qiitaの【Markdown記法 チートシート】を活用してMarkdownをマスターする！《答え編》

Markdown記法を覚えたいので作りました。
1. [Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d "Qiitaの【Markdown記法 チートシート】")のチートシートを参考に《答え編》をつくってみた。
1. わたしが覚えやすそう&使う頻度が高そうな順番になっています。
1. 別途 `改行` や `空白` も追加。絵文字や数式はなし。

使い方は一番下に記載[^1]。

[^1]: 練習用のmdファイルを別途用意し、《答え編》のコードをコピぺする。練習用ファイルの中にある《答え》の部分を《回答欄》に置き換え、すべてのコードを削除。練習用のファイルをVSコードで開き、コードを書く。[参考画像](https://programming-ns.com/programming-study3/ "看護師がプログラミング習得を目指す
")

## ① H2タグ
### 《答え》
```markdown:書き方
## h2
### h3
```
:::note
実際の見え方
## h2
### h3
:::

## ② 重要(太字)
### 《答え：前後に半角スペース！》
```markdown:書き方
 **太字** 
```
:::note
実際の見え方
 **太字** 
:::

## ③ 強調(斜体)
### 《答え：前後に半角スペース！》
```markdown:書き方
 *強調(斜体)*  
 *asuka* 
```
:::note
実際の見え方
 *強調(斜体)* 
 *asuka* 
:::

## ④ 打ち消し線
### 《答え》
```markdown:書き方
 ~~打ち消し~~ 
```
:::note
実際の見え方
 ~~打ち消し~~ 
:::

## ⑤ 折りたたみ(表示：折りたたみ、中身：こんにちは)
### 《答え》
```markdown:書き方
<details><summary>折りたたみ</summary>

こんにちは
</details>
```
:::note
実際の見え方
<details><summary>折りたたみ</summary>

こんにちは
</details>
:::

## ⑥ 順序なしリスト（AA、BB、CC）
### 《答え》
```markdown:書き方
- AA
- BB
- CC
```
:::note
実際の見え方
- AA
- BB
- CC
:::

## ⑦ 順序なしリスト（AA、BB、CC）ネスト(1、2)
### 《答え》
```markdown:書き方
- AA
- BB
- CC
  - 1
  - 2
```
:::note
実際の見え方
- AA
- BB
- CC
  - 1
  - 2
:::

## ⑧ 番号付きリスト（1.a、2.i、3.u）
### 《答え》
```markdown:書き方
1. a
1. i
1. u 
```
:::note
実際の見え方
1. a
1. i
1. u 
:::

## ⑨ 番号付きリスト（1.a、2.i、3.u）ネスト(1.aの中に1.e、2.o)
### 《答え：スペースではなくtabを使う》
```markdown:書き方
1. a
    1. e
    1. o
1. i
1. u
```
:::note
実際の見え方
1. a
    1. e
    1. o
1. i
1. u
:::

## ⑩ 番号付きリスト（1.a、2.i、3.u）エスケープ
### 《答え》
```markdown:書き方
1\. a
2\. i
3\. u
```
:::note
実際の見え方
1\. a
2\. i
3\. u
:::

## ⑪ 水平線
### 《答え: `*` が3つあればOK》
```markdown:書き方
***
```
:::note
実際の見え方
***
:::

## ⑫ コードブロック (「Ruby」で記述したコードをファイル名「asuka.rb」として投稿する例)
### 《答え》
~~~md:書き方
```ruby:asuka.rb
puts '飛鳥です'
```
~~~
:::note
実際の見え方
```ruby:asuka.rb
puts '飛鳥です'
```

:::
## ⑬ コードスパン (コードをインライン表示)
### 《答え》
~~~md:書き方
`飛鳥` です。 
~~~
:::note
実際の見え方
`飛鳥` です。 
:::

## ⑭ チェックボックス
### 《答え》
```markdown:書き方
- [ ] タスク1
- [x] タスク2
```
:::note
実際の見え方
- [ ] タスク1
- [x] タスク2
:::

## ⑮ 空白
### 《答え》
~~~md:書き方
## 半角よりさらに小さいスペース
&thinsp; 
## 半角よりやや広い
&ensp;
## 全角スペースとほぼ同じ幅
&emsp;
~~~
:::note
以下の3種類
あ&thinsp;あ 
あ&ensp;あ
あ&emsp;あ
:::
:::note alert
`nbsp;`は半角スペースの用途では使わない
:::
## ⑯ 改行(飛鳥)
~~~md:書き方
飛<br>鳥
--------
飛

鳥
--------
飛  
鳥
~~~
:::note
実際の見え方
飛<br>鳥
※以下3種類の方法があるが、使う環境によって使えない場合もある。
① `<br>`タグを使う
② 文末に半角スペース2ついれる
③ 1行空白行をいれる
:::

## ⑰ リンク(マウスホバー時にタイトル名を表示)
### 《答え》
```markdown:書き方
[リンクテキスト](URL "マウスホバー時のタイトル名")
```
:::note
実際の見え方
[飛鳥](https://programming-ns.com/ "看護師がプログラミング習得を目指す")
:::

## ⑱ リンク(マウスホバー時にタイトル名なし)
### 《答え》
```markdown:書き方
[飛鳥](https://programming-ns.com/)
```
:::note
実際の見え方
[飛鳥](https://programming-ns.com/)
:::

## ⑲ 複数個所への同じリンクの書き方( `ここ` と `飛鳥` は同じリンク)
### 《答え》
```markdown:書き方
[ここ][飛鳥のブログ] と [飛鳥][飛鳥のブログ] は同じリンク

[飛鳥のブログ]: https://programming-ns.com/ "看護師がプログラミング習得を目指す"
```
:::note
実際の見え方
[ここ][飛鳥のブログ] と [飛鳥][飛鳥のブログ] は同じリンク

[飛鳥のブログ]: https://programming-ns.com/ "看護師がプログラミング習得を目指す"
:::

## ⑳ 画像埋め込み
### 《答え》
```markdown:書き方
## タイトルありの画像を埋め込む
![代替テキスト](画像のURL "画像タイトル")

## タイトル無しの画像を埋め込む
![代替テキスト](画像のURL)
```
:::note
実際の見え方
![飛鳥](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpajq5AK7ajJyay5NT8gI4NkTbA4U30HAABeeZ903Ky9W6-lmE_tpu3PnidvylKmYIPx06qFjLvofBB_rnD_bLsws4gUtVJLq5NGeE7r-K9J1uwiJ-kWf0OCaZFC_fWlQaEeXOaaXwm3bwao2bmZyzYoQ8Iads_GwUtpBHlVXGXgT60nMUwul8e0Yi/s600/aikyachi.png "看護師がプログラミング習得を目指す")
:::

## ㉑ リンクカート
### 《答え》
```markdown:書き方
(空行)
https://programming-ns.com/
(空行)
```
https://programming-ns.com/programming-study3/

## ㉒ テーブル
### 《答え》
```markdown:書き方
|左寄り|右寄り|中央よ|
|:---|---:|:---:|
|あ|あ|あ|
```
:::note
実際の見え方
|左寄り|右寄り|中央よ|
|:---|---:|:---:|
|あ|あ|あ|
:::

## ㉓ テーブル(キャプションあり)
### 《答え：HTMLで入力》
```markdown:書き方
<table>
  <caption>タイトル</caption>
  <thead>
    <tr>
      <th>A</th><th>B</th><th>C</th>
    </tr>
  </thead>
  <tr>
    <td>あ</td><td>い</td><td>う</td>
  </tr>
</table>
```
:::note
実際の見え方
<table>
  <caption>タイトル</caption>
  <thead>
    <tr>
      <th>A</th><th>B</th><th>C</th>
    </tr>
  </thead>
  <tr>
    <td>あ</td><td>い</td><td>う</td>
  </tr>
</table>
:::
## ㉔ 説明リスト
### 《答え：説明リスト内ではHTMLタグを使って装飾》
```markdown:書き方
<dl>
  <dt>リンゴ</dt>
  <dd>赤いフルーツ</dd>
  <dt>オレンジ</dt>
  <dd>橙色のフルーツ</dd>
</dl>
```
:::note
実際の見え方
<dl>
  <dt>リンゴ</dt>
  <dd>赤いフルーツ</dd>
  <dt>オレンジ</dt>
  <dd>橙色のフルーツ</dd>
</dl>
:::
## ㉕ 引用(Blockquotes)
### 《答え》
~~~md:書き方
> 文頭に`>`を置く
> 
> > ネストされた引用
~~~
:::note
実際の見え方
> 文頭に`>`を置く
> 
> > ネストされた引用
:::

## ㉖ 脚注
### 《答え》
~~~md:書き方
脚注の書き方[^2]。

[^2]: 脚注のリンク先
~~~
:::note
実際の見え方
脚注の書き方[^2]。

[^2]: 脚注のリンク先
:::


## 参考① コードブロック ( `diff_*` をつけることでDiffを追加することができる)
~~~md:書き方
```diff_ruby:asuka.rb
- puts '飛鳥です'
+ puts 'アスカです'
```
```diff_javascript:asuka.js
- console.log('飛鳥です');
+ console.log('アスカです');
```
~~~
:::note
実際の見え方
```diff_ruby:asuka.rb
- puts '飛鳥です'
+ puts 'アスカです'
```
```diff_javascript:asuka.js
- console.log('飛鳥です');
+ console.log('アスカです');
```

:::
## 参考② コードスパン内でバッククオートを使う
~~~md:書き方
## 開始・終了のバッククオートをn+1個で囲む
`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` 
~~~
:::note
実際の見え方
`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` 
:::

## 参考③ コードスパンの中身がCSSの `<color>` 型の場合は横にその色を表示できる
~~~md:書き方
`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`
~~~
:::note
実際の見え方
`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`
:::

## 参考④ 補足
~~~md:書き方
:::note
参考
●●です‼
:::
~~~
~~~md:書き方
:::note warn
警告
○○に注意してください。
:::
~~~
~~~md:書き方
:::note alert
より強い警告
○○しないでください。
:::
~~~
:::note
参考
●●です‼
:::
:::note warn
警告
○○に注意してください。
:::
:::note alert
より強い警告
○○しないでください。
:::

## 参考⑤ HTMLで画像サイズを調整できる
~~~md:書き方
<img width="50" src="画像URL">
~~~

## 参考⑥ ダイアグラム(plantuml)
  :::note
[PlantUMLの構文公式サイト](https://plantuml.com/ja/)

```plantuml
@startgantt
language ja

Project starts 2023-05-24
[ウォーミングアップ] starts 2023-05-01 and ends 2023-07-31
[Progate] starts 2023-05-01 and ends 2023-07-31
[Markdown] starts 2023-05-24 and ends 2023-07-31
@endgantt
```
:::
## 参考⑦ Qiitaで埋め込み可能なコンテンツ一覧
  :::note
[参考記事](https://qiita.com/Qiita/items/612e2e149b9f9451c144)

:::