Markdown記法

最近、マークダウン記法について勉強してみました。
実際に使ってみると、思っていた以上にシンプルで便利！
ブログやメモ、ドキュメント作成など、さまざまな場面で役立ちそうです。

せっかくなので、今回は「覚えておくと便利なマークダウンの基本的な書き方」を15個、例と一緒にご紹介してみます。
これからマークダウンを使い始めようと思っている方の参考になれば嬉しいです。

1 Code blocks - コードブロック

```
Hello,world
```
と```で囲むことによって

Hello,world

このような表示になります。

2 Code spans - コードスパン

`Hello World`

と文字列を`で囲むことで、、、

Hello Worldこのようにインライン表示ができます。

3 Headings - 見出し

# H1タグ
## H2タグ
### H3タグ

このように文字の前に#を書くことで以下のように⇩

H1タグ

H2タグ

H3タグ

このように見出しの表示になります。

4 Emphasis / Strong Emphasis - 強調・強勢

*italic type*

**太字**

このようにそれぞれ*と**で囲むことで、、、

italic type
太字

このようにそれぞれイタリック体と太字になります。

5 Strikethrough - 打ち消し線

~~打ち消し~~
このように~~で要素を囲むことによって
~~打ち消し~~
このような文字の上に線が入った表示になります。

6Details - 折りたたみ

<details></details>で囲むと詳細を中に格納できます。

折りたたみ

Hello World

7 Note - 補足説明

:::note {info or warn or alert}

:::
の中に文字を書くと目を引くような背景が設定されます
infoの場合⇩

インフォメーション

warnの場合⇩

警告

alertの場合⇩

強い警告

8 Bullet List - 順序なしリスト

文頭に* + -のいずれかを入れてスペースを開けると以下のようにリストが作成できます。

リスト
リスト
リスト

9 Ordered List - 番号付きリスト

文頭に数字.（例：1.）を入れてスペースを開けると番号付きリストになります

リスト1
リスト2
リスト3

10 Description List - 説明リスト

<dl>
  <dt>ぶどう</dt>
  <dd>紫色のフルーツ</dd>
  <dt>キウイ</dt>
  <dd>緑色のフルーツ</dd>
</dl>

こんな感じでHTMLの

タグをそのまま使うことによって、、、

ぶどう: 紫色のフルーツ
キウイ: 緑色のフルーツ

こんな感じで説明リストを表現できます。

11Checkbox - チェックボックス

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

このような書き方をすることで、、、

タスク1
タスク2

このようにチェックボックスが表示されます

12Blockquotes - 引用

> 文頭に>を置くことで引用になります。
> 複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
> **引用の上下にはリストと同じく空行がないと正しく表示されません**
> 引用の中に別のMarkdownを使用することも可能です。
> > 引用のネストもできます。

文頭に>を置くことで引用になります。
複数行にまたがる場合、改行のたびにこの記号を置く必要があります。
引用の上下にはリストと同じく空行がないと正しく表示されません
引用の中に別のMarkdownを使用することも可能です。

これはネストされた引用です。

13Horizontal rules - 水平線

以下の文字は全て水平線が表示されるものになります。

* * *
***
*****
- - -
---------------------------------------

14 Links - リンク

[shugo1125のQiita](https://qiita.com/shugo1125 "Qiita Home")

このように記述することによって、、、
shugo1125のQiita

上記のように文字列に指定したリンク(https://qiita.com/shugo1125 "Qiita Home")が設定されます。

15 Images - 画像埋め込み

![Qiita](https://qiita-image-store.s3.amazonaws.com/0/45617/015bd058-7ea0-e6a5-b9cb-36a4fb38e59c.png "Qiita")

このように記入することで、、、

このように画像として表示されます！