Markdown 記法 サンプル 一覧

マークダウン記法に関して、せいぜい見出しと太字くらいしか使ったことのない私が、とりあえずこの記事を書きながら色々と使ってみて思った事が、見やすい文章を手軽に記述できるということでした。
備忘録としても、誰かに伝えたい記事だとしても、見やすい方が絶対に良いですよね。
書き始めたばかりの私だからこそ、同じような人にもわかりやすく感じるよう意識して書いてみました。
良かったら使ってやって下さい(｀・∀・´)

各項目、どう記述し、どう表示されるのかを記述例 と 結果で表現しています。

あと初めに謝っておきます、様々な記事の内容をパクリまくっています。
最後にまとめてご紹介するので勘弁してください。

#🔍 目次

項目が多いので右に表示される見出しの目次か、
以下の表内の項目をリンクにしているのでそちらをご利用下さい。
（本番うpしてからリンク貼っていくので、出来れば右の見出しを使ってください・・・）

項目（どう表示したい？）	文法（どう書けば実現できる？）	結果（どう表示される？）
見出し	#テキスト	大きめの文字
引用	>テキスト	少し薄めのグレー
太字	**テキスト**	通常　太字
斜め文字	*テキスト*	通常　イタリック
打ち消し線	~~テキスト~~	打ち消し線
インライン表示	`テキスト`	インライン表示
リスト	- テキスト	箇条書き
折りたたみ	詳細をご確認下さい	クリックで展開可能
コード挿入	``` ```	プレーンテキスト
シンタックスハイライト	```Ruby	色分けされたコード
水平線	***	グレーの水平線
リンク	[テキスト](URL)	リンク
画像埋め込み	
テーブル（表）	詳細をご覧下さい	この表そのものです
エスケープ	\*テキスト*	*イタリック*
注釈	テキスト[^1]	テキスト1

#❓ Markdownとは

Markdown（マークダウン）は、文書を記述するための軽量マークアップ言語のひとつである。
本来はプレーンテキスト形式で手軽に書いた文書からHTMLを生成するために開発されたものである。
しかし、現在ではHTMLのほかパワーポイント形式やLATEX形式のファイルへ変換するソフトウェア（コンバータ）も開発されている。
各コンバータの開発者によって多様な拡張が施されるため、各種の方言が存在する。

参照：Wikipedia

#💎 見出し

文法：#見出し文

文頭に#を付けます。
#の数で見出しの大きさが変化します（１〜６まで）

記述例.example

#見出し１※下線付き
##見出し２※下線付き
###見出し３
####見出し４
#####見出し５
######見出し６

👇結果👇

#見出し１（#〜）※下線付き
##見出し２（##〜）※下線付き
###見出し３（###〜）
####見出し４（####〜）
#####見出し５（#####〜）
######見出し６（######〜）

右の見出し欄に表示されてしまうので引用表示しています

#💎 引用

文法： >引用文

文頭に>を付けます。
複数入れて入れ子にすることも可能です。

記述例.example

>おはよぉ
>>こんちはぁ
>>>こんばんはぁ
>>>>おやすみぃぃぃ
>>>>>おきてぇぇぇぇぇ！！！！！

👇結果👇

おはよぉ

こんちはぁ

こんばんはぁ

おやすみぃぃぃ

おきてぇぇぇぇぇ！！！！！

記述例.example

>毎行>を入れなくても続きます、
このように改行も可能です。

空白行が入ると終了します。

👇結果👇

毎行>を入れなくても続きます、
このように改行も可能です。

空白行が入ると終了します。

#💎 装飾文字

###✏️ 太字

文法： **テキスト** または __テキスト__

強調したい単語に使うといい感じです。

記述例.example

__太字__
**ごっつぁんです**

👇結果👇

太字
ごっつぁんです

---

###✏️ イタリック体（斜体）

文法： *テキスト* または _テキスト_

おしゃれな斜め文字です。

記述例.example

_イタリック_
*イタリック*

👇結果👇

イタリック
イタリック

---

###✏️ 打ち消し線

文法： ~~テキスト~~

記述例.example

~~打ち消し線~~
文章の一部を~~それっぽく~~打ち消す

👇結果👇

打ち消し線
文章の一部をそれっぽく打ち消す

#💎 コードの挿入

　```
　バッククォート（　`　←コレ）を3つ並べて、挿入したいコードを間に記述する。
　puts "Hello World!!"
　```

