Markdown記法でQiitaに初投稿

## Qiitaの投稿画面
Qiitaに初投稿です。

投稿画面は下図のようになっています。
「エンジニアに関わる知識をMarkdown記法で書いて共有しよう」のメッセージがプレッシャーをかけますね。。。
![Qiita_Edit_Post_Screen_01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1610480/0b93b8ea-f25c-8417-3d5c-2316d668d1ab.png)

気にせずに、今回はエンジニア向けではなく、自分も含めたQiitaの初心者、またはMarkdownで記述したことのない人向けに書きたいと思います。

左側の領域にMarkdown記法で記事を書くと、右側の領域のプレビュー表示されます。
![Qiita_Edit_Post_Screen_02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1610480/548f37c9-0482-fea4-31a5-3fa924aaadf9.png)

記事は「Qiitaに投稿」を押すまでは、下書き状態を自動保存してくれるようです。
![Qiita_Edit_Post_Screen_03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1610480/1139d36e-b11f-b8a7-ace0-1b56f6094c6f.png)

## Markdownとは
Qiitaでの投稿は、基本的に`Markdown`記法になります。
仕事でWebに携わっていない方であれば、あまり目にすることはない言語だと思います。

Markdownは、HTMLのタグや記法を知らなくても、簡単な記述ルールに従って文章を作成すると、自動でHTMLに変換され、装飾された読みやすい文章になります。

以下に基本的なMarkdown記法を自分のメモも兼ねて記載します。

## 見出し
レベルに応じて1～6個の`#`を先頭に付けて見出しを記述します。
### （Markdown）
	# 見出し1
	## 見出し2
	### 見出し3
	#### 見出し4
	##### 見出し5
	###### 見出し6

### （表示）
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6

## 段落
行間に空白の行を入れると段落になります。

### （Markdown）
	段落1
	
	段落2

### （表示）
段落1

段落2

## 装飾
`*`、または`_`で該当文字を囲みます。個数によって表示が異なります。

### （Markdown）

	Text *Italic* Text
	Text **Bold** Text
	Text ***Italic & Bold*** Text

### （表示）
Text *Italic* Text
Text **Bold** Text
Text ***Italic & Bold*** Text

## リンク
`[リンクテキスト](URL)`で記述します。

### （Markdown）
	[Qiita](http://qiita.com)

### （表示）
[Qiita](http://qiita.com)

タイトル（マウスホバーで表示する文字）を入れる場合は、`[リンクテキスト](URL "Title")`と記述します。

### （Markdown）
	[Qiita](http://qiita.com "Title")

### （表示）
[Qiita](http://qiita.com "Title")

## 画像
リンクの記述の先頭に`!`を付けて、`![代替テキスト](画像のURL)`とすると画像の記述になります。

### （Markdown）
	![Image_Sample](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1610480/37386ddd-e570-e215-b0f2-968624a3a7f1.png)

### （表示）
![Image_Sample](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1610480/37386ddd-e570-e215-b0f2-968624a3a7f1.png)


## リスト
文頭に`*`、`+`、`-`のいずれかを入れます。
インデントさせたい場合は、リストの先頭にタブを入れます。

### （Markdown）
	* リスト1
	* リスト2
	* リスト3
		* リスト3-1
		* リスト3-2
		* リスト3-3

### （表示)

* リスト1
* リスト2
* リスト3
	* リスト3-1
	* リスト3-2
	* リスト3-3

番号付きリストにしたい場合は、`数字.（半角ドット）`を先頭に付けます。
ちなみに、リストを挿入する際は、 リストの上下に空行がないと正しく表示されません。また`数字.`の後にはスペースが必要とのこと。

### （Markdown）

	1. 番号付きリスト1
	2. 番号付きリスト2
	3. 番号付きリスト3
		1. 番号付きリスト3-1
		2. 番号付きリスト3-2
		3. 番号付きリスト3-3

### （表示）

1. 番号付きリスト1
2. 番号付きリスト2
3. 番号付きリスト3
	1. 番号付きリスト3-1
	2. 番号付きリスト3-2
	3. 番号付きリスト3-3

## 引用
引用文は、先頭に`>`を入れます。
### （Markdown）
	> 引用文です。

### （表示）
> 引用文です。

## 表（テーブル）
表は少し作成しにくくて、`-`と`｜`を組み合わせて作成します。
`:`を利用してセル内の文字の位置を変更できます。

### （Markdown）
	| 左揃え | 中央揃え | 右揃え |
	| :---- | :---: | ---: |
	| セル1 | セル2 | セル3 |

### （表示）
| 左揃え | 中央揃え | 右揃え |
| :---- | :---: | ---: |
| セル1 | セル2 | セル3 |

## Pre記法
整形済みテキストを書くための記法となります。HTMLでいうところの`<pre>`。
行頭に4つ以上の半角スペースか1つ以上のタブを入れます。
※分かりづらいですが、下記の（Markdown）と（表示）の各行の先頭にはタブが入ってます。Preなので表示は一緒。

### （Markdown）
	function Test(props) {
		return (
			<a href ="#"><span>{props.name}</span></a>
		)
	}

### （表示）
	function Test(props) {
		return (
			<a href ="#"><span>{props.name}</span></a>
		)
	}


## 参照
Markdownの種類はまだまだありますが、上記だけでもMarkdownで記事がかけると思います。
もっとMarkdownの記述について調べたい方は、下記の記事をご参照ください。

* [Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF)
* [Markdown記法 サンプル集](https://qiita.com/tbpgr/items/989c6badefff69377da7#%E8%A6%8B%E5%87%BA%E3%81%97)