モチベーション維持のための技術系ブログ

技術者として個人的にアウトプットもやっていこうと思い始めました。

Markdown記法まとめ

実際にMarkdown記法を使ってこの記事を書いて、
どう書いたらどうなるかを実体験しつつ、その経験を残していきたい。

※注意 この記事でははてなブログMarkdown記法について書いていく。
サービスによっては少し記法が違うこともあるみたいなので、その点はご了承ください。

目次

1. 見出し
2. 改行
3. 箇条書きリスト
4. 番号付きリスト
5. 太字・斜体(イタリック)・取消線(訂正線)
6. 表(テーブル)
7. リンク
8. ページ内リンク
9. 引用
10. 水平線
11. 使えない記法

参考URL

1. 見出し

見出しの表現は # + 半角スペース + 見出しの文言 と記述する。
#の数で見出し文字の大きさや下線の有無が変わる。
#の数は最大6個まで

Markdown書き方

# 見出し
## 見出し
### 見出し
#### 見出し
##### 見出し
###### 見出し
####### 見出し

■表示

見出し

見出し

見出し

見出し

見出し
見出し
# 見出し ← #6個目からは記法にカウントされない



2. 改行

やり方は3つある。

  • 末尾に半角スペース2つ入れる
  • <br>を記述する ※複数の改行は<br>を複数入れる
  • 改行を2ついれて行間を1つ以上あける(上2つと少し見え方異なる)

Markdown書き方

1.
1行目←ここに半角スペースなし
2行目

2.
1行目  ←ここに半角スペース2つあり
2行目  ←ここに半角スペース2つあり
3行目

3.
1行目
<br>
2行目
<br>
<br>
<br>
3行目

4.
1行目

2行目



3行目

■表示

1.
1行目 2行目 改行されない。半角スペースが1つ間に入る。

2.
1行目
2行目
3行目 1つ改行される。

3.
1行目
2行目


3行目 <br>の数だけ改行される。

4.
1行目

2行目

3行目 Markdown記法で行間をあければ改行される。
(あける行間の数は関係ない)
ただし、通常の改行より行間が大きく表示される。



3. 箇条書きリスト

先頭にハイフン "-"、アスタリスク "*"、プラス "+"のいずれかをつけて箇条書きリストを表現できる。 この記号の後ろには半角スペースが必要。 半角スペース2つ or 半角スペース4つ or タブを先頭に入れれば、インデント付きで階層を表現できる。

階層はかなり深くてもちゃんとインデントつく。(どこまで深くできるかは不明)
3階層目以降は、先頭記号が "■" に統一される。

リストを表現する上には空行がないとリスト化されない。

ハイフン、アスタリスク、プラスのどれが一番一般的なのかはわからない…
個人的にはハイフンが一番しっくりくるので、ハイフンを使っていこうと思う。

Markdown書き方

はてなブログMarkdown編集画面ではタブが入力できず、検証できなかった。

<<ハイフン(半角スペース2つ)>>
- 大項目1
  - 中項目1-1
  - 中項目1-2
- 大項目2
  - 中項目2-1
    - 小項目2-1-1
    - 小項目2-1-2
      - 項目2-1-2-1
      - 項目2-1-2-2
        - aaa
          - bbb
            - ccc
              - ddd
                - eee
                  - fff

<<ハイフン(半角スペース4つ)>>
- 大項目1
    - 中項目1-1
    - 中項目1-2
- 大項目2
    - 中項目2-1
        - 小項目2-1-1
        - 小項目2-1-2
            - 項目2-1-2-1
            - 項目2-1-2-2

<<アスタリスク>>
* 大項目1
  * 中項目1-1
  * 中項目1-2
* 大項目2
  * 中項目2-1
    * 小項目2-1-1
    * 小項目2-1-2

<<プラス>>
+ 大項目1
  + 中項目1-1
  + 中項目1-2
+ 大項目2
  + 中項目2-1
    + 小項目2-1-1
    + 小項目2-1-2