バッククォートはShift + @で入力できます（半角入力！）

👇結果👇

puts "Hello World!!"

###✏️ シンタックスハイライト

シンタックスハイライトとは？
コードを見やすくする便利機能みたいなものですね。とても便利です。

１行目のバッククォートの後に表示したいファイル名を記述できます。
記述したファイルの拡張子に対応したシンタックスハイライトが適応されます。
シンタックスハイライトなしだと・・・

シンタックスハイライトなし.example

　animal = "アルパカ"

if animal == "アルパカ"
  print("アルパカさん")
elsif animal == "カピバラ"
  print("カピバラさん")
else
  print("未確認生命体")
end

表示はされていますが、パッと見で演算子や識別子などを把握しにくいですね。
コレにシンタックスハイライトを適応させると・・・？

👇結果👇

シンタックスハイライトあり.example

animal = "アルパカ"

if animal == "アルパカ"
  print("アルパカさん")
elsif animal == "カピバラ"
  print("カピバラさん")
else
  print("未確認生命体")
end

とても認識しやすくなりました！

---

シンタックスハイライトとファイル名を:で区切ります。
ファイル名の部分には半角スペースは使用できません
全角スペースを入力するか、または で対応できます。

記述例.example

　```php:alpaca_sample.rb  (2)
 挿入したいコード
　```

この記述例の場合、PHPでシンタックスハイライトを適応させ、
その後のファイル名と（２）の間にスペースを2つ挿入していますね。

👇結果👇

alpaca_sample  (2)

$a = 15;
if( $a < 10 ){
  echo "10より小さい \n";
} elseif( $a < 20 ){
  echo "10以上で 20より小さい \n";
} else {
  echo "30以上 \n";
}

頭の片隅に記憶しておくと良いかもしれませんね　(｀・∀・´)

#💎 インライン表示

文法：`表示したいコードや文章`

　` （バッククォート）でインライン表示したい部分を囲むことで使用できます。

記述例.example

インストールコマンドは `$ gem install` です。

👇結果👇

インストールコマンドは $ gem install です。

---

インラインコードがn個連続するバッククォートを含む場合、n+1連続のバッククォートで囲みます。

記述例.example

`` `バッククオート` `` や ``` ``2連続バッククオート`` ``` も記述できます。

ちょっとわかりにくいかもですが、バッククォート１個で囲んでいるコードをインライン表示したい場合はバッククォートを２個ずつ使って囲むんですね。
囲む時、半角スペースを入れるのを忘れずに❗️

👇結果👇

`バッククオート` や ``2連続バッククオート`` も記述できます。

---

インラインコードの中身が CSS の 型の RGB 16進数表記, rgb(), rgba(), hsl(), hsla() 場合、横にその色が表示されます。

colors.example

`#ffce44`
`rgb(255,0,0)`
`rgba(0,255,0,0.4)`
`hsl(100, 10%, 10%)`
`hsla(100, 24%, 40%, 0.5)`

👇結果👇

#ffce44
rgb(255,0,0)
rgba(0,255,0,0.4)
hsl(100, 10%, 10%)
hsla(100, 24%, 40%, 0.5)

#💎 折りたたみ

文法.example

<details>
  <summary>表示するテキスト</summary>
  折りたたむ（クリックしたら表示される）テキスト
</details>

追加情報にしたい内容を、detailsタグで囲みます。
そして、要約として表示したい文章をsummaryタグで囲みます。

記述例.example

<details>
  <summary>アルパカとは？（ここをクリックしてみてね）</summary>
    アルパカ（alpaca、Vicugna pacos、漢名: 羊駱駝）は、南アメリカ大陸原産の家畜の1種である。
    ラクダ科のビクーニャ属またはラマ属に属する。
    極めて良質な体毛を具えており、古来、衣類を始めとする生活用品への体毛の加工利用が品種改良の目的であった。
</details>

👇結果👇

アルパカとは？（ここをクリックしてみてね）

アルパカ（alpaca、Vicugna pacos、漢名: 羊駱駝）は、南アメリカ大陸原産の家畜の1種である。 ラクダ科のビクーニャ属またはラマ属に属する。 極めて良質な体毛を具えており、古来、衣類を始めとする生活用品への体毛の加工利用が品種改良の目的であった。

---

