MENU
Programmer's Life Log
＼ お問い合わせはこちら！ ／
  1. ホーム
  2. Other
  3. Markdownを完全マスターする｜基礎から応用まで超網羅ガイド

Markdownを完全マスターする｜基礎から応用まで超網羅ガイド

PR
Other

Markdownは、プレーンテキストで書けるシンプルな軽量マークアップ言語です。

2004年にJohn Gruberによって考案され、現在はGitHub・Qiita・Zenn・Notion・各種CMSなど、あらゆる場所で標準的に使われています。

このガイドでは、Markdownの全機能を体系的にまとめます。

Contents
  1. 基本編
  2. 方言・拡張仕様の違い
  3. 書き方のベストプラクティス
  4. まとめ

基本編

見出し

# を行頭に付けることで見出しを作れます。# の数で階層レベルが変わります（H1〜H6）。

Markdown
# H1 見出し（ページタイトル相当）
## H2 見出し
### H3 見出し
#### H4 見出し
##### H5 見出し
###### H6 見出し

注意: # の後には必ずスペースを入れましょう。#見出し と書くと一部のパーサーで認識されません。

段落と改行

段落は、空白行で区切ります。

Markdown
これは1つ目の段落です。
この行は同じ段落内に続きます。

これは2つ目の段落です（空白行で区切られています）。

強制改行（<br>相当）は、行末にスペースを2つ付けます。

Markdown
1行目（末尾にスペース2つ）  
2行目（改行されます）

強調・太字・斜体

それぞれ、以下のように記載します。

Markdown
*イタリック体* または _イタリック体_
**太字** または __太字__
***太字かつイタリック***
~~打ち消し線~~
記法結果用途
*斜体* または _斜体_斜体強調・タイトル等
**太字** または __太字__太字重要なキーワード
***太字斜体***太字斜体特に強調したい箇所
~~打ち消し線~~~~打ち消し線~~訂正・削除テキスト

_ を使う場合、単語の途中では認識されないパーサーもあります。
* の方が互換性が高いです。

リスト

箇条書きリスト（Unordered List）

-、*、+ のいずれかで始めます（混在も可能ですが、統一推奨）。

Markdown
- りんご
- みかん
  - 温州みかん
  - 伊予柑
- ぶどう

番号付きリスト（Ordered List）

Markdown
1. 第一手順
2. 第二手順
3. 第三手順

番号は連番でなくても、最初の数字から自動インクリメントされます。

Markdown
1. 最初
1. 二番目（番号は1でも自動で2になる）
1. 三番目

ネストしたリスト

インデント（スペース2〜4つ）でネスト可能です。

Markdown
1. フロントエンド
   - HTML
   - CSS
   - JavaScript
2. バックエンド
   - Python
   - Go

リンク

インラインリンク

最も基本的なリンクの書き方です。

