一歩ずつ学ぶ

最終更新日:

Markdownで目次を自分で作成する

Markdownでは目次の生成も簡単にできます。 リストリンクの記法を組み合わせて記述します。

まずは、リストとリンク記法の復習から。

リストの復習

*(アスタリスク)、+(プラス)、-(ハイフン)のいずれかに 半角スペースを入れます。

* 第1章
* 第2章
* 第3章

リンクの復習

『アンカーリンク(ページ内リンク)』と 『ハイパーリンク(他ページへのリンク)』の2通りがあります。

■ アンカーリンク(ページ内リンク)の場合

HTML: <a href="#アンカー名">リンク文言</a>

Markdown: [リンク文言](#アンカー名)

■ ハイパーリンク(他ページへのリンク)の場合

HTML: <a href="URL">リンク文言</a>

Markdown: [リンク文言](URL)

では、これからリストとリンクの記法を組み合わせて目次を作っていきます。

アンカーリンク(ページ内リンク)の目次

アンカーリンク(ページ内リンク)の目次を生成する場合は、カッコ()内に#アンカー名を記述します。

* [第1章](#sec1)
* [第2章](#sec2)
* [第3章](#sec3)

ID(アンカー名)を振るためのHTMLは下記の様に記述しておきます。

<a id="sec1"></a>
<h2>第1章</h2>
コンテンツ

<a id="sec2"></a>
<h2>第2章</h2>
コンテンツ

<a id="sec3"></a>
<h2>第3章</h2>
コンテンツ

ハイパーリンク(他ページへのリンク)の目次

ハイパーリンク(他ページへのリンク)の目次を生成する場合は、 カッコ()内にURLやファイル名を記述します。

* [第1章](sec1.html)
* [第2章](sec2.html)
* [第3章](sec3.html)

このようにリスト記法とリンク記法を組み合わせることで、 シンプルに目次を生成することができます。

まとめ

これまでの説明をまとめると次のようになります。

■ アンカーリンク(ページ内リンク)の目次

* [第1章](#sec1)
* [第2章](#sec2)
* [第3章](#sec3)

■ ハイパーリンク(他ページへのリンク)の目次

* [第1章](sec1.html)
* [第2章](sec2.html)
* [第3章](sec3.html)

↑ PAGE TOP