分かりやすく、使いやすく。

Markdown記法まとめ

スポンサーリンク

Markdown で使用可能な記述方法のまとめです。

  1. 見出し <h1><h2><h3>…<hn>
  2. 強調 <strong>
  3. テーブル <table><tr><td>
  4. リンク <a>
  5. 改行 <br>
  6. 水平線(横棒) <hr>
  7. リスト(箇条書き) <ul>
  8. リスト(箇条書き)のネスト <ul>
  9. リスト(数字付き) <ol>
  10. リスト(数字付き)のネスト <ol>
  11. 画像 <img>


見出し <h1><h2><h3>…<hn>

Markdown(サンプルコード)
1
2
3
# h1見出し
## h2見出し
### h3見出し 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
3
<h1>h1見出し</h1>
<h2>h2見出し</h2>
<h3>h3見出し</h3> 

強調 <strong>

Markdown(サンプルコード)
1
**強調する文字列** 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
<strong>強調する文字列</strong> 

テーブル <table><tr><td>

Markdown(サンプルコード)
1
2
3
4
|見出し1|見出し2|見出し3|
|:-|-:|:-:|
|左寄せ|右寄せ|中央寄せ|
|コロンが左だから左寄せ|コロンが右だから右寄せ|コロンが両方だからセンタリング| 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
<thead>
<tr>
<th style="text-align: left;">見出し1</th>
<th style="text-align: right;">見出し2</th>
<th style="text-align: center;">見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left;">左寄せ</td>
<td style="text-align: right;">右寄せ</td>
<td style="text-align: center;">中央寄せ</td>
</tr>
<tr>
<td style="text-align: left;">コロンが左だから左寄せ</td>
<td style="text-align: right;">コロンが右だから右寄せ</td>
<td style="text-align: center;">コロンが両方だからセンタリング</td>
</tr>
</tbody>
</table> 

↓画面に表示するとこうなります。(色や枠線は別途 CSS で設定しています。)

見出し1 見出し2 見出し3
左寄せ 右寄せ 中央寄せ
コロンが左だから左寄せ コロンが右だから右寄せ コロンが両方だからセンタリング

リンク <a>

[]内に表示したいテキストを記述し、()内にURLを記述します。

