ブログやHTMLを書くときに、覚えやすく、執筆時間を早くするのに効率的な、軽量マークアップ言語　「Markdown記法（マークダウンきほう）」 の書き方のサンプル付き一覧です。

Markdown記法（マークダウンきほう）とは？

Markdownは、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。ジョン・グルーバー (Wikipediaより)

Markdown記法の特徴

この特徴から、ブログ、GitHubのRead.meなどでも利用されています。
編集の際に色々なエディタが利用できるのも特徴です。

Markdown記法のサンプル

実際のMarkdown記法のサンプルです。
このように書くことで、HTMLや見え方に変換されます。

Markdownk記法

# 見出し
## 見出しその2

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

HTML

<h1>見出し</h1>
<h2>見出し2</h2>

<ul>
<li>リスト1</li>
<li>リスト2</li>
<li>リスト3</li>
</ul>

見え方（実際の表示）

見出し

見出しその2

• リスト1
• リスト2
• リスト3

Markdownk記法の書き方一覧

最初に覚えておきたい【基本】

見出し　【#の数】

Markdownk記法

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

HTML

<h1>見出し1</h1>
<h2>見出し2</h2>
<h3>見出し3</h3>
<h4>見出し4</h4>
<h5>見出し5</h5>
<h6>見出し6</h6>

見え方（実際の表示）

段落と改行　【改行と半角スペース2以上】

段落は空行。
改行は行末で半角スペース2つ以上。

Markdownk記法

Markdown記法の段落サンプルです。

改行します。  
改行されました。

HTML

<p>Markdown記法の段落サンプルです。</p>
<p>
改行します。<br>
改行されました。
</p>

見え方（実際の表示）

Markdown記法の段落サンプルです。

改行します。
改行されました。

強調文字　【*で囲む】

Markdownk記法

*斜体*
**強調**

HTML

<em>斜体</em>
<strong>強調</strong>

見え方（実際の表示）

斜体
強調

リスト

Markdownk記法

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

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

HTML

<em>斜体</em>
<strong>強調</strong>

見え方（実際の表示）

• リスト1
• リスト2
• リスト3

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

リンク

Markdownk記法

自動リンク  
<https:uxbear.me>

インラインリンク  
[UX BEAR](https:uxbear.me "Title")

外部参照リンク  
[UX BEAR][A1]

[A1]:https:uxbear.me "Title"

見え方（実際の表示）

自動リンク

インラインリンク
UX BEAR

外部参照リンク
UX BEAR

慣れてきたら使えると便利【中級】

引用

Markdownk記法

> Markdownは、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。ジョン・グルーバー (Wikipediaより)

見え方（実際の表示）

Markdownは、文書を記述するための軽量マークアップ言語のひとつである。本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。ジョン・グルーバー (Wikipediaより)

画像

Markdownk記法

![ゆえっくま](https://uxbear.me/wp-content/uploads/2019/09/application-3399516_1920-150x150.jpg "サンプル")

見え方（実際の表示）

表（テーブル）

Markdownk記法

| th1 | th2 |
|---|---|
| td1 | td3 |
| td2 | td4 |

見え方（実際の表示）

th1	th2
td1	td3
td2	td4

Markdownk記法

| 左寄せ | センター寄せ | 右寄せ |  
|:---|:---:|---:|  
|1 |2 |3 |  
|4 |5 |6 |  

見え方（実際の表示）

左寄せ	センター寄せ	右寄せ
1	2	3
4	5	6

水平線

Markdownk記法

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

見え方（実際の表示）

---

打ち消し線

Markdownk記法

~~打ち消します~~

見え方（実際の表示）

打ち消します

こんな使い方もできる【応用】

コードブロック

バッククウォート(`)を３つ

```
function hey() {
  let max = 3;

  for (let i = 0; i < max; i++) {
    let twice = i * 2;
    console.log(i, twice, max);
  }
}
```

見え方（実際の表示）

function hey() {
  let max = 3;

  for (let i = 0; i < max; i++) {
    let twice = i * 2;
    console.log(i, twice, max);
  }
}

まとめ

ブログやHTMLを書くときに、覚えやすく、執筆時間を早くするのに効率的な、軽量マークアップ言語「Markdown記法（マークダウンきほう）」の書き方をご紹介しました。

Markdown記法の特徴

慣れるまでは少しだけ大変ですが、覚えると記事を書く時間の効率化ができ、執筆のストレスが減らすことができました。

ブログや、GitHubや技術コミュニティでも利用されているので、覚えておいて損はないと思います。

僕は、まずは日常のちょっとしたメモからMarkdown記法を始めてみたら、自然に使いこなせるようになりました。

関連書籍