Qiitaに投稿するマークダウン（Markdown）記法のメモ

## Markdown記法とは
Markdown記法とはHTMLを簡単に編集できるように開発されたらしく、HTMLについて深く知らなくてもテキストを装飾することができます。

Qiitaで”Markdown”を検索すると、とても詳しくまとめられた記事が沢山ヒットします。

+ [Markdown記法 チートシート](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)
+ [Qiita Markdown 書き方 まとめ](https://qiita.com/shizuma/items/8616bbe3ebe8ab0b6ca1)

僕も練習を兼ねてこの記事を書きました。
覚えたことをここに書き足していこうと思います。

****************
# :pushpin:もくじ
 レイアウト | 装飾 | 挿入 | リンク
:--------:|:--------:|:--------:|:--------:
| [見出し](#pushpin見出し) | [強調と打消し](#pushpin強調と打消し) | [水平線](#pushpin水平線) | [リンク](#pushpinリンク)　| 
| [改行](#pushpin改行) | [文字の色](#pushpin文字の色) | [画像](#pushpin画像) |  [画像リンク](#pushpin画像リンク)  |
| [箇条書きリスト](#pushpin箇条書きリスト) | [引用](#pushpin引用) | [画像2](#pushpin画像2) | [page内リンク](#pushpinpage%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF) |
| [番号付きリスト](#pushpin番号付きリスト) | [インライン](#pushpinインライン) | [コード](#pushpinコード) | [リンクカード](#pushpinリンクカード) |
| [定義リスト](#pushpin定義リスト) | [絵文字](#pushpin絵文字) | [テーブル](#pushpinテーブル) | - |
| [チェックボックス](#pushpinチェックボックス) | [文字コード](#pushpin文字コード) | [テーブル2](#pushpinテーブル2) | - |
| [折りたたみ](#pushpin折りたたみ) | - | [補足説明](#pushpin補足説明) | - |
| [注釈](#pushpin注釈) | - | [Diff](#pushpindiff) | - |
| - | - | - | - |
| - | - | - | - |




--------
# :pushpin:見出し
「#」を使うと見出しとして表現できる。
1個から6個で使い分ける。
***:pencil2:記述例***
~~~:見出し
# 必ず当たる
### ハズレなし
###### 期間限定
~~~

***:mag:表示例***
# 必ず当たる
### ハズレなし
###### 期間限定

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:改行
改行は\<br>タグを使いますが、行末にスペースを2つ置いても改行されます。

次の例では2行目の末尾にスペースが2個あります。
***:pencil2:記述例***
~~~:改行
1行目
2行目  
3行目<br>
4行目<br><br>
5行目
~~~

***:mag:表示例***
1行目
2行目  
3行目<br>
4行目<br><br>
5行目


[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:強調と打消し
強調表示は「*」(アスタリスク)で囲みます。
繋げる数で強調の度合いが変わります。
打消しは2連の「~」チルダで囲みます。
***:pencil2:記述例***
~~~:強調と打消し
*強調されてます*
**強調されてます。**
***強調されてます。***
~~打消されてます。~~
~~~
***:mag:表示例***
*強調されてます*
**強調されてます。**
***強調されてます。***
~~打消されてます。~~

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:引用
引用は「>」を付けるだけ。
***:pencil2:記述例***
~~~:引用
>> こんにちは

> 夜だけどね
~~~

***:mag:表示例***
>> こんにちは

> 夜だけどね

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:文字の色
文字の色を指定するMarkdown記法はありませんがHTMLの`<fint>`タグが使用できます。

***:pencil2:記述例***
~~~html:文字の色
<font color="Red">赤い文字</font>
<font color="Blue">青い文字</font>
~~~
***:mag:表示例***
<font color="Red">赤い文字</font>
<font color="Blue">青い文字</font>


[- もくじへ -](#pushpinもくじ)

****************

# :pushpin:絵文字
絵文字は[EMOJI CHEAT SHEET](https://www.webfx.com/tools/emoji-cheat-sheet/)の絵文字名を「:」(コロン)で囲みます。
これは絵文字というより画像で貼りつくのでプラットホームに関係なく同じ見た目になります。
次の例では、続けて絵文字とそれを表すUnicodeも並べてありますが、プラットホームによって見た目が変わります。

***:pencil2:記述例***
~~~:絵文字
:smile: 😀 &#x1f600;
:sunglasses: 😎 &#x1f60e;
:scream: 😱 &#x1f631;
~~~

***:mag:表示例***
:smile: 😀 &#x1f600;
:sunglasses: 😎 &#x1f60e;
:scream: 😱 &#x1f631;

[- もくじへ -](#pushpinもくじ)

--------
# :pushpin:文字コード
文字コードでも書けます。

***:pencil2:記述例***
~~~:文字コード
&#x1f4a9;
~~~

***:mag:表示例***
&#x1f4a9;


[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:水平線
水平線は「*」「_」「-」を3つ以上並べます。

***:pencil2:記述例***
~~~:水平線
——-
***
________________
~~~
***:mag:表示例***
***
________________
- - -
[- もくじへ -](#pushpinもくじ)


****************
# :pushpin:注釈
注釈を入れることもできます。

***:pencil2:記述例***
~~~:注釈
番号[^1]で注釈[^5]

\[^1]: 同じ番号の注釈に飛びます。
\[^5]: 注釈はどこに記述しても末尾にまとめられます。
~~~

***:mag:表示例***
番号[^1]で注釈[^5]

[^1]: 同じ番号の注釈に飛びます。
[^5]: 注釈はどこに記述しても末尾にまとめられます。

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:箇条書きリスト
箇条書きリストは「+」「-」「*」
TABかスペース4個を入れるとネストされます。
[番号付きリスト](#番号付きリスト)と併用もできます。
***:pencil2:記述例***
~~~:箇条書きリスト
+ くだもの
    + カリン
        + 花梨
            + Chinese quince
    + レモン
        + 檸檬
- けだもの
    - キリン
        - 麒麟
            1. giraffe
            2. किरिन
~~~
***:mag:表示例***
+ くだもの
    + カリン
        + 花梨
            + Chinese quince
    + レモン
        + 檸檬
- けだもの
    - キリン
        - 麒麟
            1. giraffe
            2. किरिन

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:番号付きリスト
番号付きリストは「1.」(数字にドット)
リストに階層的な番号をつけます。
数字はなんでも構わず、ただ数字として認識されて番号を付け直されます。
TABかスペース4個でネストされます。
[箇条書きリスト](#箇条書きリスト)と併用もできます。

***:pencil2:記述例***
~~~:番号付きリスト
1. お湯を沸かす
    2. ヤカンに水を入れる
    3. 火にかける
2. カップ麺の封を開ける
    3. 中の具やスープの素を取り出す
3. お湯を注ぐ
    4. 説明書き通りに具やスープの素を入れる
        - 商品により先に入れるものと後に入れるものがあるので注意が必要です。
    5. 所定の位置までお湯を注ぐ
4. 待つ
    + 商品により待ち時間が異なり3分や5分が多いと思われる。
5. 出来上がり。
~~~
***:mag:表示例***
1. お湯を沸かす
    2. ヤカンに水を入れる
    3. 火にかける
2. カップ麺の封を開ける
    3. 中の具やスープの素を取り出す
3. お湯を注ぐ
    4. 説明書き通りに具やスープの素を入れる
        - 商品により先に入れるものと後に入れるものがあるので注意が必要です。
    5. 所定の位置までお湯を注ぐ
4. 待つ
    + 商品により待ち時間が異なり3分や5分が多いと思われる。
5. 出来上がり。

[- もくじへ -](#pushpinもくじ)

--------
# :pushpin:定義リスト
`<dl>,<dt>,<dd>`タグを使った定義リスト

***:pencil2:記述例***
~~~html:定義リスト
<dl>
<dt>くだもの</dt> 
<dd>カリン</dd>
<dt>けだもの</dt> 
<dd>キリン</dd>
</dl>
~~~
***:mag:表示例***
<dl>
<dt>くだもの</dt> 
<dd>カリン</dd>
<dt>けだもの</dt> 
<dd>キリン</dd>
</dl>

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:チェックボックス
箇条書きリストにはチェックボックスを付けることができます。
「x」(小文字のエックス)を入れるとチェック入ります。

***:pencil2:記述例***
~~~:チェックボックス
+ [ ] 項目1
+ [x] 項目2
+ [x] 項目3
~~~
***:mag:表示例***
+ [ ] 項目1
+ [x] 項目2
+ [x] 項目3

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:折りたたみ
`<details>`タグと`<summary>`タグを使うと折りたたみもできます。

***:pencil2:記述例***
~~~html:折りたたみ
<details><summary> 要約として表示する文章 </summary> 追加情報として表示したい詳細情報 </details>
~~~
***:mag:表示例***
<details><summary> 要約として表示する文章 </summary> 追加情報として表示したい詳細情報 </details>

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:リンク
リンクはURLをそのまま書けば自動的にリンクされます。（[リンクカード](#pushpinリンクカード)）
埋め込みは\[リンクテキスト](URL)のように記述します。
リンク先を定義しておけば何度も使う場合に便利です~~が、よくわからないので、ちゃんと調べてから書こうと思います。~~
[こちら記事][師匠の記事]の「 **複数箇所への同じリンクの書き方** 」で学びました。
***:pencil2:記述例***
~~~:リンク

https://qiita.com

[キータ](https://qiita.com)

[キータ](https://qiita.com "Qiita ホーム")　(タイトル付き)

リンク先の定義は、[師匠の記事]から学びました。
[この][師匠の記事] リンクも [こちら][師匠の記事] のリンクも師匠の記事です。



[師匠の記事]:https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF
~~~
***:mag:表示例***

https://qiita.com

[キータ](https://qiita.com)

[キータ](https://qiita.com "Qiita ホーム")　(タイトル付き)

リンク先の定義は、[師匠の記事]から学びました。
[この][師匠の記事] リンクも [こちら][師匠の記事] のリンクも師匠の記事です。

:::note
定義はページの末尾に書いても反映されます。
:::


[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:リンクカード
URLをそのまま書けばリンクカードとして表示されます。

:::note warn
URLの前後に空行が必要です。
:::

***:pencil2:記述例***
~~~:リンクカード
<空行>
https://qiita.com
<空行>
~~~
***:mag:表示例***

https://qiita.com



[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:page内リンク
ページ内リンクはURLではなく**見出し**の文字を書けば自動的にリンクされます。
埋め込みは`[リンクテキスト](#見出し)`のように記述します。
マークダウンをHTMLに変換するときに`<a>`タグの`id`に見出しの文字がそのまま適用されていれば思った通りの動作が期待できますが、同一の見出しが複数存在するなどHEMLのソースに見出し文字と違う`id`が付いてる場合は当然ながら動作しません。

***:pencil2:記述例***

~~~:page内リンク
[page内リンク](#pushpinpage内リンク)

[page内リンク](#pushpinpage%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF)
~~~

***:mag:表示例***
[page内リンク](#pushpinpage内リンク)

[page内リンク](#pushpinpage%E5%86%85%E3%83%AA%E3%83%B3%E3%82%AF)

[- もくじへ -](#pushpinもくじ)
****************
# :pushpin:画像
画像の添付は「!」(エクスクラメーションマーク)に続けて[リンク](#リンク)と同じように記述します。
\[代替テキスト](URL)のように記述します。
\[代替テキスト](URL "Title")のように記述するとマウスオーバーしたときに"Title"が表示されます。

***:pencil2:記述例***
~~~:画像
![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)タイトルなし

![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "Qiita logo")タイトルあり

[![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "Qiita ロゴ")](https://qiita.com "Qiita ホーム")リンクあり
~~~

***:mag:表示例***
![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)タイトルなし

![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "Qiita logo")タイトルあり

[![Qiita logo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "Qiita ロゴ")](https://qiita.com "Qiita ホーム")リンクあり

:::note
画像の`title`属性はリンクの`title`より優先されます。
:::

[- もくじへ -](#pushpinもくじ)


****************
# :pushpin:画像2
画像のサイズによってはHTMLの`<img>`タグで記述される場合もあります。
サイズを変更したい場合などは`<img>`タグを使います。

**使用できた属性**

- **alt**：テキストベースのブラウザ用の代替テキスト
- **title**：マウスオーバー時に表示される補足的な情報
- **width**：画像の表示幅

***:pencil2:記述例***
~~~html:画像2
<img width="100" alt="Qiita logo" title="Qiita logo" src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png">
~~~

***:mag:表示例***
<img width="100" alt="Qiita logo" title="Qiita logo" src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png">


[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:画像リンク
画像リンクはHTMLの`<a>`タグと`<img>`タグで記述できますが、マークダウンでもできます。

***:pencil2:記述例***
~~~html:画像リンク
<!-- HTMLタグ <a><img></a> -->
<a href="https://qiita.com/"><img width="100" alt="Qiita logo" src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png"></a>

<!-- マークダウンとHTMLタグ [<img>](URL) -->
[<img width="100" alt="Qiita logo" title="Qiita logo" src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png">](https://qiita.com/)

<!-- マークダウン [![タイトル](画像のURL)](リンクのURL) -->
[![Qiita ホーム](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)](https://qiita.com/)

~~~

***:mag:表示例***
<!-- HTMLタグ <a><img></a> -->
<a href="https://qiita.com/"><img width="100" alt="Qiita logo" title="Qiita logo"src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png"></a>

<!-- マークダウンとHTMLタグ [<img>](URL) -->
[<img width="100" alt="Qiita logo" title="Qiita logo" src="https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png">](https://qiita.com/)

<!-- マークダウン [![タイトル](画像のURL)](リンクのURL) -->
[![Qiita ホーム](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png)](https://qiita.com/)



[- もくじへ -](#pushpinもくじ)


****************
# :pushpin:インライン
インラインは「`」(バッククォート)で囲みます。
インライン中にカラーコードがあるとカラーも表示されます。
***:pencil2:記述例***
~~~:インライン
python3の最初のコードは`print('Hello World')`です。
僕の好きな色は`#0000ff`です。
~~~

***:mag:表示例***
python3の最初のコードは`print('Hello World')`です。
僕の好きな色は`#0000ff`です。

[- もくじへ -](#pushpinもくじ)

****************
# :pushpin:コード
コードは3連の「`」(バッククォート)か「~」(チルダ)で囲みます。
続けて言語名を指定するとシンタックスハイライトが使えます。
「:」コロン以降にタイトルを入れることもできます。
<details><summary>シンタックスハイライト対応言語</summary>

[Qiitaでシンタックスハイライト可能な言語一覧 - Qiita](https://qiita.com/Qiita/items/e84f5aad7757afce82ba)
ABAP ActionScript Apache API Blueprint AppleScript Awk BIML 1C (BSL) C Ceylon CFScript Clojure CMake CoffeeScript Common Lisp Config File Console Coq C++ Crystal C# CSS D Dart diff digdag Docker DOT Eiffel Elixir Elm ERB Erlang Factor Fortran FSharp Gherkin GLSL Go Gradle Graphql Groovy Hack Haml Handlebars Haskell Hashicorp Configuration Language HTML HTTP HyLang IDL IgorPro INI Io Irb Irb_output Java JavaScript Jinja JSON Json-doc Jsonnet JSX Julia Kotlin Lasso Liquid Literate CoffeeScript Literate Haskell LLVM Lua Make Markdown MATLAB MoonScript Mosel MXML Nasm nginx Nim Nix Objective-C OCaml Pascal Perl PHP Plain Text Plist Pony powershell Praat Prolog Prometheus .properties Protobuf Puppet Python Q QML R Racket Ruby Rust Sass Scala Scheme SCSS sed shell Sieve Slim Smalltalk Smarty SML SQL Swift TAP Tcl Terraform TeX TOML TypeScript Tulip Turtle/TriG Twig TypeScript Vala Visual Basic Verilog and System Verilog VHDL 2008 VimL Vue Wollok XML YAML 
[List of supported languages and lexers · rouge-ruby/rouge Wiki · GitHub](https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers)</details>

***:pencil2:記述例***
<pre>~~~python:sample.py
for i in range(1,101):
  j = (i % 3 == 0) + (i % 5 == 0) * 2
  s = [i,'Fizz','Buzz','FizzBuzz'][j]
  print(s)
~~~</pre>

***:mag:表示例***
~~~python:sample.py
for i in range(1,101):
  j = (i % 3 == 0) + (i % 5 == 0) * 2
  s = [i,'Fizz','Buzz','FizzBuzz'][j]
  print(s)
~~~

[- もくじへ -](#pushpinもくじ)



# :pushpin:Diff
[Qiitaでサポートしている各シンタックス](https://github.com/rouge-ruby/rouge/wiki/List-of-supported-languages-and-lexers)に、新たにdiff_*という名前をつけることでDiffを追加することができます。
-、+を行の先頭に書くことでDiffを表現することができます。
<pre>~~~diff_python:python
- print("Hello,")
+ print("World")
~~~</pre>

~~~diff_python:python
- print("Hello,")
+ print("World")
~~~


<pre>~~~diff_c:c
#include <stdio.h>

main()
{
-  printf("Hello");
+  printf("World");
}
~~~</pre>
~~~diff_c:c
#include <stdio.h>

main()
{
-  printf("Hello");
+  printf("World");
}
~~~




[- もくじへ -](#pushpinもくじ)


--------
# :pushpin:テーブル
Markdownでは「|」(バーティカルバー)と「-」(ハイフン)と「:」(コロン)を使ってテーブルを書きます。
テーブルは次の3つの行で構成されます。

+ **ヘッダ行**
    + 必ず必要です。
    + 強調表示になります。
+ **アライメント行**
    + 次のように列の文字位置を指定します。(3文字以上で「-」(ハイフン)は好きなだけ追加できます。)
        + 「:--」左寄せ
        + 「:-:」中央
        + 「--:」右寄せ
+ **データ行**
    + 必要な分だけ追加できます。

***:pencil2:記述例***
~~~:テーブル
| ヘッダ1 | ヘッダ2 | ヘッダ3 |
|:-------:|-------:|:-------|
| データa1 | データb1 | データc1 |
| データa2 | データb2 | データc2 |
~~~

***:mag:表示例***
| ヘッダ1 | ヘッダ2 | ヘッダ3 |
|:--------:|--------:|:--------|
| データa1 | データb1 | データc1 |
| データa2 | データb2 | データc2 |

[- もくじへ -](#pushpinもくじ)
****************
# :pushpin:テーブル2
HTMLタグを使えばもっと柔軟なテーブルを作ることが可能です。
***:pencil2:記述例***
~~~html:HTMLのテーブル
<table>
<tr>
  <th colspan=2>Filza File Manager</th>
</tr>
<tr>
  <td><b>価格</b></td>
  <td>$5.99(トライアルは無料)</td>
</tr>
<tr>
  <td><b>開発者</b></td>
  <td><a href=http://www.tigisoftware.com/default/>TIGI Software</a></td>
</tr>
<tr>
  <td><b>リポジトリ</b></td>
  <td><a href=https://cydia.saurik.com/api/share#?source=http://apt.thebigboss.org/repofiles/cydia/
</a>BigBoss</td>
</tr>
</table>
~~~

***:mag:表示例***
<table>
<tr>
  <th colspan=2>Filza File Manager</th>
</tr>
<tr>
  <td><b>価格</b></td>
  <td>$5.99(トライアルは無料)</td>
</tr>
<tr>
  <td><b>開発者</b></td>
  <td><a href=http://www.tigisoftware.com/default/>TIGI Software</a></td>
</tr>
<tr>
  <td><b>リポジトリ</b></td>
  <td><a href=https://cydia.saurik.com/api/share#?source=http://apt.thebigboss.org/repofiles/cydia/
</a>BigBoss</td>
</tr>
</table>

[- もくじへ -](#pushpinもくじ)

# :pushpin:補足説明
補足、注意、警告など、目を引く説明をしたい場合は、「:::」（3連のコロン）を使い、説明したい内容を`:::note`と`:::`で囲みます。

:::note
`note`の後に`warn`をつけると「注意」、`alert`をつけると「警告」になります。
:::
:::note warn
補足したい内容と `:::note info` と `:::` はそれぞれ別の行にする必要があります。
:::

***:pencil2:記述例***
~~~:補足説明
:::note
インフォメーション
説明を省きましたが `:::note info` の `info` は省略できます。
:::

:::note warn
注意
よく噛んで、ゆっくり食べましょう。
:::

:::note alert
警告
お使いのパソコンからコロナウイルスが検出されました。
:::
~~~

***:mag:表示例***

:::note
インフォメーション
説明を省きましたが `:::note info` の `info` は省略できます。
:::

:::note warn
注意
よく噛んで、ゆっくり食べましょう。
:::

:::note alert
警告
お使いのパソコンからコロナウイルスが検出されました。
:::

:::note
note内では次のマークダウン記法が使用できます
- リスト
    - これそのもの
- 強調
    - **強調**は結構使います。 
- 打ち消し線
    - ~~これはあまり使いません。~~
- コードスパン
    - `これのこと？`
- リンク
    - [Markdown記法 チートシート - Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d#code-spans---%E3%82%B3%E3%83%BC%E3%83%89%E3%82%B9%E3%83%91%E3%83%B3)
- 画像
    ![QiitaLogo](https://cdn.qiita.com/assets/siteid-reverse-6044901aace6435306ebd1fac6b7858c.png "QiitaLogo")
- コードブロック
    ~~~python:hello
    print("Hello,World")
    ~~~
:::

[- もくじへ -](#pushpinもくじ)

# :rabbit:参考にさせていただきました。
[Qiitaのテーブルの書き方についてまとめた](https://qiita.com/zakuroishikuro/items/f33929eab9d55c5bd073)

[- もくじへ -](#pushpinもくじ)

[Topへ](#markdown%E8%A8%98%E6%B3%95%E3%81%A8%E3%81%AF)


****************

[師匠の記事]:https://qiita.com/Qiita/items/c686397e4a0f4f11683d#links---%E3%83%AA%E3%83%B3%E3%82%AF