自分がよく使用するMarkdownの書き方まとめ

• 本ページは、Qiitaの投稿記事を書く際にMarkdownのコードを忘れてしまうことが多いため、自分用のMarkdownチートシートとして作成した資料です。
• Markdownで表現できない部分はHTMLも使います。
• コードを書いても上手くできない時はコードの上下に空行が必要だったりします。
• 職業がインフラエンジニアのため、HTMLには疎い部分があります。
• 他に良い書き方があれば、随時更新して内容を強化していこうと思います。

[最終更新]
2019/02/09 「チェックボックス」を追記
2019/01/04 「表の書き方」を追記
2018/11/30 「行頭に半角スペースを置く」を追記

---

～目次～
目次の書き方(ページ内リンク)
ハイパーリンク(ページ外リンク)
アコーディオンメニュー(クリックで展開・非展開)
見出し(アウトライン)
リスト(箇条書き)
リスト(番号付きの箇条書き)
文章に色を付ける
画像の挿入(画像を線で囲う)
コードブロック
コードブロックっぽいもの
コードのインライン表示
引用
コメント(記事には表示されない)
太字・斜体・取り消し線
水平線
改行
行頭に半角スペースを置く
表の書き方
チェックボックス

---

目次の書き方(ページ内リンク)

自動での目次の書き方がわからないため、以下のコードで手動作成していますｗ
目次というか、ページ内リンクです。

