目次作りで、HTML や、（CSS）を学習します。当初は、CSSを使って目次のデザインを検討する予定したが、不慣れな初心者が入力ミスなどをすると、重大な不具合を招く可能性があるので止めます。この講座では、テキストエディタでの対応に留めます。
目次のデザイン
目次を四角枠の中に作ると、目次が周辺デザインを引き立たせてくれます。
この場合は、div要素の中に、id属性＜div id=”id名”＞や、class属性＜div class=”class名”＞を入れて使います。
CSSのid名の場合は、頭部に#を付けます。「#id名｛スタイル指定」｝」、CSSのclass名の場合は頭にピリオドの.を付けます。「.class名{スタイル指定｝」の形で活用します。
《id属性》
id属性は、同じページの別の場所に飛ばしたい時などに、リンク先のタグにid属性を記入します。元来、idの意味は識別子です。背番号や出席番号に相当するため、同じ番号は重複しません。
《class属性》
元来、idの意味は識別子です。idは、背番号や出席番号に相当するため、同じ番号は使用しませんが、同じページ内の2つ以上の要素に、同じスタイルを適用したい場合に、class属性を使います。
要素に同じclass属性を記述しておくことで、同じスタイルを一括で適用できます。
尚、id属性とclass属性には、どんな名称を付けても良いですが、分かりやすくするのが良いでしょう。
例えば囲み枠の場合は、包み込むや覆うなどの英文にすると後でプログラムを確認する時に便利です。
具体的な目次作成例
まだ、大雑把な理解でしょうが、具体例を見ていく方が理解しやすいので具体的な事例を示します。
尚、いつものようにHTMLが働いてしまわないように、本来英数小文字で記載すべき「＜や＞」等は、大文字で記載しています。
＜h2 id=”mokuji1″＞▼目次＜/h2＞
＜ol＞
＜li＞＜a href=”#satu1″＞1.見出しa＜/a＞＜/li＞
＜li＞＜a href=”#satu2″＞ 1-1.見出しb＜/a＞＜/li＞
＜li＞＜a href=”#satu3″＞2.見出しｃ＜/a＞＜/li＞
＜li＞＜a href=”#satu4″＞3.見出しd＜/a＞＜/li＞
＜/ol＞
（以下は、飛び先の見出しです。）
＜h2 id=”satu1″＞1.見出しa＜/h2＞
〜〜記事〜〜
＜h3 id=”satu2″＞1-1.見出しb＜/h3>
〜〜記事〜〜
＜h2 id=”satu3″＞2.見出しa＜/h2＞
〜〜記事〜〜
＜h2 id=”satu4″＞3.見出しa＜/h2＞
〜〜記事〜〜
以上の内容をBracketsなどのテストエディタに記載して、表示させると、ビジュアルエディタには次の内容が印字されます。
目次を装飾
以上の目次に四角枠を付けるには、次のようにします。
＜div=”background: #adff2f; padding: 18px;border-radius: 10px;”＞目次を挿入＜/div＞
ここで、divタグは、範囲をひとまとめにします。構造的には特別な意味はありませんが、範囲指定ができるので便利です。
- backgroundは、背景画像をプロパティで指定します。
- paddingは、枠内側と外側の余白です。
- borderは、枠線を指定します。（border:太さ、種類、色）
- border-radiusは、枠の角を丸くすることが出来ます。（数値と単位で指定）
＜div=”background: #adef2fea; padding: 15px; border: 2px; border-radius: 10px;”＞
＜h2 id=”mokuji1″＞▼目次＜/h2＞
＜ol＞
＜li＞＜a href=”#satu1″＞1.見出しa＜/a＞＜/li＞
＜li＞＜a href=”#satu2″＞ 1-1.見出しb＜/a＞＜/li＞
＜li＞＜a href=”#satu3″＞2.見出しｃ＜/a>＜/li＞
＜li＞＜a href=”#satu4″＞3.見出しd＜/a>＜/li＞
＜/ol＞
＜/div＞
これをビジュアルエディタの画面に表示すると、次のようになります。
まとめ
今回は、CSSをいじることは断念して、テキストエディタに書き込んで目次のひな形を作ることで対応しました。
この方法なら、ミスをしても心配ありません。思う存分、いじり回して自分で気に入った目次を作成して下さい。
実際にサイトで使う場合には、コピーしたものを用意して使うようにしましょう。
