簡素な窓
判りにくいもの等を分かり易く紹介しています。
HTML-CSS講座

HTML5とCSS3基本講座 9回|目次の作り方(基本編)

目次作りをすることで、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を使って、目次の見栄えを良くする方法を学びましょう。

ABOUT ME
iyasaretaihito
子どもの時から、昆虫や恐竜、宇宙などに興味がある理科大好きな理系人間です。 会社は半導体設計関連会社に勤務して、60歳で定年退職後は趣味に没頭する、のん気なおじさんです。
RELATED POST