Markdown記法まとめ
Markdown で使用可能な記述方法のまとめです。
- 見出し <h1><h2><h3>…<hn>
- 強調 <strong>
- テーブル <table><tr><td>
- リンク <a>
- 改行 <br>
- 水平線（横棒） <hr>
- リスト（箇条書き） <ul>
- リスト（箇条書き）のネスト <ul>
- リスト（数字付き） <ol>
- リスト（数字付き）のネスト <ol>
- 画像 <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 | |見出し１|見出し２|見出し３| |:-|-:|:-:| |左寄せ|右寄せ|中央寄せ| |コロンが左だから左寄せ|コロンが右だから右寄せ|コロンが両方だからセンタリング| |
↓こんな感じで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;">見出し１</th> <th style="text-align: right;">見出し２</th> <th style="text-align: center;">見出し３</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 で設定しています。）
| 見出し１ | 見出し２ | 見出し３ |
|---|---|---|
| 左寄せ | 右寄せ | 中央寄せ |
| コロンが左だから左寄せ | コロンが右だから右寄せ | コロンが両方だからセンタリング |
リンク <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 | 文末に２個以上スペースを入れると改行します。→ 改行しました。 |
↓こんな感じでHTMLに変換されます。
| html（サンプルコード） | |
1 2 | 文末に２個スペースを入れると改行します。→<br />
改行しました。 |
↓画面に表示するとこうなります。
文末に２個スペースを入れると改行します。→
改行しました。
水平線（横棒） <hr>
水平線を挿入するには、- （ハイフン）,* （アスタリスク）, _ （アンダースコア）のいずれかを３個以上連続で記述します。
| Markdown（サンプルコード） | |
1 2 3 4 5 6 7 8 9 10 11 12 | 以下はすべて水平線になります。 *** ___ --- ３個以上並べてもＯＫです。 ********************* _____________________ --------------------- 間のスペースは無視されます。 * * * * * * * * * * * - - - - - - - - - - - _ _ _ _ _ _ _ _ _ _ _ |
↓こんな感じでHTMLに変換されます。
| html（サンプルコード） | |
1 2 3 4 5 6 7 8 9 10 11 12 | <p>以下はすべて水平線になります。</p> <hr /> <hr /> <hr /> <p>３個以上並べてもＯＫです。</p> <hr /> <hr /> <hr /> <p>間のスペースは無視されます。</p> <hr /> <hr /> <hr /> |
↓画面に表示するとこうなります。
以下はすべて水平線になります。
３個以上並べてもＯＫです。
間のスペースは無視されます。
リスト（箇条書き） <ul>
リストを作成するには先頭に * （アスタリスク）と半角スペースを入力した後、項目を記述します。
| Markdown（サンプルコード） | |
1 2 3 4 5 | * リスト１個目 * リスト２個目 * リスト３個目 * リスト４個目 * リスト５個目 |
↓こんな感じでHTMLに変換されます。
| html（サンプルコード） | |
1 2 3 4 5 6 7 | <ul> <li>リスト１個目</li> <li>リスト２個目</li> <li>リスト３個目</li> <li>リスト４個目</li> <li>リスト５個目</li> </ul> |
↓画面に表示するとこうなります。
- リスト１個目
- リスト２個目
- リスト３個目
- リスト４個目
- リスト５個目
リスト（箇条書き）のネスト <ul>
リストをネストして子のリストを作成する場合、子のリストは 4 個のスペースまたはタブでインデントします。更にインデントすれば、リストの階層も同じく深くなります。サンプルコードは次の通りです。
| Markdown（サンプルコード） | |
1 2 3 4 5 6 7 8 9 10 | * リスト１個目 * リスト２個目 * リスト２－１個目 * リスト２－２個目 * リスト２－２－１個目 * リスト２－２－２個目 * リスト２－３個目 * リスト２－４個目 * リスト３個目 * リスト４個目 |
↓こんな感じでHTMLに変換されます。
| html（サンプルコード） | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <ul> <li>リスト１個目</li> <li>リスト２個目 <ul> <li>リスト２－１個目</li> <li>リスト２－２個目 <ul> <li>リスト２－２－１個目</li> <li>リスト２－２－２個目</li> </ul> </li> <li>リスト２－３個目</li> <li>リスト２－４個目</li> </ul> </li> <li>リスト３個目</li> <li>リスト４個目</li> </ul> |
↓画面に表示するとこうなります。
- リスト１個目
- リスト２個目
- リスト２－１個目
- リスト２－２個目
- リスト２－２－１個目
- リスト２－２－２個目
- リスト２－３個目
- リスト２－４個目
- リスト３個目
- リスト４個目
リスト（数字付き） <ol>
数字で順序付けされたリストを作成するには先頭に半角数字と . （ピリオド）と半角スペースを入力した後、項目を記述します。
| Markdown（サンプルコード） | |
1 2 3 4 5 6 7 8 9 10 11 12 13 | 1. リスト１個目 2. リスト２個目 3. リスト３個目 4. リスト４個目 5. リスト５個目 ↓olタグの特性上、入力した数字は無視して順序付けされるので全て 1 でも良い。 1. リスト１個目 1. リスト２個目 1. リスト３個目 1. リスト４個目 1. リスト５個目 |
↓こんな感じでHTMLに変換されます。
| html（サンプルコード） | |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <ol> <li>リスト１個目</li> <li>リスト２個目</li> <li>リスト３個目</li> <li>リスト４個目</li> <li>リスト５個目</li> </ol> <p>↓olタグの特性上、入力した数字は無視して順序付けされるので全て 1 でも良い。</p> <ol> <li>リスト１個目</li> <li>リスト２個目</li> <li>リスト３個目</li> <li>リスト４個目</li> <li>リスト５個目</li> </ol> |
↓画面に表示するとこうなります。
- リスト１個目
- リスト２個目
- リスト３個目
- リスト４個目
- リスト５個目
↓olタグの特性上、入力した数字は無視して順序付けされるので全て 1 でも良い。
- リスト１個目
- リスト２個目
- リスト３個目
- リスト４個目
- リスト５個目
リスト（数字付き）のネスト <ol>
リストをネストして子のリストを作成する場合、子のリストは 4 個のスペースまたはタブでインデントします。更にインデントすれば、リストの階層も同じく深くなります。サンプルコードは次の通りです。
| Markdown（サンプルコード） | |
1 2 3 4 5 6 7 8 9 10 11 | ↓ol タグでは順序は自動付与されるので、全て 1 にしています。 1. リスト１個目 1. リスト２個目 1. リスト２－１個目 1. リスト２－２個目 1. リスト２－２－１個目 1. リスト２－２－２個目 1. リスト２－３個目 1. リスト２－４個目 1. リスト３個目 1. リスト４個目 |
↓こんな感じで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>リスト１個目</li> <li>リスト２個目 <ol> <li>リスト２－１個目</li> <li>リスト２－２個目 <ol> <li>リスト２－２－１個目</li> <li>リスト２－２－２個目</li> </ol> </li> <li>リスト２－３個目</li> <li>リスト２－４個目</li> </ol> </li> <li>リスト３個目</li> <li>リスト４個目</li> </ol> |
↓画面に表示するとこうなります。
↓ol タグでは順序は自動付与されるので、全て 1 にしています。
- リスト１個目
- リスト２個目
- リスト２－１個目
- リスト２－２個目
- リスト２－２－１個目
- リスト２－２－２個目
- リスト２－３個目
- リスト２－４個目
- リスト３個目
- リスト４個目
画像 <img>
画像の挿入方法については以下のリンク先を参照してください。