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