MarkdownCo
ブログに戻る
ガイド

Markdown拡張構文：例付き完全ガイド

テーブル、コードブロック、脚注、タスクリスト、絵文字など、Markdownの拡張構文要素をすべて網羅。すぐに使える明確な例付きで解説します。

Markdown拡張構文：例付き完全ガイド

Markdownの基本構文は日常のほとんどの執筆ニーズに対応できますが、それ以上の機能が必要な場面もあります。拡張構文はテーブル、脚注、タスクリストなどの強力な機能を追加し、Markdownをシンプルなフォーマットツールからフル機能のライティング環境へと進化させます。

すべてのMarkdownプロセッサがすべての拡張構文要素をサポートしているわけではありません。使用する前に、お使いのツールやプラットフォームが必要な機能をサポートしているか確認してください。朗報として、GitHub、GitLab、VS Code、主要な静的サイトジェネレーターなど、ほとんどの最新プラットフォームがこれらの拡張機能の大部分をサポートしています。

基本構文にまだ慣れていない方は、まずMarkdown基本構文ガイドをご覧ください。

テーブル

Markdown Tables

テーブルを使うと、Markdownで直接データを行と列に整理できます。パイプ（|）で列を区切り、ハイフン（-）でヘッダー行を作成します。

| Feature       | Basic Syntax | Extended Syntax |
| ------------- | ------------ | --------------- |
| Tables        | No           | Yes             |
| Footnotes     | No           | Yes             |
| Task Lists    | No           | Yes             |

レンダリング結果：

FeatureBasic SyntaxExtended Syntax
TablesNoYes
FootnotesNoYes
Task ListsNoYes

列の配置

ヘッダー区切り行にコロンを追加して、テキストの配置を制御します：

| Left Aligned | Center Aligned | Right Aligned |
| :----------- | :------------: | ------------: |
| Text         |     Text       |          Text |
| More         |     More       |          More |
  • :--- 左揃え（デフォルト）
  • :---: 中央揃え
  • ---: 右揃え

テーブルのコツ

  • ソースコード内でパイプを完璧に揃える必要はありません——揃えると見やすくなるだけです
  • テーブルは太字、イタリック、コード、リンクなどのインライン書式をサポートしています
  • テーブルはセル内の見出し、引用ブロック、リスト、画像をサポートしていません
  • 複雑なデータの場合は、HTMLテーブルの使用を検討してください

フェンスコードブロック

Markdown Fenced Code Blocks

