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

Markdown記法を覚えたいので作りました。

1. Qiitaのチートシートを参考に《答え編》をつくってみた。
2. わたしが覚えやすそう&使う頻度が高そうな順番になっています。
3. 別途 改行 や 空白 も追加。絵文字や数式はなし。

使い方は一番下に記載¹。

① H2タグ

《答え》

書き方

## h2
### h3

実際の見え方

h2

h3

② 重要(太字)

《答え：前後に半角スペース！》

書き方

 **太字** 

実際の見え方
太字

③ 強調(斜体)

《答え：前後に半角スペース！》

書き方

 *強調(斜体)*  
 *asuka* 

実際の見え方
強調(斜体)
asuka

④ 打ち消し線

《答え》

書き方

 ~~打ち消し~~ 

実際の見え方
打ち消し

⑤ 折りたたみ(表示：折りたたみ、中身：こんにちは)

《答え》

書き方

<details><summary>折りたたみ</summary>

こんにちは
</details>

実際の見え方

折りたたみ

こんにちは

⑥ 順序なしリスト（AA、BB、CC）

《答え》

書き方

- AA
- BB
- CC

実際の見え方

• AA
• BB
• CC

⑦ 順序なしリスト（AA、BB、CC）ネスト(1、2)

《答え》

書き方

- AA
- BB
- CC
  - 1
  - 2

実際の見え方

• AA
• BB
• CC
  • 1
  • 2

⑧ 番号付きリスト（1.a、2.i、3.u）

《答え》

書き方

1. a
1. i
1. u 

実際の見え方

1. a
2. i
3. u

⑨ 番号付きリスト（1.a、2.i、3.u）ネスト(1.aの中に1.e、2.o)

《答え：スペースではなくtabを使う》

書き方

1. a
    1. e
    1. o
1. i
1. u

実際の見え方

1. a
   1. e
   2. o
2. i
3. u

⑩ 番号付きリスト（1.a、2.i、3.u）エスケープ

《答え》

書き方

1\. a
2\. i
3\. u

実際の見え方
1. a
2. i
3. u

⑪ 水平線

《答え: * が3つあればOK》

書き方

***

実際の見え方

---

⑫ コードブロック (「Ruby」で記述したコードをファイル名「asuka.rb」として投稿する例)

《答え》

書き方

```ruby:asuka.rb
puts '飛鳥です'
```

実際の見え方

asuka.rb

puts '飛鳥です'

⑬ コードスパン (コードをインライン表示)

《答え》

書き方

`飛鳥` です。 

実際の見え方
飛鳥 です。

⑭ チェックボックス

《答え》

書き方

- [ ] タスク1
- [x] タスク2

実際の見え方

• タスク1
• タスク2

⑮ 空白

《答え》

書き方

## 半角よりさらに小さいスペース
  
## 半角よりやや広い
 
## 全角スペースとほぼ同じ幅
 

以下の3種類
あ あ
あ あ
あ あ

nbsp;は半角スペースの用途では使わない

⑯ 改行(飛鳥)

書き方

飛<br>鳥
--------
飛

鳥
--------
飛  
鳥

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

⑰ リンク(マウスホバー時にタイトル名を表示)

《答え》

書き方

[リンクテキスト](URL "マウスホバー時のタイトル名")

実際の見え方
飛鳥

⑱ リンク(マウスホバー時にタイトル名なし)

《答え》

書き方

[飛鳥](https://programming-ns.com/)

実際の見え方
飛鳥

⑲ 複数個所への同じリンクの書き方( ここ と 飛鳥 は同じリンク)

《答え》

書き方

[ここ][飛鳥のブログ] と [飛鳥][飛鳥のブログ] は同じリンク

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

実際の見え方
ここ と 飛鳥 は同じリンク

⑳ 画像埋め込み

《答え》

書き方

## タイトルありの画像を埋め込む
![代替テキスト](画像のURL "画像タイトル")

## タイトル無しの画像を埋め込む
![代替テキスト](画像のURL)

実際の見え方

㉑ リンクカート

《答え》

書き方

(空行)
https://programming-ns.com/
(空行)

㉒ テーブル

《答え》

書き方

|左寄り|右寄り|中央よ|
|:---|---:|:---:|
|あ|あ|あ|

実際の見え方

左寄り	右寄り	中央よ
あ	あ	あ

㉓ テーブル(キャプションあり)

《答え：HTMLで入力》

書き方

<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>

実際の見え方

タイトル

A	B	C
あ	い	う

㉔ 説明リスト

《答え：説明リスト内ではHTMLタグを使って装飾》

書き方

<dl>
  <dt>リンゴ</dt>
  <dd>赤いフルーツ</dd>
  <dt>オレンジ</dt>
  <dd>橙色のフルーツ</dd>
</dl>

実際の見え方

リンゴ

赤いフルーツ

オレンジ

橙色のフルーツ

㉕ 引用(Blockquotes)

《答え》

書き方

> 文頭に`>`を置く
> 
> > ネストされた引用

実際の見え方

文頭に>を置く

ネストされた引用

㉖ 脚注

《答え》

書き方

脚注の書き方[^2]。

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

実際の見え方
脚注の書き方²。

参考① コードブロック ( diff_* をつけることでDiffを追加することができる)

書き方

```diff_ruby:asuka.rb
- puts '飛鳥です'
+ puts 'アスカです'
```
```diff_javascript:asuka.js
- console.log('飛鳥です');
+ console.log('アスカです');
```

実際の見え方

asuka.rb

- puts '飛鳥です'
+ puts 'アスカです'

asuka.js

- console.log('飛鳥です');
+ console.log('アスカです');

参考② コードスパン内でバッククオートを使う

書き方

## 開始・終了のバッククオートをn+1個で囲む
`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` 

実際の見え方
`バッククオート` や ``2連続バッククオート``

参考③ コードスパンの中身がCSSの <color> 型の場合は横にその色を表示できる

書き方

`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`

実際の見え方
#ffce44
rgb(255,0,0)
rgba(0,255,0,0.4)
hsl(100, 10%, 10%)
hsla(100, 24%, 40%, 0.5)

参考④ 補足

書き方

:::note
参考
●●です‼
:::

書き方

:::note warn
警告
○○に注意してください。
:::

書き方

:::note alert
より強い警告
○○しないでください。
:::

参考
●●です‼

警告
○○に注意してください。

より強い警告
○○しないでください。

参考⑤ HTMLで画像サイズを調整できる

書き方

<img width="50" src="画像URL">

参考⑥ ダイアグラム(plantuml)

PlantUMLの構文公式サイト

参考⑦ Qiitaで埋め込み可能なコンテンツ一覧

参考記事

1. 練習用のmdファイルを別途用意し、《答え編》のコードをコピぺする。練習用ファイルの中にある《答え》の部分を《回答欄》に置き換え、すべてのコードを削除。練習用のファイルをVSコードで開き、コードを書く。参考画像 ↩

2. 脚注のリンク先 ↩