Qiitaでも使える！Markdownの基本的な書き方と、ちょっと楽するポイント

# Markdown内のHTML

Markdownの構文はHTMLで書き換えできます。

## ブロックレベルのタグ
- div
- table
- pre
- p
- li

等々。
実際に使ってみると、こんな感じになります。

```
<table>
    <tr>
        <th>Foo</th>
        <th>HOGE</th>
        <th>*HOGE*</th>
    </tr>
    <tr>
        <td>Foo</td>
        <td>HOGE</td>
        <td>*HOGE*</td>
    </tr>
</table>
```

<table>
    <tr>
        <th>Foo</th>
        <th>HOGE</th>
        <th>*HOGE*</th>
    </tr>
    <tr>
        <td>Foo</td>
        <td>HOGE</td>
        <td>*HOGE*</td>
    </tr>
</table>


ただし、ブロックレベルのタグだと、タグ内ではMarkdownスタイルは使えません。

## スパンレベルのタグ
<ul>
<li>span
<li>cite
<li>del
<li>img
<li>a
</ul>
等々。

    <cite>**Hello World**</cite>

<cite>**Hello World**</cite>

スパンレベルのタグ内なら、Markdownスタイルも使えちゃいます。

## 特殊文字のエスケープ
- & : &amp;amp;
- < : &amp;lt;

HTMLならリンクに含まれた`&`

    <a href="http://images.google.com/images?num=30&q=larry+bird">Link</a>


著作権記号

    &amp;copy;
&amp;copy;
&copy;

タグ

    &lt;a>hogehoge&lt;/a>

&lt;a>hogehoge&lt;/a>
<a>hogehoge</a>

# Markdown内のブロック要素

## 段落・改行
段落の定義は **「1行以上の連続したテキスト」**
改行するには、1行あける必要があります。
つまり **「2個改行」** を挟めばいいわけです。

ただし、Qiitaだと、1個で改行できちゃいました。

## 見出し
見出しの書き方は2種類あります。

### Setext形式
```
This is an H1
=============

This is an H2
-------------
```

### Atx形式 
```
# This is an H1

## This is an H2

### This is an H3
```
`#`の数が増えるほど、小さい見出しになります。
`#`を最後に付け加えれば、見出しを綴じることもできます。

## 引用

```
>　引用したい文
```
>引用したい文

- 複数の`>`を並べると入れ子に
- Markdown要素が使用可

実際に試してみるとこんな感じになりました。

```
> This is a blockquote with two paragraphs.
> # number
> > 1. one
> > 2. two
> > 3. three
```
> This is a blockquote with two paragraphs.
> # number
> > 1. one
> > 2. two
> > 3. three

## リスト

### 番号なしリスト

`* + - ` をリストマーカーに使える。

```
* アスタリスク
+ プラス
- ハイフン
```
* アスタリスク
+ プラス
- ハイフン

### 番号付きリスト

#### Markdown

```
1. one
2. two
3. three
```
1. one
2. two
3. three

実は1つめの番号以外は、順番と違っていても、問題ないみたいです。
これでも同じ表示になりました。

```
1. one
5. two
2. three
```
1. one
5. two
2. three

#### HTML

```
<ol>
<li>one
<li>two
<li>three
</ol>
```
<ol>
<li>one
<li>two
<li>three
</ol>

また、リストの要素に
- 引用を入れるなら、1インデント。
- コードを入れるなら、2インデント。

```
*   A list item with a blockquote:
    > This is a blockquote
> inside a list item.

*   A list item with a code block:
        <code goes here>
```
表示するとこんな感じ。


*   A list item with a blockquote:
    > This is a blockquote
> inside a list item.

*   A list item with a code block:

        <code goes here>


`数字.`をそのまま表示する場合は、バックスラッシュを挟んで`数字\.`とすればオッケーです。

## コードブロック

**各行を1つのタブでインデント**すると、次のようなソースコードのブロックを作れます。

    こんな感じ
    # 全部の文字がそのまま表示される
    &amp;

HTMLだとこれに対応します。

    <pre><code>
    こんな感じ
    # 全部の文字がそのまま表示される
    &amp;
    </code></pre>

HTMLだと`&amp；`等が`&`として解釈されちゃいます。
一方、Markdownのコードブロックだと、その辺の文字をHTMLエンティティに勝手に変換してくれるので便利！

長いコードなら、全部インデントするの面倒ですし\`\`\` でコード囲った方が楽そうです。
しかし1・2行のコードなら、インデントした方が楽できるかもしれません。

## 水平線

水平線`<hr />`(HTML)ってこんなもの↓

<hr />

これをMarkdownだと`*`、`-`、`_`のどれかを3つ並べるだけで書けます。

# Markdown内のスパン要素

## リンク

`[リンクの表示名](URL "タイトル")`

ただし、タイトルはリンクにカーソルを合わせたときに表示される名前。
タイトルがなければ、URLが表示されます。

    This is [an example](http://example.com/ "Title") inline link.

This is [an example](http://example.com/ "Title") inline link.

---
`[リンクの表示名][ID]`

とすると、`[ID]`に設定したURLに飛ぶリンクが作れる。
`[ID]`の設定は

`[ID名]:URL "タイトル"`

でできます。
`""`は`''`、`()`でも代用できます。
またこの記述は実際には表示されないので、ご心配いりません。

    [id]: http://example.com/  "Optional Title Here"

    This is [an example][id] reference-style link.


[id]: http://example.com/  "Optional Title Here"

This is [an example][id] reference-style link.

---

「ID名」を「リンクの表示名」にすれば、`[ID]`の中を省略可能です。

I get 10 times more traffic from [Google][] than from
[Yahoo][] or [MSN][].

  [google]: http://google.com/        "Google"
  [yahoo]:  http://search.yahoo.com/  "Yahoo Search"
  [msn]:    http://search.msn.com/    "MSN Search"

## 強調

`_　*` で文字を挟むと、強調できます。

1個なら *斜め* に

    *moji*
*moji*

2個なら __太字__ に

    **moji**
**moji**

記号を表示したいなら、`\`を付けてエスケープしておきましょう。

    \*\*moji\*\*
\*\*moji\*\*

## インラインのコード

    `コード`

とすると、段落内でソースコードをそのまま表示できます。

    Use the `printf()` function.

Use the `printf()` function.

コード内の`` ` ``をそのまま表示するには、
コードを囲う記号を` `` `に変えればオッケーです。

    Use the `` `printf()` `` function.

Use the `` `printf()` `` function.

## 画像



`![画像名](画像へのパス,)`

    ![image.png](https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google")


![image.png](https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google")

---

`![画像のタイトル][ID名]`

リンク同様、こうすることでIDに設定したURLにある画像とタイトルを表示できます。

    [id2]:https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google"

    ![image.png][id2]


[id2]:https://qiita-image-store.s3.amazonaws.com/0/298418/6fd756fc-eae9-9a2a-17a0-7968dae5de97.png "Google"

![image.png][id2]


## 自動リンク
メールアドレスやURLを`<>`で囲えば、勝手にリンクを作ってくれます。

    <hogehoge@hoge.com>

    <http://example.com/>


<hogehoge@hoge.com>

<http://example.com/>