Markdown(マークダウン)で技術文書、仕様書、ブログ記事、論文、業務マニュアルを作成しているとき、「本文の流れを止めずに専門用語の定義や補足説明を入れたい」「参考文献や出典リンクをすっきりと文書の末尾にまとめたい」と感じたことはありませんか?
そんなときに役立つのが、Markdownの「注釈・脚注機能(markdown footnote / 参照リンク)」です。
「Markdownで注釈や脚注を入れる基本の構文([^1])の書き方を知りたい」「脚注の中に複数行のテキストや箇条書き、URLリンク、コードブロックを入れるにはどうすればいい?」「GitHub、Obsidian、VS Code、Notionなどツールごとの対応状況はどうなっている?」「参照リンク(Reference-style Link)と脚注の違いや使い分けは?」「実務や論文ですぐにコピペして使えるテンプレートが欲しい」といった疑問を抱えている方も多いはずです。
Markdownの脚注記法は、文中に [^1] のような参照タグを置き、文末や段落末尾に [^1]: 注釈内容 を記述するだけの非常にシンプルな構文です。パーサーが自動的に番号を連番化し、ページ最下部に脚注セクションを自動生成してクリックジャンプ(アンカーリンク)まで作成してくれます。
この記事では、コピペですぐに使える「Markdown注釈・脚注 逆引きチートシート」をはじめ、基本構文と記述ルール、複数行やリンク・コードを含む高度な脚注テクニック、参照リンクとの違い、主要ツール(GitHub / VS Code / Obsidian / Notion / Qiita / Zenn)の対応状況、用途別実例テンプレート、表示されないトラブルの対処法まで、網羅的かつ分かりやすく徹底解説します!
📌 本記事のポイント・要点まとめ
- 基本構文: 本文中に
[^ラベル]、末尾に[^ラベル]: 注釈テキストを書く(コロン後の半角スペース必須) - 自動連番ソート: ラベルに任意の文字列(
[^note]や[^10])を使っても、HTML出力時は本文の出現順に1, 2, 3...と自動採番される - 複数行・段落の記述: 2行目以降の行頭に「半角スペース4個(またはTab1つ)」をインデントする
- 装飾・リンク対応: 脚注内でも太字、斜体、リンク(
[テキスト](URL))、インラインコード、コードブロック、箇条書きが利用可能 - 参照リンクとの違い: 脚注(
[^1])は「ページ末尾に注釈領域を作る」、参照リンク([text][id])は「文中のリンクURLを別定義する」機能 - ツール対応状況: GitHub(GFM)、Obsidian、VS Code(拡張機能)、Zenn、Qiitaなどは標準対応。Notionは非対応(トグル等の代替推奨)
【早見表】Markdown注釈・脚注 逆引きチートシート
まずは、日常のライティングや技術文書作成ですぐに使えるMarkdown脚注の書き方を一覧表にまとめました。必要な形式をそのままコピー&ペーストしてご利用ください。
| やりたいこと | Markdown記述(コピペ用) | 特徴・レンダリング挙動 |
|---|---|---|
| 基本の脚注 (数字ラベル) |
本文です[^1]。
[^1]: ここに注釈内容を書きます。 |
本文に上付き文字「1」が表示され、クリックで末尾の注釈へジャンプ |
| 名前付きラベル (英単語・日本語) |
API仕様[^api]を確認する。
[^api]: Application Programming Interfaceの略。 |
文中の出現順に応じて自動で数字(1, 2…)に変換されるため番号管理が不要 |
| 複数行の脚注 (段落分け) |
用語の説明[^multi]。
[^multi]: 1行目の注釈文。 |
行頭に半角スペース4個を置くことで、同じ脚注番号の複数段落として認識される |
| リンク・コードを含む脚注 | 詳細はこちら[^link]。
[^link]: 公式サイトは [こちら](https://example.com) です。コマンドは `npm test`。 |
注釈内で通常のMarkdown記法(リンク、インラインコード、太字等)がそのまま使える |
| 重複参照 (同一注釈を複数回) |
最初の箇所[^common]と、後の箇所[^common]。
[^common]: 共通の補足説明です。 |
複数の文中タグが同一の注釈番号に紐づき、戻りリンク(Backlink)が複数生成される |
| インライン脚注 (対応環境のみ) |
本文の中に直接^[文中に注釈を記述]埋め込む。 |
PandocやObsidian等の一部環境で対応。末尾への定義記述が不要になる |
| 参照リンク (参考) |
詳細は [公式サイト][ref1] へ。
[ref1]: https://example.com "タイトル" |
脚注ではなく、文中のリンクURLを末尾で一元管理する記法 |
Markdown注釈・脚注(Footnote)の基本構文と記述ルール
Markdownにおける脚注(Footnote)は、文章の流れを妨げずに補足情報や出典情報を追加するための拡張記法(Extended Syntax)です。GitHub Flavored Markdown(GFM)をはじめ、多くのモダンなMarkdownエンジンで標準的にサポートされています。
1. 基本構造:本文の参照タグと注釈定義
Markdownで脚注を作成するには、「文中の参照タグ」と「末尾の注釈定義」の2つをペアで記述します。
Markdownは非常に軽量なマークアップ言語[^1]です。
日常のメモやブログ執筆[^note]など、幅広い場面で活用されています。
[^1]: 2004年にJohn Gruber氏によって開発された、プレーンテキスト形式の記法。
[^note]: 静的サイトジェネレーターやCMSでも標準フォーマットとして広く採用されています。
💡 基本ルールのポイント:
- 文中の参照タグ: 角括弧の中にキャレット(ハット記号
^)と任意のラベル名を書く(例:[^1],[^note]) - 注釈定義: 行頭に
[^ラベル名]:を書き、コロン(:)の直後に半角スペースを1つ以上空けて注釈テキストを記述する - 自動レンダリング: ブラウザやプレビューでは、文中に上付きのリンク番号(
[1])が表示され、文書の最下部に区切り線とともに脚注一覧が自動配置される
2. 脚注の番号付けと自動ソートの仕組み
Markdownの脚注の非常に優れた特徴は、「本文中の出現順に応じて自動的に1から連番で番号が振られる」という点です。
たとえば、文中で [^100]、[^50]、[^apple] のように任意の番号や単語を使ったり、記述順がバラバラだったりしても、レンダラーが文頭から順に [1], [2], [3] と再採番してくれます。
最初のトピック[^zebra]についての解説です。
次に2つ目のトピック[^alpha]について説明します。
最後に3つ目のトピック[^99]です。
[^99]: 3つ目のトピックの補足です。
[^zebra]: 最初のトピックに関する詳細な仕様です。
[^alpha]: 2つ目のトピックの参考文献です。
上記のように記述した場合でも、HTMLに出力された際には以下のように自動整列されます:
- 文中の
[^zebra]は [1] に変換され、脚注セクションの最上部に配置される - 文中の
[^alpha]は [2] に変換され、2番目に配置される - 文中の
[^99]は [3] に変換され、3番目に配置される
✨ 連番自動化の大きなメリット:
後から文章の途中に新しい脚注を挿入しても、手動で全体の番号(1, 2, 3…)を振り直す必要がありません。長文のドキュメントや論文の修正作業が劇的に効率化されます。
3. 識別子(ラベル)の命名ルールとおすすめ手法
角括弧内のラベル名([^ラベル])には、数字だけでなく英数字やハイフン、アンダースコア、日本語(マルチバイト文字)を使用できます(※一部の古いパーサーを除き、主要環境では日本語ラベルも動作します)。
| ラベルの命名形式 | 記述例 | おすすめの用途・メリット |
|---|---|---|
| 連番の数字 | [^1], [^2], [^3] |
短い文書やサクッと書きたいメモに最適。タイピングが最速 |
| 英単語(意味付き) | [^api-spec], [^rfc-2616] |
最もおすすめ! 本文と注釈の対応関係が一目で分かり、執筆時の管理が圧倒的に楽 |
| 日本語ラベル | [^注意点], [^参考資料] |
直感的で分かりやすい(※URL変換時にエンコードされる場合があるため、英単語推奨) |
⚠️ ラベル命名時の注意点:
ラベル名の中に半角スペースや改行を含めることはできません(例: [^my note] はNG。[^my-note] や [^my_note] を使用してください)。また、大文字と小文字は区別される環境が多いため、すべて小文字で統一するのがベストプラクティスです。
4. 注釈定義([^1]:)はどこに置くのがベスト?
Markdownの仕様上、注釈定義([^ラベル]: 内容)はファイルのどこに置いてもレンダリング結果は同じ(常にページの最下部にまとめて出力される)になります。
一般的には、以下の2つのいずれかのスタイルで運用されます:
- パターンA:ファイルの最末尾にまとめて記述する(推奨・標準的)
ソースコード全体の見通しが良くなり、本文の執筆に集中できます。大半のブログやリポジトリのREADMEで採用されています。 - パターンB:該当する見出しセクションや段落の直下に記述する
長大なドキュメントを分割して編集する場合に、本文と注釈が近い位置にあるためメンテナンスが容易です。
【実践・応用技】高度な注釈・脚注テクニック
単行の短いテキストだけでなく、複数段落にわたる詳細な説明、リンク、コードブロック、リストなどを脚注内に含める高度なテクニックを解説します。
1. 複数行・複数段落にわたる長い注釈の書き方
注釈の内容が長くなり、複数の段落に分けたい場合は、2行目以降の行頭に「半角スペース4個」または「Tab 1つ」のインデントを挿入します。
量子コンピュータの実用化には多くの技術的ブレークスルーが必要です[^quantum]。
[^quantum]: 量子超越性(Quantum Supremacy)に関する解説です。
従来のスーパーコンピュータでは数万年かかる計算を、量子プロセッサは数分で処理できることが実証されています。
ただし、誤り訂正技術(QEC)の実用化など、商用利用に向けた課題は依然として多く残されています。
💡 インデントのルール:
空行を挟んでも、行頭にスペース4個( )があれば同じ [^quantum] の注釈ブロックとしてひとまとまりに解釈されます。インデントがないと、次の行が通常の本文として扱われてしまうため注意してください。
2. 注釈内にリンク・太字・斜体を入れる
脚注のテキスト内では、通常のインラインMarkdown装飾がすべて使用可能です。参考文献の外部リンクや強調表示を美しく整えることができます。
Web標準化団体の動向[^w3c]を常にチェックしておくことが推奨されます。
[^w3c]: **W3C(World Wide Web Consortium)** は、Web技術の標準化を行う国際機関です。詳細は [W3C公式サイト](https://www.w3.org) を参照してください。
3. 注釈内にコードブロックやリスト(箇条書き)を含める
技術文書などで「脚注の中にコード例や手順リストを入れたい」場合も、スペース4個のインデントを適用することで綺麗に埋め込むことができます。
パッケージのインストール手順[^install-note]に従って環境を構築してください。
[^install-note]: Node.js環境が必要です。以下のコマンドを実行してください。
```bash
npm install -g example-cli
example-cli init
```
* 前提条件: Node.js v18以上
* 推奨環境: macOS / Linux / WSL2
4. 同じ注釈を本文中の複数箇所から参照する(重複参照)
本文中の異なる場所で「同じ注釈や用語解説」を使い回したい場合、同じラベル名(例: [^common])を何度でも文中に記述できます。
フロントエンドの開発ではTypeScript[^ts]が広く普及しています。
また、バックエンド開発(Node.js環境)においてもTypeScript[^ts]の採用が進んでいます。
[^ts]: Microsoftが開発した、JavaScriptに静的型付けを追加したプログラミング言語。
✨ 戻りリンク(Backlink)の挙動:
GitHubなどの高機能レンダラーでは、末尾の注釈に ↩ 1:1 ↩ 1:2 のように、それぞれの参照箇所へ戻るための個別バックリンクが自動付与されます。
5. 文中に直接注釈を書く「インライン脚注」(^[...])
ObsidianやPandoc、一部のMarkdown拡張機能では、文末に定義を書く手間を省く「インライン脚注(Inline Footnote)」がサポートされています。
この構文^[文中に直接書いたテキストがそのまま末尾の脚注になります]は非常に便利です。
※GitHubなどの標準GFM環境ではサポートされていない場合があるため、汎用性を重視する場合は基本の [^1] / [^1]: 構文を使用するのが最も安全です。
「脚注(Footnote)」と「参照リンク(Reference Link)」の違いと使い分け
Markdownには、脚注と見た目がよく似た「参照リンク(Reference-style Links)」という基本機能が存在します。混同しやすいため、違いをしっかりと整理しておきましょう。
| 項目 | 脚注(Footnote)[^1] |
参照リンク(Reference Link)[text][id] |
|---|---|---|
| 主な目的 | 補足説明、注釈、用語定義、出典の記載 | 本文中のURLを末尾で一元管理して可読性を高める |
| 文中の記法 | テキスト[^1](ハット記号 ^ が付く) |
[リンクテキスト][link-id] または [link-id][] |
| 定義の記法 | [^1]: 補足説明テキストやURL |
[link-id]: https://example.com "タイトル" |
| HTMLレンダリング | 上付き文字 <sup><a>1</a></sup> になり、最下部に脚注領域が自動生成される |
通常のハイパーリンク <a href="...">リンクテキスト</a> に変換される |
| 互換性 | GFM・拡張Markdown(パーサー依存) | 標準Markdown(CommonMark)すべてで完全対応 |
参照リンクの具体的な書き方
参照リンクは、本文中に長いURLが入り乱れてソースコードが読みづらくなるのを防ぐために使われます。
詳しくは [Google検索][1] または [GitHub公式][gh] をご覧ください。
[1]: https://www.google.com "Googleトップ"
[gh]: https://github.com "GitHub公式サイト"
💡 使い分けの判断基準:
- 「この単語をクリックしたら外部サイトへ飛ばしたい」 ➔ 通常のリンク または 参照リンク
- 「本文の流れを邪魔せず、補足説明や注釈番号を小さく添えたい」 ➔ 脚注(Footnote)
主要ツール・環境の対応状況とレンダリング挙動
Markdownの脚注機能は標準のCommonMark仕様には含まれておらず、「拡張仕様」として各エディタやWebサービスに実装されています。主要な執筆環境での対応状況と注意点を把握しておきましょう。
| 環境 / ツール名 | 脚注対応状況 | レンダリングの特徴・注意点 |
|---|---|---|
| GitHub (GFM) | ◎ 完全対応 | Issue, PR, README等で完璧に動作。注釈へのスクロールや戻りリンクも完備 |
| Obsidian | ◎ 完全対応 | [^1] だけでなくインライン脚注 ^[...] もネイティブ動作。ホバープレビュー対応 |
| VS Code | ◯ 拡張機能推奨 | 標準プレビューでも一部動作するが、「Markdown All in One」導入で自動入力や連番補完が快適化 |
| Zenn | ◎ 完全対応 | 技術記事で標準サポート。文末に綺麗なフッター注釈としてレンダリング |
| Qiita | ◎ 完全対応 | Qiita Markdownで標準対応。ページ下部に注釈一覧が自動生成される |
| はてなブログ | ◎ 完全対応 | Markdownモードで ((注釈内容)) または [^1] 形式の両方が利用可能 |
| Notion | ✕ 非対応 | Markdownインポート時に [^1] はテキストとしてそのまま残る。トグルリストやコメント機能で代用 |
| WordPress | ◯ プラグイン対応 | Jetpack等のMarkdown対応プラグイン、またはHTMLの <sup> タグ・アンカーで実現 |
Notionで脚注的な補足説明を表現する代替テクニック
Notionは独自のブロック型データベース構造を採用しているため、GFM形式の [^1] 記法をそのままプレビューすることはできません。Notion内で注釈・補足を入れたい場合は、以下の代替案が有効です:
- トグルリスト(Toggle List):
> 補足説明と入力してトグルを作成し、クリックで展開できるようにする - コールアウトブロック(Callout):
/calloutでアイコン付きの注記ボックスを配置する - コメント機能: 対象テキストを選択して
Ctrl + Shift + M(Mac:Cmd + Shift + M)でインラインコメントを付ける
【コピペで使える実例集】用途別テンプレート
実務や学術執筆ですぐに使える、完成度の高いMarkdown注釈テンプレートを用意しました。用途に合わせてコピーしてご活用ください。
テンプレート1:論文・学術レポート・研究ノート(文献引用)
# 大規模言語モデルにおける文脈理解の向上に関する研究
## 1. はじめに
本研究では、トランスフォーマーアーキテクチャ[^transformer]を基盤とした新たな注意機構(Attention Mechanism)を提案する。先行研究[^vaswani2017]において示された計算量の課題に対し、疎結合アテンションを導入することでメモリ使用量を大幅に削減した[^sparse]。
## 2. 実験結果
提案手法により、ベンチマークテストにおいて既存モデルを上回る推論速度を記録した。詳細なハイパーパラメータ設定については付録[^appendix]を参照のこと。
---
### 参考文献・脚注
[^transformer]: Transformerは、自己注意機構(Self-Attention)を主軸とする深層学習モデルアーキテクチャ。
[^vaswani2017]: Vaswani, A., et al. "Attention Is All You Need." NeurIPS 2017. [arXiv:1706.03762](https://arxiv.org/abs/1706.03762)
[^sparse]: Child, R., et al. "Generating Long Sequences with Sparse Transformers." 2019.
[^appendix]: 学習率 $\eta = 10^{-4}$、バッチサイズ 512、エポック数 100 にて検証を実施。
テンプレート2:技術仕様書・APIリファレンス・README
# ユーザー認証API 仕様書(v2.0)
## エンドポイント概要
本APIは、OAuth 2.0準拠のBearerトークン[^oauth]による認可を採用しています。
リクエスト頻度制限(Rate Limit)[^ratelimit]を超過した場合、ステータスコード `429 Too Many Requests` が返却されます。
| パラメータ | 型 | 必須 | 説明 |
| :--- | :--- | :--- | :--- |
| `client_id` | String | ○ | 発行されたクライアントID |
| `scope` | String | - | 要求する権限スコープ[^scope-info] |
---
[^oauth]: RFC 6749に準拠。アクセストークンの有効期限は発行から3600秒(1時間)です。
[^ratelimit]: 1IPアドレスあたり最大 1,000リクエスト/分。大規模アクセスの場合は事前申請が必要です。
[^scope-info]: 指定可能なスコープ一覧:
* `read:profile` - プロフィール情報の閲覧
* `write:orders` - 注文情報の更新
テンプレート3:ブログ記事・Webライティング(補足注記)
## はじめてのリモートワーク環境構築ガイド
快適なテレワーク環境を整えるためには、デスクやチェアへの投資が重要です[^ergonomics]。
特に4Kモニター[^monitor]を導入することで、マルチタスク時の作業効率が劇的に向上します。
ネットワーク回線についても、実測で100Mbps以上を確保できる光回線[^speed]を選択するのが理想的です。
---
[^ergonomics]: 人間工学に基づいたオフィスチェアを選ぶことで、長時間のデスクワークによる腰痛予防が期待できます。
[^monitor]: 画面サイズは27〜32インチ程度が最も視認性とデスク占有面積のバランスに優れています。
[^speed]: 回線速度の測定は [Fast.com](https://fast.com/ja/) 等の無料スピードテストサイトで手軽に行えます。
Markdown注釈・脚注が表示されない・崩れる原因とトラブルシューティング
「脚注を書いたのにリンクにならない」「生の記号([^1])がそのままテキストとして表示されてしまう」といった場合の主な原因と対処法をまとめました。
原因1:エディタやレンダラーがFootnote記法に非対応
最も多い原因です。標準の純粋なMarkdown(CommonMark)パーサーには脚注機能が含まれていないため、拡張機能が無効な環境では通常の文字列として表示されます。
✅ 解決策:
- VS Codeの場合:拡張機能「Markdown All in One」または「Markdown Footnotes」をインストールする
- Static Site Generator(Hugo, Jekyll等)の場合:コンパイラ設定で
footnotes: trueまたは Goldmark / Kramdown の脚注オプションを有効にする - Webプラットフォームの場合:GitHub Flavored Markdown (GFM) 互換モードを選択する
原因2:文中のタグと注釈定義のラベル名が一致していない
本文側の [^note1] と末尾の [^Note1]: のように、大文字・小文字が異なっていたり、タイポ(スペルミス)があるとペアとして認識されません。
本文です[^API]。
[^api]: 注釈テキスト。
本文です[^api]。
[^api]: 注釈テキスト。
原因3:コロン記号が全角、またはコロン後の半角スペース抜け
注釈定義の : は必ず半角コロンである必要があります。また、コロンの直後に半角スペースを空けないと構文エラーになるパーサーが存在します。
[^1]:全角コロンになっている
[^2]:スペースが抜けている
[^1]: 正しい注釈テキスト
原因4:複数行脚注で2行目以降のインデント(スペース4個)が不足
注釈を改行して複数段落にする際、行頭のインデントが半角スペース1〜2個だと別の段落(本文)とみなされてしまいます。必ず「半角スペース4個(またはTab 1つ)」を空けてください。
よくある質問(FAQ)
Q1. 本文中の脚注を削除・追加した場合、番号を手動で振り直す必要はありますか?
いいえ、手動で振り直す必要はありません。
Markdownの脚注エンジンは、本文中に現れる順番に従って自動的に [1], [2], [3]... と連番を割り振ります。ラベル名に [^api] や [^book] などの文字列を使っておけば、文頭に新しい脚注を追加しても一切の修正なしで自動的に番号が再計算されます。
Q2. 脚注の識別子(ラベル)に日本語([^注釈1])を使っても正常に動作しますか?
GitHubやObsidianなどの主要環境では日本語ラベルも動作します。
ただし、一部の古いMarkdownパーサーや変換ツールでは、マルチバイト文字(日本語)を含むアンカーリンクの生成時にURLエンコードの不具合が発生する場合があります。そのため、確実な互換性を保つには半角英数字とハイフン(例: [^note-01])を使用するのが最も安全です。
Q3. 脚注をクリックしてジャンプした後、元の本文位置に戻ることはできますか?
はい、戻りリンク(Backlink)が自動生成されます。
脚注に対応したレンダラーでは、注釈テキストの末尾に ↩ や ↩︎ などの戻る矢印アイコンリンクが自動的に付与されます。これをクリックすることで、注釈を参照した本文の正確な位置へスムーズに戻ることができます。
Q4. 表(テーブル)のセル内で脚注タグ([^1])を使うことはできますか?
GitHubやObsidian等のGFM環境では表内でも脚注が正常に機能します。
ただし、一部の簡易レンダラーではパイプ(|)との組み合わせで構文解釈が乱れる場合があります。表内で動作しない場合は、HTMLタグの <sup><a href="#fn1">[1]</a></sup> を併用する方法も有効です。
Q5. VS CodeでMarkdownの脚注を最も快適に書くためのおすすめ拡張機能は?
「Markdown All in One」が最もおすすめです。
ショートカットキーでの操作補助や目次の自動生成に加え、脚注のプレビュー表示にも標準で対応しています。さらに特化したい場合は「Markdown Footnotes」を追加することで、より高機能な脚注補完を利用できます。
まとめ|Markdown注釈・脚注をマスターして読みやすい文書を作ろう
Markdownの注釈・脚注(Footnote)機能は、「本文のすっきりとした可読性」と「充実した補足情報・信頼性の高い出典明記」を両立させるための必須テクニックです。
📝 Markdown脚注 活用の3大原則
- 意味のある英単語ラベルを使う:
[^1]よりも[^spec-ref]のような名前付きラベルを使うと、編集時の対応確認が圧倒的に楽になる - 長文やコードはインデントを活用: 4スペースのインデントで、複数段落やコードブロック、リストを綺麗に構造化する
- ツールの特性を理解して使い分ける: GFM対応環境では脚注を活用し、Notion等の非対応ツールではトグルやコメントでスマートに代替する
本記事のチートシートや実例テンプレートを活用して、ぜひあなたのドキュメントや記事をより洗練されたプロ品質の仕上がりにアップデートしてください!
📚 あわせて読みたいMarkdown関連記事
- 【コピペで使える】Markdown記法一覧・チートシート|基本の書き方から応用・早見表まで完全網羅
- 【コピペで使える】Markdownリンクの書き方完全ガイド|ページ内リンク・別タブ・相対パス・画像リンクまで網羅
- 【コピペで使える】Markdown表(テーブル)の書き方完全ガイド|配置揃え・セル結合・改行・便利ツールまで徹底解説
- 【コピペで使える】Markdown箇条書き・リストの書き方完全ガイド|インデント階層化・番号付き・段落やコードの挿入まで徹底解説
- Markdownコードブロックの書き方完全ガイド|シンタックスハイライト・言語一覧
- 【コピペで使える】Markdown画像挿入の完全ガイド|サイズ変更・リンク化・ローカル指定・トラブル対処まで網羅
- 初心者でも簡単!マークダウンでのインデント方法を分かりやすく解説
- マークダウンで引用を使いこなす方法:基礎から応用まで徹底解説!