<<上に空行なしでリストを表現>>
空行じゃない行
- 大項目
  - 中項目
    - 小項目

<<ハイフンの後に半角スペースなし>>
-大項目
-中項目
-小項目

■表示

ハイフン、アスタリスク、プラスどれでも同じように表示される。

<<ハイフン(半角スペース2つ)>>

  • 大項目1
    • 中項目1-1
    • 中項目1-2
  • 大項目2
    • 中項目2-1
      • 小項目2-1-1 ← 3階層目以降はリストの先頭記号が "■" に統一される
      • 小項目2-1-2
        • 項目2-1-2-1
        • 項目2-1-2-2
          • aaa
            • bbb
              • ccc
                • ddd
                  • eee
                    • fff ← これぐらい階層深くてもちゃんとインデントつく


<<ハイフン(半角スペース4つ)>>

  • 大項目1
    • 中項目1-1
    • 中項目1-2
  • 大項目2
    • 中項目2-1
      • 小項目2-1-1 ← 3階層目以降はリストの先頭記号が "■" に統一される
      • 小項目2-1-2
        • 項目2-1-2-1
        • 項目2-1-2-2


<<アスタリスク>>

  • 大項目1
    • 中項目1-1
    • 中項目1-2
  • 大項目2
    • 中項目2-1
      • 小項目2-1-1 ← 3階層目以降はリストの先頭記号が "■" に統一される
      • 小項目2-1-2
        • 項目2-1-2-1
        • 項目2-1-2-2


<<プラス>>

  • 大項目1
    • 中項目1-1
    • 中項目1-2
  • 大項目2
    • 中項目2-1
      • 小項目2-1-1 ← 3階層目以降はリストの先頭記号が "■" に統一される
      • 小項目2-1-2
        • 項目2-1-2-1
        • 項目2-1-2-2


<<上に空行なしでリストを表現>>
正しくリスト表示されない。

空行じゃない行 - 大項目 - 中項目 - 小項目


<<ハイフンの後に半角スペースなし>>
-大項目 -中項目 -小項目



4. 番号付きリスト

先頭に「数字.」と入力すれば、番号付きリストになる。
全て「1. 」でもよいし、 「2.」「3.」とカウントアップしたものを羅列してもよい。
とにかく「数字.」であれば、数字の順番は関係なく、連番で表示してくれる。 「数字.」の後ろには半角スペースが必要。

ハイフン4つを先頭に入れれば、インデント付きで改装を表現できる。

リストを表現する上には空行がないとリスト化されない。

※注意
箇条書きリストは「半角スペース2つ or 4つ」のインデントで階層を表現する。
番号付きリストは「半角スペース4つ」のインデントで階層を表現する。

Markdown書き方

<<「1.」で表現>>
1. 大項目
1. 大項目
    1. 中項目
    1. 中項目
        1. 小項目
        1. 小項目
            1. 項目
                1. 項目
                    1. 項目
                        1. 項目
                            1. 項目
                                1. 項目
                                    1. 項目


<<「1.」以外で表現>>
「数字.」の書き方であれば、書いてある数字やその順番は関係なく連番で表示される。

2. 大項目
    3. 中項目
    4. 中項目
    9. 中項目
2. 大項目
    1. 中項目
    5. 中項目
        6. 項目
        1. 項目
        3. 項目


<<ハイフン2つでインデントをつけてみる>>
これでは想定通りの階層表示にならない。

1. 大項目
  1. 中項目
  1. 中項目
1. 大項目
  1. 中項目
  1. 中項目
    1. 小項目
    1. 小項目
    1. 小項目

<<上に空行なしでリストを表現>>
空行じゃない行
- 大項目
  - 中項目
    - 小項目

<<「1.」の後ろに半角スペースなし>>
1.大項目
1.中項目
1.小項目

■表示

  1. 大項目
    1. 中項目
    2. 中項目
    3. 中項目
  2. 大項目
    1. 中項目
    2. 中項目
      1. 小項目
      2. 小項目
        1. 項目
          1. 項目
            1. 項目
              1. 項目
                1. 項目
                  1. 項目
                    1. 項目 ← これぐらい深い階層も表現できる


