2 flat logo on transparent 256
2018-02-22

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

Efficiency

はてぶや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="ゼロイチ画像">

引用する

文頭に>を文章につける

マークダウン言語

>引用する1
>引用する2
>引用する3
生成されるhtml

<blockquote>
  <p>引用する1</p>
</blockquote>
<blockquote>
  <p>引用する2</p>
</blockquote>
<blockquote>
  <p>引用する3</p>
</blockquote>

水平線

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

マークダウン言語

* * *
***
*****
- - -
生成されるhtml

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

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

```html
|指定無し|左寄せになります|中央寄せになります|右寄せになります|
|--------|:-----|:------:|-----:|
|コンテンツ1     |コンテンツ2   |コンテンツ3     |コンテンツ4   |
<table>
<thead>
<tr>
<th>指定無し</th>
<th align="left">左寄せになります</th>
<th align="center">中央寄せになります</th>
<th align="right">右寄せになります</th>
</tr>
</thead>
<tbody>
<tr>
<td>コンテンツ1 </td>
<td align="left">コンテンツ2</td>
<td align="center">コンテンツ3</td>
<td align="right">コンテンツ4 </td>
</tr>
</tbody>
</table>
前の記事
次の記事