Markdown の書き方 - 基本構文

Markdown とは、Webで文章を書く人のためのテキスト→HTML変換ツールです。

例えば、HTMLで見出しを書く場合には以下のように記述する必要がありますが……

<h1>見出しだよ〜</h1>

Markdownだと、これだけでOKですっ！

# 見出しだよ〜

他にも、「リスト」「テーブル」……などをテキストからHTMLへ変換することができるので、ここではそれらの記述方法「Markdown の書き方」を紹介します。

詳細はこちらの公式サイトをご覧ください。

• https://daringfireball.net/projects/markdown/

見出し

まずは、見出し（ヘッダー)の書き方をみてみましょう。

Markdown

# 見出し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>

段落

Markdown

Markdownで段落を使う場合は……
普通にテキストを記述すれば、OKです。

改行を挟むと別の段落になります。

HTML

<p>Markdownで段落を使う場合は……<br />
普通にテキストを記述すれば、OKです。</p>
<p>改行を挟むと別の段落になります。</p>

引用

Markdown

> ここから
> 引用だよ。引用。

HTML

<blockquote>
<p>ここから<br />
  引用だよ。引用。</p>
</blockquote>

強調

Markdown

テキストを強調する場合は *強調！*
あるいは、__強調__
と記述します。

HTML

<p>テキストを強調する場合は <em>強調！</em><br />
あるいは、<strong>強調</strong><br />
と記述します。</p>

リスト

Markdown

* あ
* い
* う

+ あ
+ い
+ う

- あ
- い
- う

HTML

<ul>
<li>あ</li>
<li>い</li>
<li>う</li>
</ul>

Markdown

1. A
2. B
3. C

HTML

<ol>
<li>A</li>
<li>B</li>
<li>C</li>
</ol>

リンク

Markdown

リンク → [リンクのテキスト](https://webkaru.net/)

タイトル付きのリンク → [リンクのテキスト](https://webkaru.net/ "Webプログラミング入門")

HTML

<p>リンク → <a href="https://webkaru.net/">リンクのテキスト</a></p>
<p>タイトル付きのリンク → <a href="https://webkaru.net/" title="Webプログラミング入門">リンクのテキスト</a></p>

画像

Markdown

![alt text](/path/to/img.jpg "Title")

HTML

<p><img src="/path/to/img.jpg" alt="alt text" title="Title" /></p>

テーブル

テーブルの書き方です。

Markdown

| ヘッダー1 | ヘッダー2 | ヘッダー3 |
| -------- |:-------:| -------:|
| セル | センター | 右寄せ |
| セル | センター | 右寄せ |

HTML

<table>
<thead>
<tr>
<th>ヘッダー1</th>
<th align="center">ヘッダー2</th>
<th align="right">ヘッダー3</th>
</tr>
</thead>
<tbody>
<tr>
<td>セル</td>
<td align="center">センター</td>
<td align="right">右寄せ</td>
</tr>
<tr>
<td>セル</td>
<td align="center">センター</td>
<td align="right">右寄せ</td>
</tr>
</tbody>
</table>