Markdown目次(TOC)生成の使い方｜見出しからアンカー付き目次を自動作成
公開日：2026年9月29日 更新日：2026年9月15日 運営：シルギア（Analyzegear, Inc.） 対象ツール：Markdown目次(TOC)生成
長いREADMEやドキュメントの先頭に目次があるかどうかで、読み手の体験は大きく変わります。とはいえ、見出しを一つずつ拾ってリンクを手書きするのは手間がかかり、見出しを増やすたびに目次がずれていきます。このツールは、Markdown本文を貼り付けるだけで、見出しからアンカーリンク付きの目次（Table of Contents / TOC）を自動で組み立てます。処理はすべてブラウザ内で完結し、本文はどこにも送信されません。この記事では、どんな仕組みで目次が作られるのか、どう設定すれば狙い通りの目次になるのかを、実際の変換例とともに説明します。
どんな見出しが目次になるのか
対象になるのはATX形式の見出しです。行頭に # を1〜6個並べ、その後ろに半角スペースを置き、続けて見出しテキストを書く書き方を指します。# の数がそのまま見出しのレベル（H1〜H6）になります。ここで重要なのは、# と本文の間に半角スペースが必要だという点です。## セクション名 は見出しとして拾われますが、##セクション名 のようにスペースが無い行は見出しと見なされません。これはGitHubの解釈と同じ挙動で、意図しない行を目次に混ぜないための仕様です。なお、=== や --- を下線のように使うSetext形式の見出しには対応していません。見出しはすべて # 記法で書いてください。
アンカー（#リンク）はこう作られる
目次の各項目には [表示テキスト](#アンカー) というリンクが付きます。このアンカー部分は、GitHub（github-slugger）系の一般的な規則でスラッグ化されます。手順は3つです。まず見出しテキストをすべて小文字にし、次に記号を削除し、最後に半角スペースをハイフンに置き換えます。削除される記号には ! " # $ % & ( ) * + , . / : ; < = > ? @ [ ] ^ ` { | } ~ などが含まれます。一方で、アンダースコアとハイフンはそのまま残り、日本語などの文字も原則そのまま使われます。
- Section A → #section-a
- Hello World! → #hello-world
- My_Notes → #my_notes（アンダースコアは残る）
- 使い方 (基本) → #使い方-基本（丸括弧は削除、日本語は保持）
つまり ## Section A という見出しは、目次では - [Section A](#section-a) という一行になります。表示ラベルは元の見出しの見た目、リンク先は小文字化・記号除去したスラッグ、という対応です。
同じ見出し名や装飾があるとき
同じ文字列の見出しが複数あると、素朴にスラッグ化すればアンカーが衝突してしまいます。このツールは重複を自動で解決します。2つ目以降の同名見出しには -1、-2 … と連番を付けて区別します。例えば Section A が2回登場すると、1つ目は #section-a、2つ目は #section-a-1 になります。これもGitHubのレンダリング結果と一致します。
見出しに装飾が含まれる場合は、表示テキストへ簡約してからアンカー化します。リンク [表示](url) は「表示」、画像  は「alt」、インラインコード（バッククォート）で囲んだ code は「code」、**強調** や *斜体*、~~打ち消し~~ は装飾記号を外したテキストとして扱います。これにより、見出しにリンクや書式が混ざっていても、実際に表示される見た目に近いラベルとアンカーが得られます。
含める見出しレベルを絞り込む
すべての見出しを目次に載せると、細かいH4以下まで並んで冗長になりがちです。「含める最小レベル」「含める最大レベル」で、目次に載せる階層の範囲を指定できます。例えば最小をH2、最大をH3にすると、H1のタイトルや細かいH4以下を除いた、章・節だけのすっきりした目次になります。
インデント（入れ子の深さ）は、絶対的なレベルではなく「範囲内で最も浅い見出し」を基準にした相対的な深さで決まります。H2〜H3を選んだなら、H2が一番外側、H3がその1段内側になり、H2で始まる目次でも余計な先頭インデントは付きません。1段ごとに半角スペース2つでインデントされます。もし最小と最大を逆に指定してしまっても、内部で入れ替えて処理するので破綻しません。
コードブロック内の # を無視する理由
シェルスクリプトのコメントや、プログラム中の # は、行頭に来ることが珍しくありません。これを見出しと誤認すると、目次にコードの断片が紛れ込んでしまいます。そこでこのツールは、コードフェンス（``` または ~~~ で囲まれたブロック）の内側にある # 行を、既定では見出しとして扱いません。フェンスは行頭0〜3スペースで始まる3個以上の記号として認識され、開いたときと同じ種類の記号で閉じるまでが「コードの内側」と判断されます。
例えばコードブロックの中に # not a heading と書かれていても、これは目次に拾われません。逆に、コード例そのものを目次化したい特殊なケースでは、この設定をオフにできます。通常はオンのままで問題ありません。
どこで役立つか、使うときの注意
もっとも相性が良いのはGitHubのREADMEやIssue、Wikiです。生成された目次をファイルの先頭に貼り付ければ、クリックで各セクションへジャンプできる導線になります。ブログ記事や社内ドキュメント、静的サイトジェネレーターで書くマニュアルなどでも、章立ての全体像を最初に見せる目的で使えます。番号付き（1.）を選べば、手順書のように順序を強調した目次にもできます。
ひとつ注意したいのは、見出しアンカーの細かな仕様がレンダラーごとに少しずつ違う点です。GitHub、GitLab、各種の静的サイトジェネレーターでは、記号の扱いや日本語の変換方式が異なる場合があります。このツールはGitHub系の一般規則に沿っていますが、絶対的な正解が一つに決まるわけではありません。生成した目次を貼り付けたら、最終的な表示先で一度リンクが正しく飛ぶかを確認しておくと安心です。うまく飛ばないときは、スラッグ部分だけ微調整すれば対応できます。