こんにちは。
今回は、HTMLだけで目次を作る方法を紹介します。
HTMLだけで作れて、とっても簡単です。
その代わり、見た目が少しばかりダサいですが・・。
それでは早速、見ていきましょう！
スポンサーリンク
目次の作り方
今回作る目次は、ページ内リンクを使用します。
なのでまずは、ページ内リンクを作りましょう。
ページ内リンクを作る
まずは、ページの目次を表示させたい場所に以下のコードを入力します。
<a href="#midasi1">見出し1</a>
<a href="#midasi2">見出し2</a>
<a href="#midasi3">見出し3</a>
※必要な分だけ項目を増やして構いません。
※""内の文字列は好きなアルファベット・数字で構いません。
※>ここ</a> の文字は好きなもので構いません。
上記のコードを入力すると、
画像のような表示になります。
横に並んでいますが、縦にしたい場合は、</a>の後に<br>タグを書き足してください。
これで目次部分のシステムは完成です。
ですが、このままだと目次をクリックしても何も起こらないので、
目次をクリックした時に指定の場所までジャンプするように設定していきます。
指定の箇所までジャンプさせる
先ほど記入したコードの「#」の後の文字列と見出しを対応させます。
目次の項目をクリックした時にジャンプさせたい場所に以下のコードを入力します。
<h2 id="midasi1">見出し1</h2>
※最初に作った目次の項目分、それぞれ任意の場所にこのコードを入力してください。
※ ""内は最初に作った目次の項目の「#」の後の文字列と一致している必要があります。
※こちらのタグの""内の文字列には#は必要ありません。
※ >ここ</h2>の文字は好きなもので構いません。
これで目次のシステムは完成です。
まとめ
今回は、HTMLを使った簡易的な目次の作り方を紹介しました。
見た目のダサさについては、CSSで調整してください。（CSSは近日公開中・・・）
最後まで読んでいただきありがとうございました！