Markdown(サンプルコード)
1
[バヤシタ](http://bayashita.com/) 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
<a href="http://bayashita.com/">バヤシタ</a> 

↓画面に表示するとこうなります。

バヤシタ

ちなみに markdown 記法ではリンクに target 属性を指定できないので、別ウインドウ表示にするために target="_blank" を設定するには、markdown 記法ではなく、通常の HTML タグで記述する必要があります。

改行 <br>

同じ段落の中で改行したい場合は、文末に 2 個以上スペースを記述して 1 回改行します。( 2 回以上改行すると段落が別になります。)

Markdown(サンプルコード)
1
2
文末に2個以上スペースを入れると改行します。→  
改行しました。 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
文末に2個スペースを入れると改行します。→<br />
改行しました。 

↓画面に表示するとこうなります。

文末に2個スペースを入れると改行します。→
改行しました。

水平線(横棒) <hr>

水平線を挿入するには、- (ハイフン),* (アスタリスク), _ (アンダースコア)のいずれかを3個以上連続で記述します。

Markdown(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
以下はすべて水平線になります。
***
___
---
3個以上並べてもOKです。
*********************
_____________________
---------------------
間のスペースは無視されます。
* * * * * * * * * * *
- - - - - - - - - - - 
_ _ _ _ _ _ _ _ _ _ _  

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
<p>以下はすべて水平線になります。</p>
<hr />
<hr />
<hr />
<p>3個以上並べてもOKです。</p>
<hr />
<hr />
<hr />
<p>間のスペースは無視されます。</p>
<hr />
<hr />
<hr /> 

↓画面に表示するとこうなります。

以下はすべて水平線になります。




3個以上並べてもOKです。




間のスペースは無視されます。




リスト(箇条書き) <ul>

リストを作成するには先頭に * (アスタリスク)と半角スペースを入力した後、項目を記述します。

Markdown(サンプルコード)
1
2
3
4
5
* リスト1個目
* リスト2個目
* リスト3個目
* リスト4個目
* リスト5個目 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
3
4
5
6
7
<ul>
<li>リスト1個目</li>
<li>リスト2個目</li>
<li>リスト3個目</li>
<li>リスト4個目</li>
<li>リスト5個目</li>
</ul> 

↓画面に表示するとこうなります。

  • リスト1個目
  • リスト2個目
  • リスト3個目
  • リスト4個目
  • リスト5個目

リスト(箇条書き)のネスト <ul>

リストをネストして子のリストを作成する場合、子のリストは 4 個のスペースまたはタブでインデントします。更にインデントすれば、リストの階層も同じく深くなります。サンプルコードは次の通りです。

Markdown(サンプルコード)
1
2
3
4
5
6
7
8
9
10
* リスト1個目
* リスト2個目
    * リスト2-1個目
    * リスト2-2個目
        * リスト2-2-1個目
        * リスト2-2-2個目
    * リスト2-3個目
    * リスト2-4個目
* リスト3個目
* リスト4個目 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<ul>
    <li>リスト1個目</li>
    <li>リスト2個目
    <ul>
        <li>リスト2-1個目</li>
        <li>リスト2-2個目
        <ul>
            <li>リスト2-2-1個目</li>
            <li>リスト2-2-2個目</li>
        </ul>
        </li>
        <li>リスト2-3個目</li>
        <li>リスト2-4個目</li>
    </ul>
    </li>
    <li>リスト3個目</li>
    <li>リスト4個目</li>
</ul> 

↓画面に表示するとこうなります。

  • リスト1個目
  • リスト2個目
    • リスト2-1個目
    • リスト2-2個目
      • リスト2-2-1個目
      • リスト2-2-2個目
    • リスト2-3個目
    • リスト2-4個目
  • リスト3個目
  • リスト4個目

リスト(数字付き) <ol>

数字で順序付けされたリストを作成するには先頭に半角数字と . (ピリオド)と半角スペースを入力した後、項目を記述します。

Markdown(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
13
1. リスト1個目
2. リスト2個目
3. リスト3個目
4. リスト4個目
5. リスト5個目
 
↓olタグの特性上、入力した数字は無視して順序付けされるので全て 1 でも良い。
 
1. リスト1個目
1. リスト2個目
1. リスト3個目
1. リスト4個目
1. リスト5個目 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<ol>
<li>リスト1個目</li>
<li>リスト2個目</li>
<li>リスト3個目</li>
<li>リスト4個目</li>
<li>リスト5個目</li>
</ol>
<p>↓olタグの特性上、入力した数字は無視して順序付けされるので全て 1 でも良い。</p>
<ol>
<li>リスト1個目</li>
<li>リスト2個目</li>
<li>リスト3個目</li>
<li>リスト4個目</li>
<li>リスト5個目</li>
</ol> 

↓画面に表示するとこうなります。

  1. リスト1個目
  2. リスト2個目
  3. リスト3個目
  4. リスト4個目
  5. リスト5個目

↓olタグの特性上、入力した数字は無視して順序付けされるので全て 1 でも良い。

  1. リスト1個目
  2. リスト2個目
  3. リスト3個目
  4. リスト4個目
  5. リスト5個目

リスト(数字付き)のネスト <ol>

リストをネストして子のリストを作成する場合、子のリストは 4 個のスペースまたはタブでインデントします。更にインデントすれば、リストの階層も同じく深くなります。サンプルコードは次の通りです。

Markdown(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
↓ol タグでは順序は自動付与されるので、全て 1 にしています。
1. リスト1個目
1. リスト2個目
    1. リスト2-1個目
    1. リスト2-2個目
        1. リスト2-2-1個目
        1. リスト2-2-2個目
    1. リスト2-3個目
    1. リスト2-4個目
1. リスト3個目
1. リスト4個目 

↓こんな感じでHTMLに変換されます。

html(サンプルコード)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<p>↓ol タグでは順序は自動付与されるので、全て 1 にしています。</p>
<ol>
    <li>リスト1個目</li>
    <li>リスト2個目
    <ol>
        <li>リスト2-1個目</li>
        <li>リスト2-2個目
        <ol>
            <li>リスト2-2-1個目</li>
            <li>リスト2-2-2個目</li>
        </ol>
        </li>
        <li>リスト2-3個目</li>
        <li>リスト2-4個目</li>
    </ol>
    </li>
    <li>リスト3個目</li>
    <li>リスト4個目</li>
</ol> 

↓画面に表示するとこうなります。

↓ol タグでは順序は自動付与されるので、全て 1 にしています。

  1. リスト1個目
  2. リスト2個目
    1. リスト2-1個目
    2. リスト2-2個目
      1. リスト2-2-1個目
      2. リスト2-2-2個目
    3. リスト2-3個目
    4. リスト2-4個目
  3. リスト3個目
  4. リスト4個目

画像 <img>

画像の挿入方法については以下のリンク先を参照してください。

スポンサーリンク