qiita用Markdown記法

# はじめまして

地方でIT完全初心者の若者が、自分たちで簡単な物を作りながらITを学ぶ試みをはじめ、qiitaを開設しました。
初歩中の初歩の情報をまとめていくことになるかと思います。

今回はqiitaにおけるMarkdown記法について、メモを作成しました。Markdown記法のまとめ投稿なんてqiitaだけでも星の数ほどあると思いますが、これを言い出すと初心者にはなんにも投稿できないので、気にしない、気にしない。

# はじめに

IT初心者にとってMarkdownとは何なのか？から始まるでしょう。ITに触れるまで、いや、私に関してはこのqiita投稿をする今この瞬間までMarkdownとは縁がありませんでした。

Markdownとは何なのか？ということすら分かっていませんが、wikipediaによれば

> Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

>出典: フリー百科事典『ウィキペディア（Wikipedia）』

とのことです。
なるほど分からんね。
でもこれから学んでいければよし！

この先の書き方として、下記の通り統一します。

見本
↓
書き方（コード形式）

その他細かい説明は~~書けません~~書きません。ﾕﾙｼﾃ…。
ではいってみましょう！

# もくじ
1. [見出し](#1-見出し)
1. [リスト](#2-リスト)
1. [コード挿入](#3-コード挿入)
1. [リンク 画像 リンクカードの挿入](#4-リンク-画像-リンクカードの挿入)
1. [テーブル](#5-テーブル)
1. [引用](#6-引用)
1. [文字装飾](#7-文字装飾)
1. [補足説明](#8-補足説明)
1. [折りたたみ](#9-折りたたみ)
1. [水平線](#10-水平線)
1. [マークダウンエスケープ](#11-マークダウンエスケープ)
1. [ページをマークダウン形式で見る](#12-ページをマークダウン形式で見る)

#1 見出し
# h1
## h2
### h3
#### h4
##### h5　
###### h6

```markdown
# h1 
## h2 
### h3
#### h4 
##### h5 　
###### h6 
```

#2 リスト
- Disk型（まるちょん）リスト
- Disk型リスト
 - Disk型リストの入れ子
 - Disk型リストの入れ子
- Disk型リスト

```markdown
- Disk型（まるちょん）リスト
- Disk型リスト
 - Disk型リストの入れ子
 - Disk型リストの入れ子
- Disk型リスト
```

1. Decimal（数字）リスト
1. Decimalリスト
 1. Decimalリストの入れ子
 1. Decimalリストの入れ子
1. Decimalリスト

```markdown
1. Decimal（数字）リスト
1. Decimalリスト
 1. Decimalリストの入れ子
 1. Decimalリストの入れ子
1. Decimalリスト
``` 

#3 コード挿入

```html:index.html
<h1>Hello World.</h1>
```

>（空行）
\`\`\`html:index.html
\<h1>Hello World.\</h1>
\`\`\`
（空行）
と書いてるよ

```css:style.css
h1 {
  color: #ff0000;
}
```
>（空行）
\`\`\`css:style.css
h1 {
  color: #ff0000;
}
\`\`\`
（空行）
と書いてるよ


これは`コードのインライン表示の例`です。バッククォートで囲んでいます。　
コードのインライン表示でCSSのcolor型をしていすると`#ff0000`のように、コード末尾に色が表示されます。　

```markdown
これは`コードのインライン表示の例`です。バッククォートで囲んでいます。　
コードのインライン表示でCSSのcolor型をしていすると`#ff0000`のように、コード末尾に色が表示されます。　
```

#4 リンク 画像 リンクカードの挿入

[googleへのリンク](https://www.google.com/ "タイトル（ホバーすると表示するよ）")

```markdown
[googleへのリンク](https://www.google.com/　"タイトル（ホバーすると表示するよ）")
```

![画像の代替テキスト](https://cdn.qiita.com/assets/public/community-sponsers/yahoo-90872d123ce919fdab895bd4da7a48f6.png "yahoo")

```markdown
![画像の代替テキスト](https://cdn.qiita.com/assets/public/community-sponsers/yahoo-90872d123ce919fdab895bd4da7a48f6.png "yahoo")
```

https://www.goo.ne.jp/

```markdown
（空行）
https://www.goo.ne.jp/
（空行）
```

#5 テーブル

|右揃え|左揃え|中央揃え|
|--:|:--|:--:|
|右揃えになるよ|これは左揃えになるよ|この場合は中央揃え｜
|行揃えは2行目の:の位置で指定するのよ。|・・・いい？|絶対2行目で指定するんだからね？///|

```markdown
|右揃え|左揃え|中央揃え|
|--:|:--|:--:|
|右揃えになるよ|これは左揃え|この場合は中央揃え｜
|行揃えは2行目の:の位置で指定するのよ。|・・・いい？|絶対2行目で指定するんだからね？///|
```
#6 引用

>引用するときはこのように。
（改行）
>改行するときはその都度「>」を入れて
分かった？
（改行）

入れないとこうやって引用が解けるよ

```markdown
>引用するときはこのように。
（改行）
>改行するときはその都度「>」を入れて
分かった？
（改行）

入れないとこうやって引用が解けるよ

```

#7 文字装飾

*イタリック*（弱い強調） 
**太文字**（強調）
~~打ち消し~~　

```markdown
*イタリック*（弱い強調） 
**太文字**（強調）
~~打ち消し~~　
```

#8 補足説明

:::note info 
インフォメーション
note info
:::

:::note warn 
警告
note warn
:::

:::note alert
より強い警告 
note alert 
:::

```markdown
:::note info 
インフォメーション
note info
:::

※最後の:::は改行してね
```

```markdown
:::note warn 
警告
note warn
:::
```

```markdown
:::note alert
より強い警告 
note alert 
:::
```

#9 折りたたみ
<details><summary>ここを押してみて</summary><div>よばれてとびでてジャジャジャジャーン</div></details>

```markdown
<details><summary>ここを押してみて</summary><div>よばれてとびでてジャジャジャジャーン</div></details>

※ <div></div>はコード形式表示をしたい場合には必要、そうでない場合はいらないよ。今回はいらない例だね。
```
#10 水平線

一本目

***

二本目

---

どっちも一緒ね

```markdown

一本目

***

二本目

---

どっちも一緒ね

```

#11 マークダウンエスケープ

\`\`\`
あれ？？マークダウンが効かない？！
\`\`\`

\- リストにならない？？！

\# なんでえええええ

```markdown
\`\`\`
あれ？？マークダウンが効かない？！
\`\`\`

\- リストにならない？？！

\# なんでえええええ

```

#12 ページをマークダウン形式で見る
URLの末尾に.mdをつけてみるとマークダウン形式のページに早変わり〜


# まとめ
以上、調べながらまとめてみました。
これからたくさん使用する中でなれていければいいなと思います。
まだまだほかにもマークダウンルールは存在しますが、それらを使いこなすのはまた別のお話。