はじめに

いざQiitaで記事を書くぞとなったとき知っておかなければいけないのが Markdown。
この記事は新人エンジニアがMarkdown記法をまとめることでQiitaデビューを果たすものです。

Markdownとは

Markdown（マークダウン）とは文書を記述するための記法（マークアップ言語）でシンプルな書き方で装飾されたHTML文書に変換することができます。

Markdown記法

ソースコード

コードブロック

```または~~~で囲むことでコードブロックとして表示されます。
コードブロック内でコードブロックを書きたいときは使用する記号を変えるか、記号の数をn+3個にすることで書くことができます。
また、使用する言語、ファイル名も表記することができます。

記法

```HTML:index.html
<p>Hello, world!</p>
```

結果

index.html

<p>Hello, world!</p>

コードブロック内でDiffの記載

QiitaサポートのMarkdownではdiff_*という名前を付け、行の先頭に+、-を書くことによってDiffを表記することができます。

記法

```diff_HTML:index.html
- <p>Hello, world!</p>
+ <p>Hello, world!</p>
```

結果

index.html

- <p>Hoge!Hoge!</p>
+ <p>Hello, world!</p>

コードスパン

文書中にインラインで表記することができます。
コードスパン内で`（バッククオート）を使用する場合はn+1個のバッククオートで囲むことで表記できます。
CSSの<color>型の場合は横にその色が表示されます。

記法

`<p>Hoge!Hoge</p>`を`<p>Hello, world!</p>`に修正しました。
`` `バッククオート` ``もしくは``` `` バッククオート `` ```
`#ffcccc`

結果

<p>Hoge!Hoge</p>を<p>Hello, world!</p>に修正しました。
`バッククオート`もしくは`` バッククオート ``
#ffcccc

テキストの装飾

見出し

記法

# H1見出し
## H2見出し
### H3見出し

強調・強勢

記法

_ か * で囲むと _ HTMLのemタグ _
__ か ** で囲むと __HTMLのstrongタグ__

結果

_ か * で囲むと HTMLのemタグ
__ か ** で囲むと HTMLのstrongタグ

打ち消し線

記法

~~ で囲むと ~~打消し線~~

結果

~~ で囲むと ~~打消し線~~

折りたたみ

HTMLの詳細折りたたみ要素を使用することができます。

HTMLタグの下に空行が必要です。

記法

<details><summary>ラベル</summary>

(上に空行が必要)
折りたたみ内容
</details>

結果

ラベル

(上に空行が必要)
折りたたみ内容

補足説明

記法

:::note info
補足説明です。
noteの後ろのinfoは省略可能です。
:::

:::note warn
警告メッセージです。
:::

:::note alert
より強い警告メッセージです。
:::

結果

補足説明です。
noteの後ろのinfoは省略可能です。

警告メッセージです。

より強い警告メッセージです。

引用

記法

> 文の先頭に>を記載することで表記されます。
> 連続で使用すると複数行の引用を共起できます。
> > こうすることで引用をネストすることができます。

結果

文の先頭に>を記載することで表記されます。
連続で使用すると複数行の引用を共起できます。

こうすることで引用をネストすることができます。

水平線

記法

***
*****
* * *
- - -
--------------------

リンク

タイトルつきリンクを投稿できます。
タイトルはリンクにホバーすると表示されます。

記法

[Qiita](https://qiita.com/ "Qiita Home")

結果

Qiita

記法：複数個所同じリンクを書く

[このリンク][Qiita]はQiitaですが、[このリンク][Qiita]もQiitaです。

[Qiita]: https://qiita.com/

結果

ここのリンクはQiitaですが、こっちのリンクもQiitaです。

画像

記法

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

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3355772/933ec1be-3ed6-2977-eeb1-8b524cc4ee63.png "image")

テーブル

記法

| 左寄せ | 中央寄せ| 右寄せ |
|:-----------|:------------:|------------:|
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |

左寄せ	中央寄せ	右寄せ
ひだりよせ	ちゅうおうよせ	みぎよせ
ひだりよせ	ちゅうおうよせ	みぎよせ
ひだりよせ	ちゅうおうよせ	みぎよせ

まとめ

よく使うMarkdown記法をまとめました。Markdownを使いMarkdownの記事を書く一石二鳥のいい経験となりました。