はじめに
Qiitaでは見出しを#
を使って書くと思いますが、
投稿するとこれを検知して、ページ右側に自動で目次を作ってくれます。
(モバイル版だと出ないとかの記述も見られますが。)
それとは別にページ内に目次を作りたい人へ。
実際には目次というより、見出しへのハイパーリンクを利用するというイメージ
目次
1.目次の書き方
2.特殊ルール
2-1.アルファベットに関するルール
2-2.スペースに関するルール
2-3.ドットに関するルール
3.現状まとめ
目次の書き方
基本的には以下のような形式です。
[目次に表示したい文字列](#実際の目次の文字列)
-------------------------------------------------------------------
# 実際の目次の文字列
1行目が目次部分で、2行目が実際の見出し部分。
例えば
[1.第1章](#はじめ)
-------------------------------------------------------------------
# はじめ
と書くとこんな感じ。
↑ これを押すとはじめ
という見出しのところへ飛ぶと思います。
[]の中はなんでもよくて、()内の#
以降の文字と見出しを合わせればいいです。
特殊ルール
自分がこのリンク生成作業をやっていて発見したルールを共有します。
見つけ次第どんどん追加していきます。
アルファベットに関するルール
見出しがアルファベットで
# SECOND
だった場合、リンクは以下のように小文字で書きます。
[2.第2章](#second)
2.第2章 ← #SECOND
2.第2章 ← #second
つまり
見出しでアルファベット大文字を使った際は、リンクに書く#
以降の文字列はすべて小文字にする必要があります。
スペースに関するルール
見出しが半角スペースを用いて
# Chapter 3
だった場合、リンクは以下のように半角スペースを-
に置き換えて書きます。
さっきのおさらい、Cは小文字ですよ!
[3.第3章](#chapter-3)
3.第3章 ← #chapter-3
[3.第3章](#chapter 3) ← #chapter 3
つまり
見出しで半角スペースを使った場合、リンクでは-
に置き換える
見出しで全角スペースを用いた場合のリンクの作り方は分かりませんでした。
できなそう?
ドットに関するルール
見出しがドット(.)を用いて
# 4.Final
だった場合、リンクでは.
を`消去します。
[4.第4章](#4final)
見出しでドット(.) を使った場合、リンクではドットを消去する
はじめ
SECOND
Chapter 3
4.Final
現状まとめ
見出しに含む文字 | リンクを書くときのルール |
---|---|
アルファベット大文字 | 小文字で書く |
半角スペース | -で補完する |
ドット(.) | -で置換する |