MarkDown記法【初心者によるまとめ】

MarkDownの基礎文法についてまとめています。
先人達の記事を写経して勉強するために作成しました。
記載例に出てくる記号として、  

```
　␣　：半角スペース 
　↵ 　：改行
```

を表しています。

手を動かさなければ覚えない。
初心者さんは、この記事をMarkDown記法を用いて作成することで、ある程度基礎がつくんではないでしょうか。と、初心者が言っています。  

なお、MarkDown記法を勉強したいって方は、「VSCode」を使うと、

　左のタブにMarkDown記法
　右のタブにプレビュー

という使い方ができて、わかりやすいですよ。

あとは、「Typora」というソフトを使うと、MarkDown記法で記述するのにMarkDownにならないという不思議体験ができます。（便利）

とりあえず試してみたいって人は、オンラインツールの[StackEdit](https://stackedit.io/app)を利用すればよかです。



## 1.見出しの書き方

行頭に`#`と半角スペースを挿入すると、見出しになる。
＃の数によって、見出しレベルが変わります。

**【記載例】**

```
#␣レベル1
##␣レベル2
###␣レベル3
####␣レベル4
#####␣レベル5
######␣レベル6
```

**【結果】**
# レベル1
## レベル2
### レベル3
#### レベル4
##### レベル5
###### レベル6



## ２.空白（スペース）の挿入

通常、空白を挿入する際は「スペース」を入力しますが、MarkDownでは4種類の空白があります。

**【記載例】**

```
空白なしの行
&thinsp;&nbsp;より狭い空白
&nbsp;半角スペースと同じサイズの空白
&ensp;半角スペースより少し広めの空白
&emsp;半角スペースよりさらに広めの空白　全角スペースとほぼ同じ幅
```

**【結果】**  
空白なしの行
&thinsp;\&nbsp;より狭い空白
&nbsp;半角スペースと同じサイズの空白
&ensp;半角スペースより少し広めの空白
&emsp;半角スペースよりさらに広めの空白　全角スペースとほぼ同じ幅


## ３.改行の挿入

改行方法には、

- 文末にスペース２個入れる方法
- `<br>`タグを挿入する方法

があります。

**【記載例】**

```
文末にスペース２個入れる方法␣␣
brタグを挿入する方法<br>
最終行
```
**【結果】**
文末にスペース２個入れる方法
brタグを挿入する方法<br>最終行



## ４.エスケープの挿入

前述してきた「\&emsp;」や、「\<br>」を文章中で入力すると、「空白」や「改行」になってしまいます。
その際は、バックスラッシュ`\`を入力してやればよかとです。

**【記載例】**

```
空白を挿入するときは、「\&emsp;」と入力します。
改行を挿入するときは、「\<br>」と入力します。
```
**【結果】**
空白を挿入するときは、「\&emsp;」と入力します。
改行を挿入するときは、「\<br>」と入力します。



## ５.文字装飾
#### *強調タグ*  

`*`か`_`で文字を囲えば、強調タグ（emタグ）が適用されます。
Qiitaでは、イタリック体が適用されるはずなんだけど、されない。

**【記載例】**

```
イタリック
*イタリック*  
_イタリック_
```

**【結果】**
イタリック
*イタリック*
_イタリック_

#### **太字**  

`**`か`__`で文字を囲えば、字が太くなります。  

**【記載例】**

```
ふとし
**ふとし**
__ふとし__
```
**【結果】**
ふとし
**ふとし**
__ふとし__


#### ***強調＋太字***  

`***`か`___`で囲うのだ。

**【記載例】**

```
強調ふとし
***強調ふとし***
___強調ふとし___
```
**【結果】**
強調ふとし
***強調ふとし***
___強調ふとし___


#### 打消し

`~~`で囲うのだ  

**【記載例】**

```
打消さない
~~打消し~~
```
**【結果】**
打消さない
~~打消し~~


## ５.リスト

#### 順序なしリスト

`-`、`+`、`*`を先頭に記載する。
基本的には、同じ記号を続けて使う。
入れ子のリストにしたい場合は、「タブ」か「半角スペース４つ」で可能。

***【記載例】***

```
- リスト
+ リスト
* リスト
 [Tab]  - 入れ子
 [Tab]　␣␣␣␣- 入れ子の子
```

***【結果】***

- リスト
+ リスト
* リスト
	- 入れ子
  	    - 入れ子の子

#### 番号付きリスト

1,2,3と番号付きのリストは…記載例をみてください。
実は、「数字」に意味はないので、「3」のところを「2000」にしてみても大丈夫。
~~何が大丈夫かはわからない。~~

***【記載例】***

```
1. これが
2. 番号付き
2000. リストである
```

***【結果】***
1. これが
2. 番号付き
3. リストである



#### チェックボックス

記載例みたいに書くよ♡

***【記載例】***

```
- [ ] ノーチェック
- [x] チェック！
```

***【結果】***

- [ ] ノーチェック
- [x] チェック！
  

## ６.引用

`>`に続いて半角スペースで引用できます。
2つ以上置くと多重引用になります。

***【記載例】***

```
> 引用
>> 多重引用
>>> 多多重引用
>>>> 多多多重引用
```

***【結果】***
> 引用
> > 多重引用
> > > 多多重引用
> > >
> > > > 多多多重引用



## ７.水平線

3つ以上の`-`,`*`,`_`を入力する。
間に半角スペースがあってもよか。

***【記載例】***

```
___
***
---
* * * *
```

***【結果】***
___
***
---
* * * *



## ８.コード

#### インライン表示

コードをインライン表示する場合は、「`」で囲む。
コード表示内ではMarkdownは効かず、空白やタブなどもそのまま表示されます。

***【記載例】***

```
これ→`MarkDown<br>MarkDown`
```

***【結果】***
これ→`MarkDown<br>MarkDown`


#### コードブロック

コードブロックを生成するには、「```」か「~~~」で囲む。

***【記載例】***

```
​```
<br>
この黒いのがコードブロック
<br>
​```
```

***【結果】***

```
<br>
この黒いのがコードブロック
<br>
```



## ９.テーブル

`-`と`｜`を組み合わせてテーブルを作成します。
`-`は3つ以上ならおｋ。
両端の`|`は省略可能。

***【記載例】***

```
|りんご|バナナ|牡蠣|
|-----|-----|---|
|２個|１房|３牡蠣|
```

***【結果】***

| りんご | バナナ | 牡蠣   |
| ------ | ------ | ------ |
| ２個   | １房   | ３牡蠣 |



## 10.リンク

#### 自動リンク

URLを`<>`で囲む。

***【記載例】***

```
ググレ(<http://google.com>)カス
```

***【結果】***
ググレ(<http://google.com>)カス



#### インラインリンク

`[]`でテキストを囲んだうえで`()`でURLを囲む。

***【記載例】***

```
[ググレ](http://google.com)カス
```

***【結果】***
[ググレ](http://google.com)カス



## 11.画像挿入

リンクのMarkDown記法の頭に`!`を付けると画像を表示させることができます。
`[]`内のテキストは画像のalt属性、`()`内は画像のパスになります。

***【記載例】***

```
![hachi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482486/37f86ae9-c325-24cc-7ae4-a6332baa1766.png)
```

***【結果】***
![hachi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/482486/37f86ae9-c325-24cc-7ae4-a6332baa1766.png)



## 12.HTMLタグ

Markdown記法はもともと、ホームページを簡単に書くことを目的として作成されています。
よって、MarkDown記法にない装飾等は、HTMLタグが使えますよ。

***【記載例】***

```
<div><font size="1" color="red">フォントサイズと色変えてみた</font></div>
<div align="center">真ん中に寄せてみた</div>
```

***【結果】***

<div><font size="1" color="red">フォントサイズと色変えてみた</font></div>

<div align="center">真ん中に寄せてみた</div>



## 最後に

エディタによって癖があるので、自分でいろいろ試してみてください。

Qiita初投稿なので、至らないところもあるとおもいますが、なにとぞよろしくおねがいします。



### 参考記事

- [Markdown記法についてまとめてみた](https://qiita.com/toshihirooya/items/949f571b85cd7c297cca)
- [Markdown文法まとめ](https://qiita.com/higuma/items/3344387e0f2cce7f2cfe)
- [Markdown再入門](https://qiita.com/t_wkm2/items/372fd1c851c4d221b1f3)