折りたたんだ部分でMarkdownを使用する場合は、折りたたまれる部分全体を<div>で囲ってください。
（` は実際は \ を含みません。また<div>とコードブロックの間には空白行が一つ以上必要です。）

記述例.example

<details>
  <summary>サンプルコード</summary>
  <div>
    〜ここが必要な空白行です〜
    \```ruby:サンプルコード
    puts 'Hello, World'
    \```

  </div>
</details>

👇結果👇

サンプルコード

サンプルコード

puts 'Hello, World'

#💎 水平線

文法： ***

***
水平線
***

👇結果👇

---

水平線

---

#💎 リスト

リストを挿入する時は、リストの上下に空行がないと正しく表示されません。
また、使用する記号や数字の後には半角スペースが必要です。

###✏️ Disc型

文法： *　+　- テキスト〜
インデントも使用できる

記述例.example

* テキスト
    *　インデント：テキスト
        *　インデント２：テキスト

👇結果👇

• テキスト
  • インデント：テキスト
    • インデント２：テキスト

---

###✏️ Decimal型

文法： 数字. テキスト〜

記述例.example

1. リスト１
2. リスト２ 
3. リスト３

👇結果👇

1. リスト１
2. リスト２
3. リスト３

---

###✏️ Definition型

文法： HTMLの <dl>タグ をそのまま使うことで実現できる

記述例.example

<dl>
  <dt>MacBookPro</dt>
  <dd>178,000円</dd>
  <dt>iPadPro</dt>
  <dd>128,000円</dd>
</dl>

👇結果👇

MacBookPro

178,000円

iPadPro

128,000円

Definition型のリスト内ではMarkdown記法が使用できない。
例えば、以下のように記述しても適応されない。

マークダウン記法が適応されない

<dl>
  <dt>MacBookPro</dt>
  <dd>とても**欲しい**</dd>
</dl>

👇結果👇

MacBookPro

とても**欲しい**

Definition型リスト内ではMarkdown記法ではなく、HTMLタグを使って修飾しなければならないので、正しくは次のようになる。

HTMLタグなら適応される

<dl>
  <dt>MacBookPro</dt>
  <dd>とても<strong>欲しい</strong></dd>
</dl>

👇結果👇

MacBookPro

とても欲しい

Markdown記法とHTMLタグの対応は次のようになっています。

修飾	Markdown	HTML
ボールド	** **	<strong></strong>
イタリック	__　　__	<em></em>
インライン	``	<code></code>
リンク	[text](url)	<a href="url">text</a>

---

###✏️ Checkbox型

Disc型の記述の後ろに[ ]を入れるとチェックボックスが生成される。
チェックが入った状態のボックスを生成する場合は[x]を入力する。
前後にスペースが必要

- [ ] タスク１
- [×] タスク２

👇結果👇

• タスク１
• タスク２

---

#💎 テーブル記法（表）

###✏️ 入力補完を利用する場合

文法： [ カラム数 ] x [ レコード数 ]

カラムが列（縦列）の数、レコードが行（横の行）の数ですが、
レコード数に見出し行は含まれていません。

画面内で入力されている「x」は、半角小文字のエックスです。
（私は記号だと思い込んでしばらく探していました//）

手書きは非効率過ぎるので、入力補完超オススメです。
見出し行（1行目）と最初のレコード行（3行目）の間に、
|:--|--:|:--:|
のような行が入りますが、コレは実際には表示されていません。
ですが、表内で表示される文字の位置に関係しています。

例えば、上記の場合、カラム（列）は３列で、
左から１番目の列の文字が左寄せ、
　　　２番目の列の文字が右寄せ、
　　　３番目の列の文字が中央寄せとなります。
　　　：の配置でイメージできます。

###✏️手動で記述する場合

コピペ必須ですね・・・

| header     | ヘッダー      |見出し         |
|:-----------|------------:|:------------:|
| 左寄せ      | 右寄せ       | 中央寄せ      |
| column     | column      | column       |
| *column*   | _column_    | **column**   |
| __column__ | `column`    | column       |

表内で一部装飾文字系は利用できます。

👇結果👇

header	ヘッダー	見出し
左寄せ	右寄せ	中央寄せ
column	column	column
column	column	column
column	column	column

#🔗 リンク

文法：[リンクテキスト](URL[半角スペース]"タイトル")
タイトルはリンクテキストにカーソルを乗っけた時に表示されます。

[Qiita:Nukioman](https://qiita.com/Nukioman "ヌキオマン")

👇結果👇

Qiita:Nukioman

タイトルは入れなくても使用できます。

---

###✏️ 同じリンクを複数回使用する

文法：[名前]:URL：こちらがリンクのもととなる文法
　　　[リンクテキスト][名前]：こちらの記述で使いまわせる

私は少し混乱しましたが、文法１行目の[名前]で指定したURLのリンクを複数使用できます。
リンクテキストはそれぞれ変える事ができます。

記述例.example

　[Nukiomanのgithub]:https://github.com/Ryuichi-watanuki
　[リンクテキスト１][Nukiomanのgithub]と[リンクテキスト２][Nukiomanのgithub]
[Nukiomanのgithub][]も使用可能。
　どちらのリンクも同じところへ飛びます。

👇結果👇

リンクテキスト１とリンクテキスト２
NukiomanのGitHub
どちらのリンクも同じところへ飛びます。

#🔗 画像の埋め込み

文法：![代替テキスト](画像のURL "画像タイトル")

リンクで使用した文法の頭に!を付けただけです。
埋め込みなので、そのまま画像が表示されます。せっかくなので折りたたんでみました↓

私の推しキャラ１（知りたい人は、どうぞ）

小泉　花陽[^かよちん] [この子について知りたい人はこちらをどうぞ](https://dic.pixiv.net/a/%E5%B0%8F%E6%B3%89%E8%8A%B1%E9%99%BD) 

私の推しキャラ２（しつこい）

渡辺　曜[^ヨーソロー] [この子について知りたい方はこちらをどうぞ](https://dic.pixiv.net/a/%E6%B8%A1%E8%BE%BA%E6%9B%9C) 

マークダウンを併用するとこんな感じのこともできるんですね。
しかもとても簡単に。

#💎 エスケープ

この記事を書く上で非常に便利でした。
バックスラッシュ \ を、Markdownの前に挿入することで、
Markdownをエスケープ(無効化)することができます。
/ ← 通常のスラッシュと間違えないよう注意！

〜バックスラッシュ \ の入力方法〜
windowsの場合：半角モードで ひらがなの「ろ」キー（文字キーの右下にあります）
macの場合　　：半角モードで option + 「¥」キー
半角の「¥」で表示されてしまう場合はそのままでも多分問題ありませんが、
詳しくはググって下さい。

記述例.example

**太字**
\**太字を無効化、しかしイタリック体になります**
\*\*太字もイタリック体も無効化できます**

👇結果👇

太字
*太字を無効化、しかしイタリック体になります*
**太字もイタリック体も無効化できます**

#💎 注釈

文法： 注釈内容 [^注釈名]: 注釈内容〜
　　　 注釈挿入 本文中に[^注釈名]を記述

注釈内容の：の後、半角スペースが必要です。

　[^参考]: あいうえお
テキスト[^参考]

注釈名は自由に記述し、使用できますが実際に表示されるのは数字です。
この記事ではここまで項目で２回注釈を入れているので、下記では3が表示されるわけですね。

👇結果👇

テキスト¹

#📝 まとめ

まさか最初から最後まで通しで見た人は居ないと思いますが、ご覧頂きありがとうございました❗️

まだ未完成のつもりですが、ある程度網羅出来たとは思うのでさっさと出してしまおうと思います。とはいえ、便利な記法を見つけたら都度ブラッシュアップしていくつもりです。
絵文字とか構成で見にくい等感じましたら、ガンガンお伝えくださいませ(´･ω･`)

ご覧の通り、たくさんの記法が存在するので、全部覚えようとせず、良い感じにまとまっている記事をブックマークしておき都度引き出していきましょう(｀・∀・´)

私はどうせだし作ってみっか、という発想に至りましたがぶっちゃけ既に素晴らしいチートシートがたくさん存在するので忙しい人はそれらを使った方が良いです。

最後に、参考（パクr）にさせていただいた素晴らしい記事を余すことなくご紹介させていただきます。
本当にありがとうございましたm(_ _)m

• Qiita様：Markdown記法 チートシート
• tbpgr様：Markdown記法 サンプル集
• kamorits様：Qiita マークダウン記法 一覧表・チートシート

1. 注釈用テキスト。文末の矢印マークをクリックすると戻れます。 ↩ ↩²