<<「1.」以外で表現>>

  1. 大項目
    1. 中項目
    2. 中項目
    3. 中項目
  2. 大項目
    1. 中項目
    2. 中項目
      1. 項目
      2. 項目
      3. 項目


<<ハイフン2つでインデントをつけてみる>>
いい感じに表示されない…

  1. 大項目
  2. 中項目
  3. 中項目
  4. 大項目
  5. 中項目
  6. 中項目
    1. 小項目
    2. 小項目
    3. 小項目


<<上に空行なしでリストを表現>>
いい感じに表示されない…

空行じゃない行 1. 大項目 1. 中項目 1. 小項目


<<「1.」の後ろに半角スペースなし>>
1.大項目 1.中項目 1.小項目



5. 太字・斜体(イタリック)・取消線(訂正線)

  • 太字:アスタリスク "*"、またはアンダースコア "_" 2つで対象の文字列を囲む。
  • 斜体:アスタリスク "*"、またはアンダースコア "_" 1つで対象の文字列を囲む。
    • 注意:日本語は斜体にならないみたい。半角英数字は斜体になる。
  • 取消線:チルダ "~" 2つで対象の文字列を囲む。
  • 太字 + 斜体:アスタリスク "*"、またはアンダースコア "_" 3つで対象の文字列を囲む。

Markdown書き方

<<太字>>  
**太字にしたい文字(アスタリスク2つ)**  
__太字にしたい文字(アンダースコア2つ)__  
**bold character(アスタリスク2つ)**  
__bold character(アンダースコア2つ)__

<<斜体(イタリック)>>  
*斜体にしたい文字(アスタリスク1つ)*  
_斜体にしたい文字(アンダースコア1つ)_  
*Italic character(アスタリスク1つ)*  
_Italic character(アンダースコア1つ)_

<<取消線(訂正線分)>>  
~~取消にしたい文字~~  
~~strikethrough~~

<<太字 + 斜体>>  
※日本語は、太字になるが斜体にならない。  
※半角英数字は太字かつ斜体になる。

***太字かつ斜体(アスタリスク3つ)***  
___太字かつ斜体12345(アンダースコア3つ)___  
***bold and italic 12345(アスタリスク3つ)***  
___bold and italic 12345(アンダースコア3つ)___

■表示

<<太字>>
太字にしたい文字(アスタリスク2つ)
太字にしたい文字(アンダースコア2つ)
bold character(アスタリスク2つ)
bold character(アンダースコア2つ)

<<斜体(イタリック)>>
※日本語は斜体にならない。半角英数字は斜体になってる。

斜体にしたい文字(アスタリスク1つ)
斜体にしたい文字(アンダースコア1つ)
Italic character(アスタリスク1つ)
Italic character(アンダースコア1つ)

<<取消線(訂正線分)>>
取消にしたい文字
strikethrough

<<太字 + 斜体>>
※日本語は、太字になるが斜体にならない。
※半角英数字は太字かつ斜体になる。

太字かつ斜体(アスタリスク3つ)
太字かつ斜体12345(アンダースコア3つ)
bold and italic 12345(アスタリスク3つ)
bold and italic 12345(アンダースコア3つ)



6. 表(テーブル)

パイプで囲んで列ごとのセルを表現する。
行は改行して表現する。

2行目はハイフンのみをパイプで囲むようにする。
コロン ":" をハイフンの左につけることで左寄せ、右につけることで右寄せ、両サイドにつけることで中央寄せになる。
※ハイフンの数はあまり関係なく、見やすいように数を調整してあげればいいみたい。

Markdown形式のテーブルを簡単に書けるサービスもある。
Markdown表テーブル作成ツール | NotePM

※公式documentが紹介していたものもあるが、これは日本語の表がうまく作れなかった。
Markdown Tables generator - TablesGenerator.com

Markdown書き方