Markdown
[表示テキスト](https://example.com)
[表示テキスト](https://example.com "ホバー時のタイトル")
[相対パスへのリンク](./other-page.md)

自動リンク

URLやメールアドレスを <> で囲むと自動的にリンクになります。

Markdown
<https://example.com>
<user@example.com>

参照リンク

参照リンク（Reference Links） は、本文中にリンクを直接書かず、文書の別の場所（通常は末尾）でURLをまとめて定義するスタイルです。長い記事や、同じリンクを複数回使う場合に特に便利です。

基本構文

Markdown
[表示テキスト][リンクラベル]

[リンクラベル]: https://example.com
[リンクラベル]: https://example.com "タイトル付き"
[リンクラベル]: ./relative/path.md

使用例

Markdown
詳しくは [公式ドキュメント][docs] を参照してください。
また、[GitHubリポジトリ][repo] もご覧ください。

導入方法は [インストールガイド][install] に記載されています。

<!-- 文書末尾でURLをまとめて定義 -->
[docs]:    https://example.com/docs "公式ドキュメント"
[repo]:    https://github.com/example/repo
[install]: ./docs/install.md

省略記法（ラベルを省略）

表示テキストとラベルが同じ場合、[] を省略できます。

Markdown
[GitHub][] にアクセスしてください。

[GitHub]: https://github.com

相対パスを使った参照リンク

同一サイト内のページへのリンクには、相対パスが便利です。

Markdown
詳しくは [基本編][basic] と [応用編][advanced] をご覧ください。

[basic]:    ../chapters/basic.md
[advanced]: ../chapters/advanced.md

参照リンクを使うメリット

  1. 可読性の向上: 本文中にURLが氾濫せず、文章が読みやすい
  2. メンテナンス性: URLが変わっても1ヶ所を直すだけで済む
  3. 再利用性: 同じリンクを複数回使うときに記述が重複しない
  4. 補足情報の追加: "タイトル" でリンクの説明を付与できる

補足: ラベルは大文字・小文字を区別しません。[Docs] と [docs] は同じラベルとして扱われます。

画像

構文はリンクと似ており、先頭に ! を付けます。

Markdown
![代替テキスト](./images/photo.jpg)
![代替テキスト](https://example.com/image.png "タイトル")

参照スタイルの画像

Markdown
![ロゴ][logo]

[logo]: ./images/logo.png "サイトロゴ"

画像にリンクを付ける

Markdown
[![クリックで拡大](./thumb.jpg)](./full.jpg)

コードブロック

インラインコード

バッククォート ` で囲みます。

Markdown
`console.log("Hello")` を実行してください。

バッククォート自体を含む場合は、2つ重ねて使います。

Markdown
`` `バッククォート` を含む ``

フェンスコードブロック

3つのバッククォート（```）またはチルダ（~~~）で囲みます。言語名を指定するとシンタックスハイライトが効きます。

Markdown
```python
def hello(name: str) -> str:
    return f"Hello, {name}!"

print(hello("World"))
```

対応している言語の例
python, javascript, typescript, bash, sql, yaml, json, html, css, go, rust, java, ruby など。

インデントコードブロック

スペース4つまたはタブでもコードブロックになります（フェンス記法の方が推奨）。

Markdown
    $ pip install django
    $ python manage.py runserver

引用

> を行頭に付けます。

Markdown
> これは引用文です。
> 複数行にわたる場合も `>` を付けます。

> ネストした引用も可能です。
>> これは二重引用です。

引用内に他の要素（リスト・コード・見出しなど）も使えます。

Markdown
> **注意事項**
>
> - 項目1
> - 項目2
>
> `コード` も使えます。

水平線

---、***、___ を単独行に3つ以上並べます。

Markdown
---

***

___

--- の前後には空白行を入れることを推奨します。そうしないと見出し（Setext記法）と混同される場合があります。

テーブル（表）

パイプ | と - でテーブルを作ります（GitHub Flavored Markdown等で対応）。

Markdown
| 左揃え | 中央揃え | 右揃え |
|:-------|:--------:|-------:|
| Apple  |   赤色   |   ¥150 |
| Lemon  |   黄色   |    ¥80 |
| Grape  |   紫色   |   ¥300 |
  • :--- → 左揃え（デフォルト）
  • :---: → 中央揃え
  • ---: → 右揃え

タスクリスト

GitHub Flavored Markdown (GFM) で使える機能です。

Markdown
- [x] 記事の構成を考える
- [x] 各セクションを執筆する
- [ ] 誤字脱字チェック
- [ ] 公開する

脚注

脚注（Footnote）は、CommonMark拡張や一部のフレーバーでサポートされています。

Markdown
Markdownは2004年に考案されました[^1]。

現在はGFM[^gfm]が広く普及しています。

[^1]: John Gruberによって設計されたマークアップ言語です。
[^gfm]: GitHub Flavored Markdownの略。GitHubが独自に拡張した仕様です。

HTMLの直接埋め込み

MarkdownはHTMLのサブセットとして設計されているため、多くの環境でHTMLタグをそのまま書けます。

Markdown
<details>
  <summary>クリックして展開</summary>
  ここに折りたたみコンテンツを書けます。
</details>

<kbd>Ctrl</kbd> + <kbd>C</kbd> でコピー

<mark>ハイライトテキスト</mark>

上付き・下付き文字: H<sub>2</sub>O、E = mc<sup>2</sup>

セキュリティ上の理由から、プラットフォームによってはHTMLタグが無効化または除去される場合があります。

エスケープ

Markdownの特殊文字をそのまま表示したいときは、バックスラッシュ \ でエスケープします。

Markdown
\*アスタリスク\*
\# ハッシュ
\[角括弧\]
\`バッククォート\`

エスケープ可能な文字
\ ` * _ {} [] () # + - . ! |

方言・拡張仕様の違い

Markdownには複数の「方言（フレーバー）」が存在し、対応機能が微妙に異なります。

機能CommonMarkGFM (GitHub)Zenn/Qiita
基本記法✅✅✅
テーブル❌✅✅
タスクリスト❌✅✅
脚注❌✅✅
打ち消し線❌✅✅
絵文字 :smile:❌✅✅
数式（LaTeX）❌✅(一部)✅
カスタムコンテナ❌❌✅

主要な仕様・パーサー:

  • CommonMark: 最も標準化された仕様
  • GFM: GitHubが拡張したMarkdown
  • Pandoc: ドキュメント変換のデファクトスタンダード

書き方のベストプラクティス

見出し階層を正しく使う

H1はページに1つだけ、H2・H3で論理的な階層を構成しましょう。

空白行を適切に入れる

ブロック要素（見出し・リスト・コードブロック・引用）の前後には空白行を入れると、パーサー間の互換性が上がります。

参照リンクは文末にまとめる

長い記事では参照リンクを使い、URLを文末にまとめると可読性が上がります。

Markdown
[公式サイト][official] と [ドキュメント][docs] を参照。

[official]: https://example.com
[docs]:     https://example.com/docs

コードブロックには言語名を指定する

シンタックスハイライトのためにも、言語名は必ず指定しましょう。

画像には必ずaltテキストを書く

アクセシビリティとSEOのために、alt テキストは必ず書きましょう。

Markdown
![Pythonのロゴ画像](./python-logo.png)  ← 意味のあるテキスト
![](./python-logo.png)                  ← NG: 空のalt

ファイル名・見出しのアンカーを意識する

GitHubなどでは見出しが自動的にアンカーリンクになります。日本語の見出しも対応していますが、URLエンコードされることを意識しておきましょう。

Markdown
## 参照リンク  →  #参照リンク としてジャンプ可能

まとめ

Markdownはシンプルながら非常に表現力豊かなフォーマットです。

基本記法を押さえた上で、参照リンク・テーブル・タスクリストなどの拡張機能を活用することで、可読性・メンテナンス性の高いドキュメントが書けます。

ポイントをおさらいします：

  • 見出し階層は論理的に構成する
  • 参照リンクでURLを一元管理する
  • コードブロックには言語名を指定する
  • 画像にはaltテキストを必ず書く
  • 使うプラットフォームの方言（フレーバー）を把握する

ぜひこのガイドをリファレンスとして活用してください。

Other

この記事が気に入ったら
フォローしてね！

シェア・記事の保存はこちら！

この記事を書いた人

にこ@吟遊ライターのアバター にこ@吟遊ライター

基本、書くことで生計を立てています。
ITエンジニア歴は約5年ほど。
Pythonを書くことが多いですが、雑食です。
基本情報技術者試験合格。

関連記事

コメント

コメントする

日本語が含まれない投稿は無視されますのでご注意ください。（スパム対策）