個人メモ：Qiita Markdown for 記事作成

## 記事概要
この記事では、Qiitaで記事を作成するときに使う書き方をまとめます。

「書き方」というタグのついたコードブロックの内容を、
Qiitaの投稿編集の本文にコピペすれば同じ結果が得られるはずです。

<br/>

## 目次
　- **[見出し（Heading）](#見出し-heading)**
　- **[目次をつける](#目次をつける)**
　- **[強調](#強調)**
　- **[コードブロック](#コードブロック)**
　- **[画像の中央配置](#画像の中央配置)**

<br/>

## 見出し （Heading）
#(シャープ)の数で大きさが変わります。
```:書き方
# h1
###### h6
```
# h1
###### h6

<br/>

## 目次をつける
リンクになっていて、クリックすると対象の**見出し**に飛んでくれます。
（事前に飛ばし先となる見出しを用意してください）

```:書き方
[目次です](#目次)
```
[目次です](#目次)

:::note
[]の中は**任意の文字**、()の中は最初に「**#**」をつけて、
その後に飛ばし先となる**見出し**を入れてください。
:::

また()の中の飛ばし先の指定にも以下のようなルールがあります。
> アルファベットはリンク先が大文字でも、全部小文字で表現する
> 半角スペース(` `)は「-」に書き換える
> `(`, `)`, `:` などの記号は全部ないものとして扱う
> 引用: [Qiita記事の目次をつける方法](https://qiita.com/konyaru/items/ffd0b7edb11dfeb98a3f)

例えば本記事の[見出し（Heading）](#見出し-heading)は以下の書き方になっています。
```:書き方
[見出し（Heading）](#見出し-heading)
```

<br/>

## 強調
任意の文章を強調する。

:::note
重要
:::

:::note warn
警告
:::

:::note alert
危険
:::

```:書き方
:::note
重要
:::

:::note warn
警告
:::

:::note alert
危険
:::
```

<br/>

## コードブロック
コードフェンスで囲むだけ。
コードフェンスは「` ``` `」か「`~~~`」のこと。
~~~:書き方
```
「```」で囲む
```
~~~
　⬇︎
```
「```」で囲む
```

<br/>

* ### タグをつけたい
最初のコードフェンスに「`:`」をつけて、文字を続ける。
~~~:書き方
```:タグ
「:」をつけて文字を続ける
```
~~~
　⬇︎
```:タグ
「:」をつけて文字を続ける
```

<br/>

* ### コードブロック内で使用している言語を指定する
最初のコードフェンスに続けて言語を指定すると、そのコードブロック内は指定された言語であると認識して簡単な色付けをしてくれる。
~~~php:php
echo "hello"
~~~

~~~JS:js
console.log("hello")
~~~

~~~ruby:ruby
puts "hello"
~~~
⬇︎
~~~:書き方
# タグ部分(「:~~」)はつけなくていい

```php:php
echo "hello"
```

```JS:js
console.log("hello")
```

```ruby:ruby
puts "hello"
```
~~~

<br/>

* ### 差分を示したい
まず最初のコードフェンスに「`diff`」を続けます。
そして<font color="Crimson">追加</font>を表したいときは「<font color="Crimson">+</font>」を、
<font color="ForestGreen">削除</font>を表したいときは「<font color="ForestGreen">-</font>」を、行の先頭につける。

```diff:php
- echo "hello"
+ echo "bye"
```
　⬇︎
~~~:書き方
# タグ部分(:php)はつけなくていい

```diff:php
- echo "hello"
+ echo "bye"
```
~~~

<br/>

* ### コードブロック内で使用している言語を指定 ＋ 差分を表示
最初のコードフェンスに「`diff`」を続けて、その後に「`_`」をつけて言語を指定する。
「<font color="Crimson">+</font>」「<font color="ForestGreen">-</font>」もつけてください。
```diff_php:php
- echo "hello"
+ echo "bye"
```
　⬇︎
~~~:書き方
# タグ部分(:php)はつけなくていい

```diff_php:php
- echo "hello"
+ echo "bye"
```
~~~

<br/>

## 画像の中央配置
* ### 表にして中央配置
|平成　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/d5e6244b-6b05-acc3-df8f-9a657fa5ad80.png" width="140">|

```:書き方
|平成　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/d5e6244b-6b05-acc3-df8f-9a657fa5ad80.png" width="140">|
```

<br/>
<br/>

* ### 横並びにしたい画像のサイズが違う ＋ 「width / height」でサイズを変えたくない

例：
ただ横並びにしただけだとサイズの違いが気持ち悪い
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/d5e6244b-6b05-acc3-df8f-9a657fa5ad80.png" width="140"> <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/8031a5e4-31be-37b9-39ba-371bae514e08.png" width="120">
<br/>

　⬇︎　表にして誤魔化す
 <br/>
|平成　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|令和　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/d5e6244b-6b05-acc3-df8f-9a657fa5ad80.png" width="140">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/8031a5e4-31be-37b9-39ba-371bae514e08.png" width="120">|


```:書き方
※ 例のためにwidthで画像のサイズをずらしています。

|平成　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|令和　　　　　　　　  　　　　　　　　   　　　　　　　　　　　　　　　　　　　　　|
|:-:|:-:|
|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/d5e6244b-6b05-acc3-df8f-9a657fa5ad80.png" width="150">|<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/8031a5e4-31be-37b9-39ba-371bae514e08.png" width="120">|
```

参考記事：[Qiitaの記事を素敵にするテクニック](https://qiita.com/Sicut_study/items/5587aaea0de1086b4b76)

<br/>
<br/>

他にも画像の中央寄せは以下のようにすることもできます。
<br/>

<img width=40%><img width=20% src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3736521/d5e6244b-6b05-acc3-df8f-9a657fa5ad80.png">

<br/>

見ての通り左に線が入り、気持ち悪いのであまり使っていません。
<br/>
この方法を本記事に載せると丸パクリになってしまうので、
方法を知りたい方は以下の記事をご覧ください。

参考記事：[[Qiita] 画像を中央寄せにする](https://qiita.com/Meshida/items/e1a6dcd582e2b44f4489)

<br/>

## 参考記事まとめ

https://qiita.com/Qiita/items/c686397e4a0f4f11683d

https://qiita.com/iiokazuya/items/21ae40c1ee8ec9acd484

https://qiita.com/Sicut_study/items/5587aaea0de1086b4b76

https://qiita.com/koshishirai/items/a86ce3bb569cc4652e2f

https://qiita.com/konyaru/items/ffd0b7edb11dfeb98a3f

https://qiita.com/Yarakashi_Kikohshi/items/6ab5122acb2c8be83946

https://qiita.com/Meshida/items/e1a6dcd582e2b44f4489