HTMLだけで簡単に目次を作るページ内リンクの貼り方

今回はCSSなどは触らずに単純にHTMLだけで目次を作ってみたいと思います。

デザインを変えたいという方はスタイルシートを書いていくか、もしくはプラグインを導入していきましょう。

目次を作るだけならページ内リンクを貼って、見やすくまとめるだけですので簡単です。

基本的には外部リンクと一緒でURLの代わりにidで指定するだけ。
 

目次
　飛ばす方の書き方
　飛んできて欲しい方の書き方
　見出しを目次にする場合

クリックしたら目的の場所までジャンプするのが分かると思います。

目次は次のように記述されています。

普段外部リンクのURLを入力する場所を仮に#q1と指定します。

飛んで欲しい場所のidをq1と揃えて書きます。アルファベットは何でも構いませんが、揃えないと指定できないので飛びません。

間の文面は理由がない限り同じでいいんじゃないでしょうか。

見出しを目次にする場合は見出しタグのままでid指定します。

ワードプレスの場合はテキストに書き込んでいきましょう。プレビューで確認したあと、リンクをクリックしたら指定の場所までジャンプするはずです。

見出しを目次にする場合

<div id=””></div>の所を見出しタグに変えるだけです。

基本は見出しを目次にしていくことが多いと思いますので、見出しタグでリンクを作っていけばいいと思います。

見出しがない時に飛ばしたい場所がある場合は、上記の書き方で飛ばせばどこでも好きな場所へジャンプさせることが可能です。