目次作りをすることで、HTML や、(CSS)について学習していきます。今回は、最も基本的な目次を作ります。次回の講座では、目次の応用編を紹介する予定です。
簡単な目次の作り方
目次をクリックして、目次に該当する文頭に飛ばす方法を紹介します。
タグは、次のように記載します。(本来は半角ですが、HTMLが動作すると困るので、記号を全角で記載しています。)
目次をクリックして、目次に該当する文頭に飛ばすには、HTMLのa要素で指定します。href属性を記載して、飛び先を記入すればOKです。但し、飛び先となる英数文字の前に、#を記載することを忘れないようにしましょう。
▼目次
<a href=#”××”>章名</a>・・・・a href=#”××”の「××」には、半角英数文字を入れます。目次をクリックした時の飛び先に対応する番号です。
▼飛び先文章の文頭
<h2 id=”英数”>章名</h2> ・・・・・左記の<h2>に挟まれた部分には、目次を構成する章の名前が入ります。<h3>、<h4>なども対象です。
id=××の××には半角英数文字を入れます。目次をクリックした時の飛び先に対応する番号です。
具体例(ul要素)
説明文を読んでも分かりにくいため、具体例を示します。この具体例と説明文を合わせることで、理解し易くなるでしょう。
具体例は、次のようなページと章だけの構成で紹介します。コンテンツ文は、省略しています。
*************************************
<h1>表題</h1>
<p>要約文など
</p>
<h2>▼目次</h2>
<ul>
<li><a href=”#s1″>1.章名A</a></li>
<li><a href=”#s2″>2.章名B</a></li>
<li><a href=”#s3″> 2-1.章名C</a></li>
</ul>
<h2 id=”s1″>1.章名A</h2>
<p>〜コンテンツ文〜。</p>
<h2 id=”s2″>2.章名B</h2>
<p>〜コンテンツ文〜。</p>
<h3 id=”s3″> 2-1.章名C</h3>
<p>〜コンテンツ文〜。</p>
****************************************
BracketsやWPによる表示
上記内容を、「<」や、「>」等を半角にしてBracketsやワードプレス(テキスト)に記載後、内容を表示させると次のようになります。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
表題
要約文など
▼目次
・1.章名A
・2.章名B
・ 2-1.章名C
1.章名A
〜コンテンツ文〜。
2.章名B
〜コンテンツ文〜。
2-1.章名C
〜コンテンツ文〜。
・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・・
具体例(ol要素)
上記のul要素のところで、紹介した目次リストの、<ul>を<ol>に、</ul>を</ol>に変更します。
このように変更すると、目次リストの前に付いていた、「・」が「1からの数字」になります。
後ろの文章からページに戻る方法
長い文章の場合には、文章のところどころに、目次に戻るクリックボタンがあると便利です。
この場合は、次のような、「目次に記号(赤字部)を記載」して、目次に戻りたい場所には、「ダイダイ色の文字部」内容を記載して下さい。
ビジュアル表示では、「目次に戻る」文字をクリックすると、ジャンプして目次に戻ります。
*****************************
<h2 id>▼目次</h2>
↓
<h2 id=”mokuji”>▼目次</h2>
文章の後ろに下記を挿入する。
<a href=”#mokuji”>▲目次に戻る</a>
*****************************
まとめ
今回の目次作りは、基本的な内容です。次回の講座では、CSSを使って、目次の見栄えを良くする方法を学びましょう。