HTMLより簡潔に簡単に書ける！マークダウンの解説とコード例

はてぶやWordPressなどの無料のブログを利用していると文章を強調したり、テーブルで内容を表示したい要望が発生すると思います。その際に文章に簡単な記法を追加すればhtmlに変換してくれるマークダウン（Markdown）の記法を紹介します

マークダウンとは

手軽に文章からマークアップ言語（html）を生成することができる記法になります。

見出しを生成

見出し(hタグ)を生成する場合は#(シャープ)を追記します。

マークダウン言語

# 見出し1
## 見出し2 
### 見出し3
#### 見出し4

生成されるhtml

<h1>見出し1</h1>
<h2>見出し2</h2> 
<h3>見出し3</h3>
<h4>見出し4</h4>

文章を強調する

**か__で囲った部分が太字として強調されます

マークダウン言語

**強調されます** もしくは __これも__

生成されるhtml
<strong>強調されます</strong>もしくは <strong>これも</strong>

リンクを設定する

[リンクのテキスト](リンクのアドレス)
で設定することができます。

マークダウン言語

[ゼロイチのリンク](https://programming-beginner-zeroichi.jp/ )

生成されるhtml

<a href="https://programming-beginner-zeroichi.jp/ ">ゼロイチのリンク</a>

画像を表示する

基本は　![alt名](URL "title(省略可能)")となります

マークダウン言語

![ゼロイチ](https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/2_Flat_logo_on_transparent_256.png "ゼロイチ画像")

生成されるhtml

<img src="https://s3-ap-northeast-1.amazonaws.com/images.programming-beginner-zeroichi.jp/uploads/2_Flat_logo_on_transparent_256.png" alt="ゼロイチ" title="ゼロイチ画像">

引用する

文頭に>を文章につける

マークダウン言語

>引用する１
>引用する２
>引用する３

生成されるhtml

<blockquote>
  <p>引用する１</p>
</blockquote>
<blockquote>
  <p>引用する２</p>
</blockquote>
<blockquote>
  <p>引用する３</p>
</blockquote>

水平線

アスタリスク、ハイフン、アンダーバーを3つ以上並べると水平線を表示します。

マークダウン言語

* * *
***
*****
- - -

生成されるhtml

<hr>
<hr>
<hr>
<hr>
- - -

### 表組み（テーブル表記）
各ブログツールによって違いますが、はてぶのテーブル表記は下記になります。

```html
|指定無し|左寄せになります|中央寄せになります|右寄せになります|
|--------|:-----|:------:|-----:|
|コンテンツ１     |コンテンツ２   |コンテンツ３     |コンテンツ４   |

<table>
<thead>
<tr>
<th>指定無し</th>
<th align="left">左寄せになります</th>
<th align="center">中央寄せになります</th>
<th align="right">右寄せになります</th>
</tr>
</thead>
<tbody>
<tr>
<td>コンテンツ１ </td>
<td align="left">コンテンツ２</td>
<td align="center">コンテンツ３</td>
<td align="right">コンテンツ４ </td>
</tr>
</tbody>
</table>