<<普通に表を作る>>
| 項目1 | 項目2 | 項目3 |
| ------ | ------- | ------ |
| あいうえお | かきくけこ | さしすせそ |
| abc | def | ghi |

<<普通に表を作る(2行目のハイフンの数を変える)>>
| 項目1 | 項目2 | 項目3 |
| --------------------- | ------------- | ------------------------ |
| あいうえお | かきくけこ | さしすせそ |
| abc | def | ghi |

<<パイプの間の半角スペースなくしてみる>>
|項目1|項目2|項目3|
| ------ | ------- | ------ |
|あいうえお|かきくけこ|さしすせそ|
|abc|def|ghi|

<<左寄せ、右寄せ、中央寄せ>>
| 項目1(左) | 項目2(右) | 項目3(中央) |
| :------ | -------: | :------: |
| あいうえお | かきくけこ | さしすせそ |
| abc | def | ghi |

■表示

<<普通に表を作る>>

項目1 項目2 項目3
あいうえお かきくけこ さしすせそ
abc def ghi


<<普通に表を作る(2行目のハイフンの数を変える)>>
変わらず表示される。ハイフンの数は出来上がる表の形に関係ない。

項目1 項目2 項目3
あいうえお かきくけこ さしすせそ
abc def ghi


<<パイプの間の半角スペースなくしてみる>>
変わらず表示されるので、半角スペースはなくてもいいみたい。

項目1 項目2 項目3
あいうえお かきくけこ さしすせそ
abc def ghi


<<左寄せ、右寄せ、中央寄せ>>

項目1(左) 項目2(右) 項目3(中央)
あいうえお かきくけこ さしすせそ
abc def ghi



7. リンク

角かっこと丸かっこを組み合わせて作る。
[表示テキスト](URL) のような感じ。
文の途中にも表現可能。

URLの後ろにダブルクォート囲みで、リンクにマウスオーバーしたときのツールチップを指定できる。
[表示テキスト](URL "ツールチップ")

角かっこの中にURLをいれて末尾に「:embed」を入れることで、埋め込みURLを表現できる。
[URL:embed]    :埋め込みだけ
[URL:embed:cite] :埋め込み & URL
[URL:embed:title] :埋め込み & サイトのタイトル

角かっこの中にURLを入れて末尾に「:title」を入れることで、サイトのタイトルにリンクを貼れる。
[URL:title]

同じリンクを複数回使用する場合、
[任意の文字列]: URL "ツールチップ"
ということを最初に書いておけば、
[表示テキスト1][任意の文字列]
[表示テキスト2][任意の文字列]
[表示テキスト3][任意の文字列]
のように書くことで同じリンクを複数作れる。
長いURLのリンクを複数回貼りたいときなどに便利。

Markdown書き方