基本構文ではインデントコードブロックをサポートしていますが、フェンスコードブロックの方がはるかに実用的です。コードをトリプルバッククォート（```）またはトリプルチルダ（~~~）で囲み、シンタックスハイライト用に言語を指定します。

```python
def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))
```

完全なシンタックスハイライト付きでレンダリングされます：

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n - 1) + fibonacci(n - 2)

print(fibonacci(10))

サポートされている言語

ほとんどのレンダラーは数十の言語識別子をサポートしています。最も一般的なものは以下の通りです：

Language        Identifier
--------------  ----------------
JavaScript      javascript / js
Python          python / py
TypeScript      typescript / ts
HTML            html
CSS             css
JSON            json
Bash            bash / sh
SQL             sql
Markdown        markdown / md

コードブロックのベストプラクティス

  • 必ず言語を指定する——シンタックスハイライトが有効になり、可読性が向上します
  • 適用する言語がない場合は text または plaintext を使用
  • フェンスブロックはインデントブロックより推奨されます。ハイライトをサポートし、各行をインデントする必要がないためです

脚注

Markdown Footnotes

脚注を使うと、本文を煩雑にすることなく注釈や参考文献を追加できます。脚注の内容はページの下部に表示されます。

Markdown was created by John Gruber in 2004.[^1] It has since become
the standard for technical writing.[^2]

[^1]: John Gruber's original Markdown project is documented on
    [Daring Fireball](https://daringfireball.net/projects/markdown/).
[^2]: Markdown is used by GitHub, Stack Overflow, Reddit, and
    countless other platforms.

参照番号はテキスト内で上付きリンクとしてレンダリングされ、完全な注釈はドキュメントの下部に一覧表示されます。

脚注の構文ルール

  • 脚注参照は [^identifier] を使用——識別子は数字または単語（スペース不可）
  • 脚注定義は [^identifier]: で始まり、続いて内容を記述
  • 複数段落の脚注は、後続の段落にインデント（スペース4つまたはタブ1つ）が必要
  • 脚注定義はドキュメント内のどこにでも配置可能——常に下部にレンダリングされます
Here's a footnote with multiple paragraphs.[^note]

[^note]: This is the first paragraph of the footnote.

    This is the second paragraph, indented with four spaces.

    You can even include code: `console.log("hello")`

見出しID

カスタム見出しIDを使うと、ドキュメントの特定セクションへの正確なアンカーリンクを作成できます。見出しテキストの後に波括弧でIDを追加します。

### My Custom Section {#custom-section}

生成されるHTML：

<h3 id="custom-section">My Custom Section</h3>

見出しIDへのリンク

見出しにIDが設定されると、直接リンクできます：

Jump to [My Custom Section](#custom-section).

これは長いドキュメントの先頭に手動で目次を作成する際に特に便利です：

## Contents

- [Introduction](#introduction)
- [Getting Started](#getting-started)
- [Advanced Usage](#advanced-usage)
- [FAQ](#faq)

互換性に関する注意

多くのプロセッサ（GitHubを含む）は、{#id} 構文がなくても見出しテキストから自動的に見出しIDを生成します。ただし、明示的にIDを設定すると完全な制御が得られ、プラットフォーム間で一貫した動作が保証されます。

定義リスト

定義リストは、用語集、FAQ、用語とその説明をペアにする必要があるコンテンツに最適です。

Markdown
: A lightweight markup language for creating formatted text
  using a plain-text editor.

HTML
: The standard markup language for documents designed to be
  displayed in a web browser.

YAML
: A human-readable data serialization language commonly used
  for configuration files.

生成されるHTML：

<dl>
  <dt>Markdown</dt>
  <dd>A lightweight markup language for creating formatted text
      using a plain-text editor.</dd>
  <dt>HTML</dt>
  <dd>The standard markup language for documents designed to be
      displayed in a web browser.</dd>
</dl>

複数の定義

1つの用語に複数の定義を持たせることができます：

Markdown
: A lightweight markup language.
: A tool used by developers and writers worldwide.

互換性に関する注意

定義リストはすべてのプロセッサでサポートされているわけではありません。GitHub Flavored Markdownはサポートしていませんが、多くの静的サイトジェネレーターやドキュメントツールはサポートしています。

取り消し線

取り消し線は、テキストに水平線を引いて、削除済みまたは古い内容を示します。ダブルチルダ（~~）でテキストを囲みます。

The project deadline is ~~Friday~~ Monday.
~~Old information~~ has been replaced with updated content.

レンダリング結果：

The project deadline is Friday Monday.

HTML出力：

<p>The project deadline is <del>Friday</del> Monday.</p>

取り消し線は広くサポートされています。GitHub Flavored Markdown（GFM）の一部であり、ほとんどの最新プラットフォームで動作します。

タスクリスト

Markdown Task Lists

タスクリスト（チェックボックスやToDoリストとも呼ばれます）は、インタラクティブなチェックリストを作成します。未完了項目には - [ ]、完了項目には - [x] を使用します。

- [x] Research extended syntax features
- [x] Write first draft
- [x] Add code examples for each section
- [ ] Create cover image
- [ ] Proofread and edit
- [ ] Publish the article

レンダリング結果：

  • Research extended syntax features
  • Write first draft
  • Add code examples for each section
  • Create cover image
  • Proofread and edit
  • Publish the article

タスクリストの活用シーン

タスクリストは以下の場面で特に人気があります：

  • GitHubのIssueやPull Request——作業項目の進捗を追跡
  • プロジェクトドキュメント——プロセスのステップを概説
  • 会議メモ——アクションアイテムとそのステータスを記録

GitHubなどのプラットフォームでは、これらのチェックボックスはインタラクティブです。レンダリングされたビューで直接クリックして切り替えることができます。

絵文字

Markdownドキュメントに絵文字を追加する方法は2つあります。

コピー＆ペースト

最もシンプルな方法——任意のソースから絵文字をコピーして、テキストに直接貼り付けます：

That's a great idea! 🎉 Let's ship it! 🚀

絵文字は標準的なUnicode文字なので、どこでも使えます。

ショートコード

一部のプラットフォームでは、コロンで囲まれたキーワードである絵文字ショートコードをサポートしています：

:smile: :rocket: :thumbsup: :warning: :heavy_check_mark:

一般的なショートコード：

Shortcode              Emoji
---------------------  -----
:smile:                😄
:rocket:               🚀
:thumbsup:             👍
:warning:              ⚠️
:heavy_check_mark:     ✔️
:x:                    ❌
:fire:                 🔥
:star:                 ⭐

互換性に関する注意

絵文字ショートコードはプラットフォームによって異なります。GitHub、Slack、Discordはそれぞれ異なるセットをサポートしています。コピー＆ペーストの絵文字はどこでも使えるため、クロスプラットフォームドキュメントにはより安全な選択です。

ハイライト

ハイライトは、色付きの背景でキーワードやフレーズに注目を集めます。ダブルイコール記号（==）でテキストを囲みます。

This is ==critically important== information.

生成されるHTML：

<p>This is <mark>critically important</mark> information.</p>

HTMLフォールバック

Markdownプロセッサが == 構文をサポートしていない場合は、HTMLの <mark> タグを直接使用します：

This is <mark>critically important</mark> information.

どちらの方法でも同じ結果が得られます——周囲のコンテンツから目立つハイライトされたテキストです。

互換性に関する注意

==highlight== 構文は広くサポートされていません。一部のプロセッサでは動作しますが、GitHub Flavored Markdownでは使えません。互換性が重要な場合は、<mark> HTMLタグを使用してください。

下付き文字と上付き文字

これらの要素は、科学表記、数式、化学式に不可欠です。

下付き文字

シングルチルダ（~）で下付き文字テキストを囲みます：

The chemical formula for water is H~2~O.
Carbon dioxide is CO~2~.

レンダリング結果：H2OとCO2。

HTML等価表記：

<p>The chemical formula for water is H<sub>2</sub>O.</p>

上付き文字

キャレット（^）で上付き文字テキストを囲みます：

The equation is E = mc^2^.
This is the 3^rd^ edition.

レンダリング結果：E = mc2と3rd版。

HTML等価表記：

<p>The equation is E = mc<sup>2</sup>.</p>

HTMLフォールバック

プロセッサが ~ と ^ 構文をサポートしていない場合は、HTMLタグを直接使用します：

H<sub>2</sub>O is water.
E = mc<sup>2</sup> is Einstein's famous equation.

このHTMLアプローチは、ほぼすべてのMarkdownレンダラーで動作します。

自動URLリンク

ほとんどのMarkdownプロセッサは、特別な構文なしに生のURLを自動的にクリック可能なリンクに変換します：

Visit https://example.com for more information.

[text](url) 構文を使わなくても、クリック可能なリンクとしてレンダリングされます。

自動リンクの無効化

URLをクリック可能にせず、プレーンテキストとして表示したい場合があります。バッククォートで囲んで、インラインコードとしてレンダリングします：

`https://example.com`

