超初心者向け マークダウンの書き方

プログラミングを勉強するのにたくさんのブログ記事を読むことになりますが、プログラミングの世界では、文章を書くときにマークダウン記法で書くことが一般的です。マークダウン記法とは、簡単に文章の形を整えて読みやすい形にすることのできる記法です。また多くの人が、プログラミングを勉強する過程で、ブログを書いて、発信していくことが大切だと言っています。そこで今回は、これからプログラミングの勉強を始める人に向けて、マークダウン記法について解説したいと思います。ぜひ皆さんも私と一緒にプログラミングを勉強しながらブログで記事を書いていきましょう。

目次

1. タイトルの書き方
2. 太文字の書き方
3. 斜体文字の書き方
4. 打ち消し線の書き方
5. リストの書き方
   1. 順序なしリスト
   2. 番号付きリスト
6. チェックボックス
7. 引用の書き方
8. 水平線の書き方
9. リンク
10. タイトル付きリンク
11. ページ内リンク
12. インラインコード
13. コードブロック
14. イメージ
15. テーブル
16. 補足説明
17. 参考

Qiitaでアカウントを作ろう

Qiitaは、プログラマー向けのブログサイトで、マークダウン記法で文章を書くことができます。マークダウン記法に慣れるにも、ブログを書くにも向いているので、Qiitaでアカウントを作って皆さんもブログを書いてみてください。

今回紹介しているMarkdownは、Qiitaで使えるものですが、サイトやサービスによっては使えないものや、独自のものが開発されている場合もあります。

Qiita

タイトルの書き方

#の後にスペースキーを押すと大見出し、Heading1になります。
##の後にスペースキーを押すと中見出し、Heading2になります。
このように、# の数を1~6まで増やしていくと、Heading1~Heading6まで、
を書くことができます。

書き方

# 大見出し Heading1
## 中見出し Heading2
### 小見出し Heading3
...
###### Heading6

結果

Heading1

Heading2

Heading3

Heading4

Heading5

Heading6

太文字の書き方

太文字にしたい文字の両側に*を2つ入力すると太文字を書くことができます。

書き方

**太文字**
__太文字__

結果
太文字
太文字

斜体文字の書き方

斜体にしたい文字の両側に*を1つ入力すると斜体文字を書くことができます。

書き方

*斜体文字*
_斜体文字_

結果
斜体文字
斜体文字

打ち消し線の書き方

打ち消し線を使いたい文字の両側に~を2つ入力します。

書き方

~~打ち消し線~~

結果
打ち消し線

*斜体ではなくなる*

リストの書き方

順序なしリスト

-を入力して、スペースキーを押すとリストができます。

書き方

- リスト
- リスト
- リスト
    - リスト
    - リスト

結果

• リスト
• リスト
• リスト
  • リスト
  • リスト

番号付きリスト

1.を入力して、スペースキーを押すとリストができます。

書き方

1. リスト1
1. リスト2
1. リスト3

結果

1. リスト1
2. リスト2
3. リスト3

チェックボックス

- [ ]を入力してスペースキーを押すとチェックボックスが作れます。チェックが入った状態にするには、-[x]を入力します。

書き方

- [ ] タスク1
- [x] タスク2

結果

• タスク1
• タスク2

引用の書き方

>を文頭に入力すると引用になります。

書き方

> 文頭に入力します。
> 引用になります。

結果

文頭に入力します。
引用になります。

水平線の書き方

-を3つ入力すると水平線が入ります。

書き方

---
___

結果

---

---

リンク

書き方

[Markdown記法 チートシート - Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d)

結果
Markdown記法 チートシート - Qiita

タイトル付きリンク

書き方

[Markdown記法 チートシート - Qiita](https://qiita.com/Qiita/items/c686397e4a0f4f11683d "Markdown チートシート")

結果
Markdown記法 チートシート - Qiita

ページ内リンク

書き方

[リスト](#リスト)

結果
リスト

インラインコード

書き方

`コード`

結果
コード

コードブロック

書き方

    ```
    コードブロック
    ```

結果

コードブロック

イメージ

書き方

![タイトル](URL)
![Markdown Logo](https://upload.wikimedia.org/wikipedia/commons/4/48/Markdown-mark.svg)

結果

テーブル

書き方

| 名前   | Email     |
| ----- | --------- |
| Qiita | qiita.com |

結果

名前	Email
Qiita	qiita.com

中央揃え

書き方

| 名前   | Email     |
| :-----: | :---------: |
| Qiita | qiita.com |

結果

名前	Email
Qiita	qiita.com

左揃え

書き方

| 名前   | Email     |
| :----- | :--------- |
| Qiita | qiita.com |

結果

名前	Email
Qiita	qiita.com

右揃え

書き方

| 名前   | Email     |
| -----: | ---------: |
| Qiita | qiita.com |

結果

名前	Email
Qiita	qiita.com

補足説明

補足説明を入れる場合は、:::note infoと:::で囲みます。infoをwarnやalertに変えて別のメッセージにすることもできます。

書き方

:::note info
インフォメーション
:::

:::note warn
警告
:::

:::note alert
より強い警告
:::

結果

インフォメーション

警告

より強い警告

参考