<<角かっこと丸かっこ>>  
11月の目標は [11月の目標](https://onl.la/mphWMGB) に記載してます!

<<ツールチップ>>  
[11月の目標](https://onl.la/mphWMGB "11月の目標ツールチップ")

<<埋め込み>>  
`embed`  
[https://onl.la/mphWMGB:embed]

`embed:cite`  
[https://onl.la/mphWMGB:embed:cite]

`embed:title`  
[https://onl.la/mphWMGB:embed:title]

<<サイトのタイトルにリンクを貼る>>  
[https://onl.la/mphWMGB:title]

<<同じリンクを複数回使用>>  
[11目標]: https://onl.la/mphWMGB "11月目標のツールチップ 複数回バージョン"
[11月の目標 01][11目標]  
[11月の目標 02][11目標]  
[11月の目標 03][11目標]  

■表示

<<角かっこと丸かっこ>>
11月の目標は 11月の目標 に記載してます!


<<ツールチップ>>
11月の目標


<<埋め込み>>
embed


embed:cite
onl.la


embed:title
2022/11 の目標 - モチベーション維持のための技術系ブログ


<<サイトのタイトルにリンクを貼る>>
2022/11 の目標 - モチベーション維持のための技術系ブログ


<<同じリンクを複数回使用>>
11月の目標 01
11月の目標 02
11月の目標 03



8. ページ内リンク

下記のように書くことで、「表テキスト」をクリックすると「リンク先の見出し文字」までとぶようなページ内リンクが作れる。
[表示テキスト](#リンク先の見出し文字)

とべるのは#見出し ###見出し のような、#をつけた見出し部分のみ。 見出しの#が複数であっても、ページ内リンクを作る時 # は1つ。

リンク先の見出し文字については下記のようなルールがある。

  • 半角スペースが含まれる場合はハイフン"-"に置き換える。
  • ドット "." が含まれる場合は省略する。

※この辺のルールはけっこう細かくて書くの辛い…
 ので、詳細は、自分も参考にしたQiita Markdownのページ内リンクの罠を参照していただければ…m( )m

Markdown書き方

<<普通のページ内リンク>>  
[リンク部分](#とびたい見出し部分1)

#### とびたい見出し部分1


<<見出しに半角スペースやハイフンあり>>  
[リンク部分](#123-とびたい見出し部分2)

#### 1.2.3 とびたい見出し部分2

■表示

<<普通のページ内リンク>>
リンク部分  ←これをクリックすると、「とびたい見出し部分1」の文言までジャンプする

とびたい見出し部分1


<<見出しに半角スペースやハイフンあり>>
リンク部分  ←これをクリックすると、「1.2.3 とびたい見出し部分2」の文言までジャンプする

1.2.3 とびたい見出し部分2



9. 引用

行頭に ">" をつけると引用になる。
引用内でMarkdown記法を書くこともできる。

Markdown書き方

<<普通の引用>>
> 引用元文章1行目  
> 引用元文章2行目  
> 引用元文章3行目  

上記の通り、よろしくお願いします。


<<引用内でMarkdown記法が使える>>
> - 引用元文章1行目  
> - 引用元文章2行目  
>   - 引用元文章3行目  

上記の通り、よろしくお願いします。


<<行頭の ">" の後は半角スペースなくてもいけるっぽい>>
>引用元文章1行目  
>引用元文章2行目  
>引用元文章3行目  

上記の通り、よろしくお願いします。


<<複数行の引用作る時、最初の1行目だけ ">" があればいいっぽい…>>
> 引用元文章1行目  
引用元文章2行目  
引用元文章3行目  

上記の通り、よろしくお願いします。

■表示

<<普通の引用>>

引用元文章1行目
引用元文章2行目
引用元文章3行目

上記の通り、よろしくお願いします。


<<引用内でMarkdown記法が使える>>

  • 引用元文章1行目
  • 引用元文章2行目
    • 引用元文章3行目

上記の通り、よろしくお願いします。


<<行頭の ">" の後は半角スペースなくてもいけるっぽい>>

引用元文章1行目
引用元文章2行目
引用元文章3行目

上記の通り、よろしくお願いします。


<<複数行の引用作る時、最初の1行目だけ ">" があればいいっぽい…>>

引用元文章1行目
引用元文章2行目
引用元文章3行目

上記の通り、よろしくお願いします。



10. 水平線

ハイフン、アスタリスク、アンダースコアのいずれかを3つ以上並べる 例:--- と、水平線を書ける。
3つ以上であれば多くても大丈夫なので、多いほうが見やすければおおくしたらよさそう。
公式ドキュメントによると、この記法の前後には空白行を入れるのがベストプラクティスらしい。

Markdown書き方

ハイフン3つ

---

アスタリスク3つ

***

アンダースコア3つ

___

ハイフン5つ

-----

■表示

ハイフン3つ


アスタリスク3つ


アンダースコア3つ


ハイフン5つ




11. 使えない記法

  • チェックリスト
    • - [ ] で書けるらしいが、はてなブログではただの箇条書きリストになってしまった。

Markdown書き方

- [ ] aaa
- [x] bbb
- [ ] ccc

■表示

  • [ ] aaa
  • [x] bbb
  • [ ] ccc



参考URL