Markdown記法レシピ

サンプル

title

書き方サンプル 

→結果(+補足)
×N個

テキスト系

見出し

   # h1
   ## h2
   ### h3
   #### h4
   ##### h5
   ###### h6

強調

**text**
__テキスト__

text
テキスト

イタリック

*text*
_テキスト_

text
テキスト

強調＋イタリック

***text***
___テキスト___

text
テキスト

打消し線

~~テキスト~~

テキスト

折りたたみ

<details><summary>要約</summary>
詳細が表示されます</details>

要約

詳細が表示されます

**補足** summaryタグで囲まれたところが要約として表示され、そこをクリックすると詳細が表示されます

改行

半角スペース×2 or <br>

補足
<br>のあとに改行が必要

引用

>これはテストです
>>二重引用も可能です
>
>テスト終わりです

これはテストです

二重引用も可能です

テスト終わりです

定義

<dl>
	<dt>項目1</dt>
	<dd>定義1</dd>
        <dt>項目2</dt>
	<dd>定義2</dd>
</dl>

項目1

定義1

項目2

定義2

補足
dlの中には定義を複数書くことができる
dtには項目、ddにはその定義を書く

#### `注釈` ```.md 注釈の書き方: 注釈[^任意のワード] 注釈先の書き方: [^任意のワード]: 注釈はカーソルをホバーすると表示される。クリックすると文末に移動する。 ```

注釈¹

補足
任意のワードは共通であればホントになんでもいい
注釈はすぐ下に書かなくてもどこに書いても、対応する任意のワードの説明がページの一番下に表示される

水平線

 ***
hoge
 ------
 
 -- --
hoge
 * * *

---

hoge

---

hoge

---

補足
* -のどちらかを使用
記号は3つ以上入力する
間にスペースがあっても可

リスト系

箇条書きリスト

- リスト１
+ リスト２
	* 入れ子リスト１
* リスト３

• リスト１

• リスト２
  • 入れ子リスト１

• リスト３

補足
- + *のうちどれかを一文字使用
- + * + 半角スペース + テキスト
階層化したい場合は記号の前にタブ挿入

番号付きリスト

1. リスト１
	1. 入れ子リスト１
	2. 入れ子リスト２
2. リスト２
3. リスト３

1. リスト１
   1. 入れ子リスト１
   2. 入れ子リスト２
2. リスト２
3. リスト３

補足
数値+半角ドット
半角ドットの後にはスペースを挿入
階層化したい場合はタブ挿入

チェックボックス

- [ ] チェックボックスのテスト
- [ ] ハイフン + 半角スペース + [半角スペース]
- [x] 間にxを入力するとチェックが入る
- [ ] チェックボックスのテスト終了

• チェックボックスのテスト
• ハイフン + 半角スペース + [半角スペース]
• 間にxを入力するとチェックが入る
• チェックボックスのテスト終了

リンク系

リンク

https://www.google.com
or
<https://www.google.com>

https://www.google.com
https://www.google.com

リンク()

[Google](https://www.google.com)

Google

リンク(遷移先の位置指定)

[この項目の位置]
(https://qiita.com/KyongminS/items/962b281c5f8c34400b9a/#リンク遷移先の位置指定)

この項目の位置
遷移先の表示させたい箇所のid名を特定して、リンク先URLの末尾に/#id名の形式で追記する

ページ内リンク

[見出し1](#見出し1)

サンプル

補足
見出しの数に関わらず#の数は１つ
その他細かいルールは以下を参考
@aymikmtsさん「[Qiita Markdown記法]ページ内リンク・注釈・折りたたみ等」

画像系

画像挿入

![画像ファイル名](http://placehold.it/100)

コード系

インライン

`const test = "test"`

const test = "test"

pre記法

    ```html
        <div>ここにコードを記入</div>
    ```

    ~~~html
        <p>記号は`でも~でも可</p>
        <p>どちらかの３つでコードを囲む</p>
    ~~~

    ```js:hoge
        // 上の```の右に PGの種類:タイトル でプログラムの種類、ファイル名も表示できる
        const hoge = "ほげほげ"
    ```

以下表示結果

<div>ここにコードを記入</div>

<p>記号は`でも~でも可</p>
<p>どちらかの３つでコードを囲む</p>

hoge

// 上の```の右に PGの種類:タイトル でプログラムの種類、ファイル名も表示できる
const hoge = "ほげほげ";

グラフ系

表

|単語|意味|例|
|---|--:|:-:|
|春|すずしい|春はすずしい|
|夏|あつい|夏はあつい|
|秋|すずしい|秋はすずしい|
|冬|さむい|冬はさむい|

単語	意味	例
春	すずしい	春はすずしい
夏	あつい	夏はあつい
秋	すずしい	秋はすずしい
冬	さむい	冬はさむい

補足
項目の始まる行の前に|---|---|---|を1行挟む必要がある
左寄せ --- or :-- 右寄せ --: 中央寄せ :-:

順次追加

参照

てぃー びーさん 「Markdown記法 サンプル集」
Qiita公式「Markdown記法 チートシート」
oreoさん「Markdown記法一覧」
aymikmtsさん「[Qiita Markdown記法]ページ内リンク・注釈・折りたたみ等」

1. 注釈はカーソルをホバーすると表示される。クリックすると文末に移動する。 ↩