Markdown で ページ内リンク付き の 目次 を 作成 する 方法

〜宣伝〜

個人開発でエンジニア専門マッチングサービスを開発しましたので、是非未経験からエンジニア目指している人！現役エンジニアで教えたい人！使ってみてください！

β版リリース記念キャンペーン中です！

10名様限定、抽選でお好きな技術本1冊プレゼント！
🎉当選者にはメッセージ差し上げます(送付の際に住所はお聞きしません)
詳しくはこちらから↓

https://x.com/dokupro01/status/1796837336145436846

目的

• Markdownでのリンクが有る目次の描き方を知る
  ※本投稿で紹介する内容はMarkdown記法だけではなく、HTMLの記法も活用します。
  ※おそらく本記載方法はQiitaのMarkdown では使えないと思います。。。すいません。。。

押さえるポイント

• この作成法はHTML記法のリンク作成タグの<a>を使用したものである
• リンクをクリックして飛ぶ先をidで指定する。
• idを用いて飛ぶ先の識別子を定義する。
• idで識別子を定義するときは下記のルールに従う。
  • 識別子は重複不可能。
  • 使用できる文字は半角英数字、ハイフン、アンダーバー、コロン、ピリオド。
  • 数字や記号で始められない。
  • 大文字小文字の区別がある。
    ※リンク先の関係など理解しにくい部分もあると思うので書き方の例に記載された内容をそのままテンプレートとしてお使いください。

書き方の例

• 下記にMarkdownファイルのリンク付き目次のテンプレートを記載したファイルの内容を記載する。

<!-- 目次部分(リンクになるところ) -->
1. [概要](#anchor1)
1. [フロー](#anchor2)
1. [詳細](#anchor3)

〜〜〜〜〜中略〜〜〜〜〜

<!-- リンク先(目次部分のリンクの飛び先) -->
<a id="anchor1"></a>

1. 概要

〜〜〜〜〜中略〜〜〜〜〜

<a id="anchor2"></a>

1. フロー

〜〜〜〜〜中略〜〜〜〜〜

<a id="anchor3"></a>

1. 詳細

〜〜〜〜〜中略〜〜〜〜〜

より具体的な例

• 前述の描き方の例を元にもう少し実践的な記載例を記す。
• 日本の挨拶について紹介するMarkdownファイルを下記に記載する

# 目次
1. [概要](#anchor1)
1. [順序](#anchor2)
1. [詳細](#anchor3)

<a id="anchor1"></a>

1. 概要
    - 日本の挨拶についてまとめる

<a id="anchor2"></a>

1. 挨拶の順序
    1. おはようございます。
    1. こんにちは。
    1. こんばんは。

<a id="anchor3"></a>

1. 詳細
    1. 「おはようございます」とは  
    起床時、あるいは朝人に会った時の挨拶。
    1. 「こんにちは」とは  
    語源は「今日は、ご機嫌いかがですか？」が省略されたもの
    1. 「こんばんは」とは  
    語源は「今晩は〇〇ですね。」の後半部分が省略されたもの

↓プレビュー(Markdownファイルならリンクとして扱われている目次の各項目をクリックするとリンクするドキュメント内のaタグの位置にジャンプする。下記プレビューはQiitaの記事として記載されているのでジャンプはしない。)

目次

1. 概要
2. 順序
3. 詳細

1. 概要
   • 日本の挨拶についてまとめる

1. 挨拶の順序
   1. おはようございます。
   2. こんにちは。
   3. こんばんは。

1. 詳細
   1. 「おはようございます」とは
      起床時、あるいは朝人に会った時の挨拶。
   2. 「こんにちは」とは
      語源は「今日は、ご機嫌いかがですか？」が省略されたもの
   3. 「こんばんは」とは
      語源は「今晩は〇〇ですね。」の後半部分が省略されたもの