はじめに
上に記述しているような目次の表示、合わせてサイト内へのリンクの付け方を書いてみようと思います。
簡単なHTMLコードの組み合わせで実装されていますが、いくつかアレンジする方法がありますので、私もよく使うものを少し紹介してみたいと思います。
参考書籍
¥2200円(amazon 2022/07/07現在)
今回参考にさせていただいた書籍は秀和システム社の「HTML&CSS&JavaScript辞典（第7版）」になります。
厚さ3センチほどの厚めの書籍。
辞書感覚で使用でき、タグごとに図解があり、見やすく分かりやすいのでおすすめです。
HTMLコードと表示例
まずは、文字列を箇条書きのように表示するコード。
以下のようなHTMLを記述します。
HTMLコード（リスト表示.1）
<ul>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>表示例
- あいうえお
- かきくけこ
- さしすせそ
表示例のように黒丸が<li>で囲った文字列に付与され、見やすくなりました。
さらに<ul>のタグを<ol>とすると、黒丸ではなく、数字が付与されるようになります。
HTMLコード（リスト表示.2）
<ol>
<li>あいうえお</li>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ol>表示例
- あいうえお
- かきくけこ
- さしすせそ
このように、主に目次では<ul>と<ol>を使い分けると良いでしょう。
さらに、リスト表示コードの中に、さらにリスト表示コードを追加すると、リストの階層表示ができます。
言葉では説明しにくい部分があるので、具体的なコードを下に示します。
HTMLコード（リストの階層表記）
<ul>
<li>あいうえお</li>
<ul>
<li>あきはばら</li>
<li>いけぶくろ</li>
<li>うえの</li>
<li>えびす</li>
<li>おかちまち</li>
</ul>
<li>かきくけこ</li>
<li>さしすせそ</li>
</ul>表示例
- あいうえお
- あきはばら
- いけぶくろ
- うえの
- えびす
- おかちまち
- かきくけこ
- さしすせそ
上の例のように<ul>と</ul>の間にさらに<ul>と</ul>を挿入する、、。
そのように階層を増やしていく事ができます。
私の場合はこのような階層表記は3段目までしか使用した事がありませんので、それ以降の階層はどのように表示されるのかはわかりません。
ですが基本的には3段目以降は逆に見づらくなるので、使用しないほうが良いかもしれません。
HTMLコード（サイト内リンク）
<a href="#n0">↑目次に戻る</a>リンク先のタグ↓
<h2 id="n0"目次></h2>表示例
リンク先を指定したい文字列に<a></a>（アンカーという）というタグをつけます。
“href”という属性を使用して、リンク先を指定します。
一方、リンク先にも”id”という属性をつけ、リンク元から目的地が分かるようにします。
リンク元の文字列は文字が青色になります。
今回の表示例では、目次の章にリンクを設定してあります。
HTMLコード（リスト＋サイト内リンク）
<ul>
<li><a href="#n0">目次に戻る1</a></li>
<li><a href="#n0">目次に戻る2</a></li>
<li><a href="#n0">目次に戻る3</a></li>
</ul>表示例
上のようなリスト表示と、サイト内リンクを設定する仕組みを合わせると、上のように各リストごとにページ内リンク先を指定する事ができます。
まとめ
簡単でしたが、目次をリスト表示する方法を紹介してみました。
これをサイトの冒頭に書いておくだけで、見栄えは相当よくなるだけでなく、サイトを閲覧してくれている方々にもとても親切なサイトになります。
実はここで紹介した方法は基本的な部分でしかなく、CSSというデザイン要素を盛り込む事で、オリジナリティの高い目次も作成できます。
私もいいアイデアが浮かんだら、デザイン要素もたくさん取り入れていきたいと思います。
これはどうでもいい話ですが、目次よりも前に、お洒落なイメージ画像を挿入してみました。
みてくださっている方々の反応も含めまして、感触が良かったらこのようなアクセントも少しづつ加えていきたいと思います。
以上、最後までありがとうございました。
コメント