はじめに
いざQiitaで記事を書くぞとなったとき知っておかなければいけないのが Markdown。
この記事は新人エンジニアがMarkdown記法をまとめることでQiitaデビューを果たすものです。
Markdownとは
Markdown（マークダウン）とは文書を記述するための記法（マークアップ言語）でシンプルな書き方で装飾されたHTML文書に変換することができます。
Markdown記法
ソースコード
コードブロック
```または~~~で囲むことでコードブロックとして表示されます。
コードブロック内でコードブロックを書きたいときは使用する記号を変えるか、記号の数をn+3個にすることで書くことができます。
また、使用する言語、ファイル名も表記することができます。
記法
```HTML:index.html
<p>Hello, world!</p>
```
結果
<p>Hello, world!</p>
コードブロック内でDiffの記載
QiitaサポートのMarkdownではdiff_*という名前を付け、行の先頭に+、-を書くことによってDiffを表記することができます。
記法
```diff_HTML:index.html
- <p>Hello, world!</p>
+ <p>Hello, world!</p>
```
結果
- <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は省略可能です。
警告メッセージです。
より強い警告メッセージです。
リスト
順序なしリスト
- 文の先頭に
*、+、-のいずれかを挿入することで表記できます。 -
*、+、-の後ろにはスペースが必要です。 - ネストする場合は段落分の記号を入れることで表記できます。
順序ありリスト
- 文の先頭に
数字.を挿入することで表記できます。 -
数字.の後ろにはスペースが必要です。 - ネストする場合は段落と同じ文字だけのスペースを入れることで表記できます。
説明リスト
HTMLの説明リスト要素を使用することができます。
<dl>
<dt>リンゴ</dt>
<dd>赤い果実</dd>
<dt>レモン</dt>
<dd>黄色い果実</dd>
</dl>
結果
- リンゴ
- 赤い果実。甘い。
- レモン
- 黄色い果実。すっぱい。
チェックボックス
順序なしリストの記述の後ろに[ ]を入れるとチェックボックスになります。
チェック入りボックスを作成する場合は[x]と入力します。
- [ ] チェックボックス１
- [x] チェックボックス２
結果
- チェックボックス１
- チェックボックス２
引用
> 文の先頭に>を記載することで表記されます。
> 連続で使用すると複数行の引用を共起できます。
> > こうすることで引用をネストすることができます。
結果
文の先頭に>を記載することで表記されます。
連続で使用すると複数行の引用を共起できます。こうすることで引用をネストすることができます。
水平線
***
*****
* * *
- - -
--------------------
リンク
タイトルつきリンクを投稿できます。
タイトルはリンクにホバーすると表示されます。
[Qiita](https://qiita.com/ "Qiita Home")
結果
[このリンク][Qiita]はQiitaですが、[このリンク][Qiita]もQiitaです。
[Qiita]: https://qiita.com/
結果
ここのリンクはQiitaですが、こっちのリンクもQiitaです。
画像
テーブル
| 左寄せ | 中央寄せ| 右寄せ |
|:-----------|:------------:|------------:|
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| 左寄せ | 中央寄せ | 右寄せ |
|---|---|---|
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |
| ひだりよせ | ちゅうおうよせ | みぎよせ |
まとめ
よく使うMarkdown記法をまとめました。Markdownを使いMarkdownの記事を書く一石二鳥のいい経験となりました。