[表示するテキスト](#表示先)
と記載するのですが__"(#表示先)"__の書き方にルールがあるようです(一部だけ紹介)。

• 頭に"#"をつける
• 英字は小文字のみ
• 空白スペースは"-(ハイホン)"に変換
• " . , ( ) "等の記号は使用不可

コードの書き方

[目次の書き方(ページ内リンク)](#目次の書き方ページ内リンク)
[見出し(アウトライン)](#見出しアウトライン)

[ 上記コードの表示結果 ]

目次の書き方(ページ内リンク)
見出し(アウトライン)

ハイパーリンク(ページ外リンク)

URLをそのまま貼り付ければリンク化しますが、テキストとURLを絡めたい場合は「目次の書き方(ページ内リンク)」と同じような書き方になります。
※ 「目次の書き方(ページ内リンク)」、( )内の「#」は不要

コードの書き方

[Qiita Topページ](https://qiita.com/)
https://qiita.com/
<https://qiita.com/>

[ 上記コードの表示結果 ]

Qiita Topページ
https://qiita.com/
https://qiita.com/

アコーディオンメニュー(クリックで展開・非展開)

長いサンプルコードを載せる場合など、いちいちスクロールするのが面倒な場合など、クリックで展開したり畳んだり出来るとラクです。

コードの書き方

<details>
<summary>**剣道段位をクリックで展開**</summary>
<div>

+ 初段
+ 二段
+ 三段
+ 四段
+ 五段
  - 錬士
+ 六段
  - 錬士
+ 七段
  - 教士
+ 八段
  - 範士

～～～展開ここまで～～～ ※ここは書かなくても良いけど、開いた時に見やすい。

</div>
</details>

[ 上記コードの表示結果 ]

**剣道段位をクリックで展開**

• 初段
• 二段
• 三段
• 四段
• 五段
  • 錬士
• 六段
  • 錬士
• 七段
  • 教士
• 八段
  • 範士

～～～展開ここまで～～～ ※ここは書かなくても良いけど、開いた時に見やすい。

見出し(アウトライン)

見出しは行頭に "# (ハッシュ記号と半角スペース)"を置くことで表します。"#"の数により、レベルが変わります。

コードの書き方

# 見出し レベル１
## 見出し レベル２
### 見出し レベル３

[ 上記コードの表示結果 ]

見出し レベル１

見出し レベル２

見出し レベル３

リスト(箇条書き)

「+」「-」「*」を行頭に付け、半角スペースを入れて本文を書きます。
行頭文字は混在しても良いし、TABキーでインデントできます。

コードの書き方

+ guineapig
    * イングリッシュ
        + シェルティ
            - ティディ
                * ペルビアン
                    - クレステッド
                        + cavy

[ 上記コードの表示結果 ]

• guineapig
  • イングリッシュ
    • シェルティ
      • ティディ
        • ペルビアン
          • クレステッド
            • cavy

リスト(番号付きの箇条書き)

「数字.」を行頭に付け、半角スペースを入れて本文を書きます。
TABキーでインデントでき、インデントすると番号が「1.」になります。
※行頭にあれば数字は何でも良いみたいです。

コードの書き方

1. チモシー
2. オーツヘイ
    3. イタリアンライグラス
    4. アルファルファ
        21. １番刈り
        22. ２番刈り
            10000. アメリカ産
            10000. 北海道産
            10000. 自家栽培

[ 上記コードの表示結果 ]

1. チモシー
2. オーツヘイ
   3. イタリアンライグラス
   4. アルファルファ
   21. １番刈り
   22. ２番刈り
   10000. アメリカ産
   10000. 北海道産
   10000. 自家栽培

文章に色を付ける

文章の色付けはMarkdownではなくHTMLを使うようです。

コードの書き方

<font color="Blue">青字です。</font>
<font color="Red">赤字です。</font>
<font color="Green">__緑の太字です。__</font>

[ 上記コードの表示結果 ]

青字です。
赤字です。
緑の太字です。

画像の挿入(画像を線で囲う)

白背景の画像を載せる際など、枠線があった方が良い時に使います。個人的には記事がスッキリするので画像の度に使ってます。

コードの書き方

・カーソル(キャレット)を画像を置く場所に合わせ、フォルダから画像をドラッグしただけ↓
![markdown_matome.PNG](https://qiita-image-store.s3.amazonaws.com/～途中省略～.png)

・上記の画像を枠線で囲います。<font color="Red">※必ず上下に空行を設けること</font>

|![markdown_matome.PNG](https://qiita-image-store.s3.amazonaws.com/～途中省略～.png)
|:-:|

[ 上記コードの表示結果 ]

・カーソル(キャレット)を画像を置く場所に合わせ、フォルダから画像をドラッグしただけ↓

・上記の画像を枠線で囲います。※必ず上下に空行を設けること

コードブロック

このページでも「コードの書き方」と表記されている、黒板みたいな部分です。
コード部分を「```」または「~~~」で囲います。

コードの書き方

\~~~
print("はろ～わ～るど")
\~~~
\```python:言語をPythonに指定してみる
    # ↑セミコロンの左側を使う言語にすると、コードに色が付きます。
    # 自動で色が付くことを「シンタックスハイライト」と言うらしい・・・。
print("はろ～わ～るど")
\```

※ ↑ 「```」「~~~」前にある「\」は外してください。

[ 上記コードの表示結果 ]

print("はろ～わ～るど")

言語をPythonに指定してみる

    # ↑セミコロンの左側を使う言語にすると、コードに色が付きます。
    # 自動で色が付くことを「シンタックスハイライト」と言うらしい・・・。
print("はろ～わ～るど")

コードブロックっぽいもの

行頭の半角スペース４個で、コードブロックっぽい書き方もできます。

コードの書き方

    左側に半角スペース４個入れると、

    コードブロックっぽくなります。

    半角スペースが続く部分を、塊と見るようです。

[ 上記コードの表示結果 ]

左側に半角スペース４個入れると、

コードブロックっぽくなります。

半角スペースが続く部分を、塊と見るようです。

コードのインライン表示

文章中の「` (バックォーテーション)」で囲んだ部分がインライン表示されます。

コードの書き方

モルモットは`ハムスター`じゃありません！`尻尾`もありません！

[ 上記コードの表示結果 ]

モルモットはハムスターじゃありません！尻尾もありません！

引用

他の資料から文章を引用してくる場合等に使用したりします。

コードの書き方

>
引用：文章の上の行に「>」を書くパターン
>>
二重引用：文章の上の行に「>>」を書くパターン
>>>>
四重引用：文章の上の行に「>>>>」を書くパターン

途中で空行が入ると引用終了。


>引用：文章の行頭に「>」を書くパターン
>>二重引用：文章の行頭に「>>」を書くパターン
>>>>四重引用：文章の行頭に「>>>>」を書くパターン

途中で空行が入ると引用終了。

[ 上記コードの表示結果 ]

引用：文章の上の行に「>」を書くパターン

二重引用：文章の上の行に「>>」を書くパターン

四重引用：文章の上の行に「>>>>」を書くパターン

途中で空行が入ると引用終了。

引用：文章の行頭に「>」を書くパターン

二重引用：文章の行頭に「>>」を書くパターン

四重引用：文章の行頭に「>>>>」を書くパターン

途中で空行が入ると引用終了。

コメント(記事には表示されない)

Markdownソース側でのコメントの書き方。

コードの書き方

↓ コメント  ※コメントの上に空行が無いとダメ。

<!-- コメントをここに書きます -->
↑ コメント

[ 上記コードの表示結果 ]

↓ コメント ※コメントの上に空行が無いとダメ。

↑ コメント

太字・斜体・取り消し線

コードの書き方

__太字「\__(アンダーバー２個で囲う)」__
**太字「\**(アスタリスク２個で囲う)」**
_斜体 半角文字のみ ABC 123 #@「\_(アンダーバー１個で囲う)」_
*斜体 半角文字のみ ABC 123 #@「\*(アスタリスク１個で囲う)」*
~~取り消し線~~

[ 上記コードの表示結果 ]

太字「__(アンダーバー２個で囲う)」
太字「**(アスタリスク２個で囲う)」
斜体 半角文字のみ ABC 123 #@「_(アンダーバー１個で囲う)」
斜体 半角文字のみ ABC 123 #@「*(アスタリスク１個で囲う)」
取り消し線

水平線

水平線は「***」か「---」ですが、直前の文字列が見出し化する・しないの違いがあります。

コードの書き方

「---」の直前の文字は、見出し化します。
---

「***」の直前の文字は、見出し化しません。
***

[ 上記コードの表示結果 ]

「---」の直前の文字は、見出し化します。

「***」の直前の文字は、見出し化しません。

---

改行

コードの書き方

改行は行末に半角スペース２個置くか  
HTMLの\<br> <br>をつかいます。

[ 上記コードの表示結果 ]

改行は行末に半角スペース２個置くか
HTMLの<br>
をつかいます。

行頭に半角スペースを置く

文章を書いていて行頭に半角スペースを書いても反映されないのですが、HTMLの特殊文字を使うことで、半角スペースを表現出来るようです。
・半角スペースは行頭に「&nbsp;」を置く

Qiitaでは行頭の全角スペースを認識しますが、認識しないサービスもあるようです。
・全角スペースは行頭に「&emsp;」を置く

コードの書き方

 行頭にそのまま半角スペースを置く
 行頭に半角スペースの特殊文字を置く
  行頭に置いた半角スペースの特殊文字の直後は、半角スペースを認識する

[ 上記コードの表示結果 ]

行頭にそのまま半角スペースを置く
 行頭に半角スペースの特殊文字を置く
  行頭に置いた半角スペースの特殊文字の直後は、半角スペースを認識する

表の書き方

書きづらくてあまり使ってないけど・・・。
一段目の行がヘッダで太字になり、
二段目の行でセルのどちらかへ寄せることができ、
三段目移行へデータを記載する。

コードの書き方

|左寄せ|真ん中|右寄せ|
|:-----|:----:|-----:|
|1-1|1-2|1-3|
|2-1|2-2|2-3|

[ 上記コードの表示結果 ]

左寄せ	真ん中	右寄せ
1-1	1-2	1-3
2-1	2-2	2-3

チェックボックス

書式
リスト記号(+-* 1.) + 半角スペース + [x] + 半角スペース + 文字列

※[x]の前後に半角スペースが無いとチェックボックスにならない・・・。

コードの書き方

[x] 
[x] 文字列

+ [x] 文字列
  - [x] 文字列
  * [x]文字列
  - [x] 
  - [x]
  * [x] 文字列

1. [x] 文字列
2. [x] 文字列

[ 上記コードの表示結果 ]

[x]
[x] 文字列

• 文字列
  • 文字列
  • [x]文字列
  • [x]
  • [x]
  • 文字列

1. 文字列
2. 文字列

参考にさせていただいたページ

情報をまとめる際にあたり参考にさせていただいたサイトを記載します。ありがとうございました。

Qiita マークダウン記法 一覧表・チートシート
Markdown記法 チートシート
Markdown書き方メモ
Qiita で見出しアンカーへのページ内リンクを作る方法

---