これにより、URLがクリック可能なリンクではなくコードとして表示されます——URLパターンの説明時に便利です。

明示的リンクを使うべき場面

自動リンクは便利ですが、明示的リンク構文の方がより多くの制御を提供します：

<!-- Automatic: shows raw URL -->
https://example.com

<!-- Explicit: shows custom text -->
[Visit our website](https://example.com)

説明的なアンカーテキストが必要な場合は明示的リンクを使用してください——可読性とSEOの両方に有利です。

クイックリファレンス

Markdown Extended Syntax Quick Reference

すべての拡張構文要素の一覧です：

Element              Syntax                     Support
-------------------  -------------------------  --------
Table                | Col | Col |              Wide
Fenced Code Block    ``` code ```               Wide
Footnote             [^1] / [^1]: text          Moderate
Heading ID           ### Heading {#id}          Moderate
Definition List      Term / : Definition        Limited
Strikethrough        ~~text~~                   Wide
Task List            - [x] / - [ ]             Wide
Emoji (shortcode)    :emoji_name:               Varies
Highlight            ==text==                   Limited
Subscript            H~2~O                      Limited
Superscript          X^2^                       Limited
Auto URL Link        https://...                Wide

拡張構文を使い始めよう

これで主要な拡張構文要素をすべて把握できました。実践に活かす方法は以下の通りです：

  1. プラットフォームを確認する：お使いのMarkdownプロセッサがどの機能をサポートしているか確認してください。GitHub、VS Code、ほとんどの静的サイトジェネレーターは、広くサポートされている要素を適切に処理します。

  2. HTMLフォールバックを使う：サポートが限定的な機能（ハイライト、下付き文字、上付き文字）には、HTMLタグの代替手段がほぼどこでも使えます。

  3. 実際のコンテンツで練習する：次のREADMEにテーブルを、次のブログ記事に脚注を、次のプロジェクト計画にタスクリストを追加してみてください。

  4. 安心して変換する：ドキュメントを共有する準備ができたら、Markdown→PDF変換ツールでLaTeX数式やテーブル対応の印刷用出力を、Markdown→HTML変換ツールでウェブ公開を、Markdown→Word変換ツールで関係者レビュー用のWordドキュメントを生成できます。すべての拡張構文要素に対応しています。

基本構文とこれらの拡張機能を合わせれば、Markdownの完全なツールキットが手に入ります。Markdownが全く初めての方は、Markdownとはで基本を学んでください。ドキュメント、ブログ記事、技術仕様、プロジェクト計画——何を書くにしても、Markdownがカバーしてくれます。

Markdown拡張構文ライティング生産性