QiitaのMarkdown記法を試してみた

## はじめに
今回は、QiitaのMarkdown記法を試してみることにします。
使用するMarkdown記法は、以下になります。

- Code - コードの挿入
  - Code blocks - コードブロック
  - Code spans - コードスパン
- Format Text - テキストの装飾
  - Headings - 見出し
  - Emphasis / Strong Emphasis - 強調・強勢
  - Strikethrough - 打ち消し線
  - Note - 補足説明
- Lists - リスト
  - HBullet List - 順序なしリスト
  - Ordered List - 番号付きリスト
  - Description List - 説明リスト
  - Checkbox - チェックボックス
- Blockquotes - 引用
- Horizontal rules - 水平線
- Links - リンク
- Images - 画像埋め込み
- テーブル


## Code - コードの挿入
### Code blocks - コードブロック
``` sql: hoge.sql
    SELECT * FROM `hoge`;
```
~~~ plaintext: 書き方
``` sql: 書き方
    SELECT * FROM `hoge`;
```
~~~

#### diff表現

``` diff_javascript
    - console.log('xxxx');
    + console.log('hoge');
```
~~~ plaintext: 書き方
``` diff_javascript
    - console.log("xxxx");
    + console.log("hoge");
```
~~~

### Code spans - コードスパン
Google ChromeのConsole画面で、`console.log("hoge")`を実行した。
``` plaintext: 書き方
Google ChromeのConsole画面で、`console.log("hoge")`を実行した。
```

#### コードスパン内でバッククオートを使う
BigQueryで、```SELECT * FROM `hoge`;```というクエリを実行した。
``` plaintext: 書き方
BigQueryで、```SELECT * FROM `hoge`;```というクエリを実行した。
```

#### コードスパンの中身がCSSの`<color>`型
`#ffffff`
``` plaintext: 書き方
`#ffffff`
```
## テキストの装飾
### Headings - 見出し

#### これはH4タグです
``` plaintext: 書き方
#### これはH4タグです
```

### Emphasis / Strong Emphasis - 強調・強勢
私の出身は、**日本**です。 / 私の出身は、*日本*です。
``` plaintext: 書き方
私の出身は、**日本**です。 / 私の出身は、*日本*です。
```

### Strikethrough - 打ち消し線
~~私は、日本出身です。~~
``` plaintext: 書き方
~~私は、日本出身です。~~
```

### Details - 折りたたみ
<details><summary>サンプルコード</summary>

``` javascript: hoge.js
console.log ('hoge');
```
</details>

~~~ plaintext: 書き方
<details><summary>サンプルコード</summary>

``` javascript: hoge.js
console.log ('hoge');
```
</details>
~~~

### Note - 補足説明
:::note info
雨が降る予定です。
:::
:::note warn
強い雨が降る予定です。土砂崩れに注意してください。
:::

:::note alert
台風が接近しています、外出しないでください。
:::
``` plaintext: 書き方
:::note info
雨が降る予定です。
:::
:::note warn
強い雨が降る予定です。土砂崩れに注意してください。
:::

:::note alert
台風が接近しています。外出しないでください。
:::
```

## Lists - リスト
### Bullet List - 順序なしリスト
- あいうえお
- かきくけこ
- さしすせそ

``` plaintext: 書き方
- あいうえお
- かきくけこ
- さしすせそ
```

### Ordered List - 番号付きリスト
1\. aiueo
2\. kakikukeko
3\. sashisuseso

``` plaintext: 書き方
1\. aiueo
2\. kakikukeko
3\. sashisuseso
```

### Description List - 説明リスト
<dl>
  <dt>なす</dt>
  <dd>紫色の野菜</dd>
</dl>

``` html: 書き方
<dl>
  <dt>なす</dt>
  <dd>紫色の野菜</dd>
</dl>
```

### Checkbox - チェックボックス
- [x] はい
- [ ] いいえ
``` plaintext: 書き方
- [x] はい
- [ ] いいえ
```

## Blockquotes - 引用
> 淡路島は周囲を瀬戸内海と大阪湾に囲まれており、人形浄瑠璃なども有名です。
``` plaintext: 書き方
> 淡路島は周囲を瀬戸内海と大阪湾に囲まれており、人形浄瑠璃なども有名です。
```

## Horizontal rules - 水平線
あいうえお
***
かきくけこ
``` plaintext: 書き方
あいうえお
* * *
かきくけこ

その他の水平線のMarkdown記法
***
*****
- - -
---------------------------------------
```

## Links - リンク
[Bing](https://www.bing.com/?cc=jp "Bing")
[Google](https://www.google.com/)
[Yahoo!][Yahoo!] 

[Yahoo!]: https://www.yahoo.co.jp/
``` plaintext: 書き方
[Bing](https://www.bing.com/?cc=jp "Bing")
[Google](https://www.google.com/)
[Yahoo!][Yahoo!] 

[Yahoo!]: https://www.yahoo.co.jp/
```
## Images - 画像埋め込み

![500x500](https://place-hold.it/500x500)
<img width="250" src="https://place-hold.it/500x500">

``` plaintext: 書き方
![500x500](https://place-hold.it/500x500)
<img width="250" src="https://place-hold.it/500x500">
```

## テーブル
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| Hoge       | Hoge        | Hoge         |
``` plaintext: 書き方
| Left align | Right align | Center align |
|:-----------|------------:|:------------:|
| Hoge       | Hoge        | Hoge         |

※HTML形式で入力することも可能
```