HTMLで目次を作成する方法や活用してもらうためのコツを紹介
目次を設置するメリット
目次を設置すると、ユーザーの利便性向上やSEOでの高評価を期待できます。ここでは、目次を設置するメリットをご紹介します。
ユーザーの利便性が向上する
Webページに目次を設置すると、ユーザーが目次からページの全体的な内容を把握し、求めている情報があるかを確認できるようになります。また、目次内の見出しをクリックすると、その見出しまで飛べるようにするリンクも入れることで、ユーザーの利便性が大幅に向上します。ユーザーがすぐに求めている情報にアクセスできるため、疑問の解決がしやすくなるでしょう。さらに、ユーザーは求めている情報をじっくり読む傾向にあるため、滞在時間を延ばせる可能性があります。
SEOで高評価を受けやすい
Googleは、ユーザーファーストで検索品質評価ガイドラインを制定しており、利便性が高いサイトはSEOで高評価を受けやすいです。目次を設置しているサイトは、前述したようにユーザーの利便性を向上させるためSEO対策にも効果的といえます。また、目次内で見出しに飛べるリンクが設置されていることで、Googleのクローラーがページの構成やコンテンツの内容、キーワードなどを把握しやすくなります。
検索結果に目次が表示されることがある
ページ内に目次を設置すると、上図のように検索結果でディスクリプションの下に見出しがリンクで表示されることがあります。
例えば、「SEOとは」のキーワードでコンテンツを作成し、その中で「SEOとは」「SEO対策のメリット」「SEO対策のやり方」などの見出しが目次とリンクでひもづいているとします。すると「SEOとは」のキーワードで上位表示した際に、ディスクリプションの下にリンクつきで「SEOとは」「SEO対策のメリット」「SEO対策のやり方」と表示されることがあります。
これにより、ユーザーはページを開く前でも検索結果から見出しを閲覧し、求める情報がありそうな見出しに直接飛べるようになります。また、目次が検索結果に表示されると、目次の1行分表示スペースが広くなるため、ユーザーの目に留まりやすくなり、クリック率の向上も期待できるでしょう。
HTMLで目次を作成する方法
HTMLでは、階層がない基本的な目次と階層を表示する目次を作成できます。ここでは、それぞれの作成方法についてご紹介します。
基本的な目次の作成方法
Webページの目次は、リスト形式で作成します。具体的には、以下のコードのように<ol>タグと<li>タグを活用して番号つきリストを作成し、見出しに飛べるよう<a>タグで見出しへ飛ぶリンクを設置しましょう。
<ol>
<li><a href="#○○（1つ目の見出しへのリンク）">○○（1つ目の見出しの文言）</a></li>
<li><a href="#○○（2つ目の見出しへのリンク）">○○（2つ目の見出しの文言）</a></li>
<li><a href="#○○（3つ目の見出しへのリンク）">○○（3つ目の見出しの文言）</a></li>
<li><a href="#○○（4つ目の見出しへのリンク）">○○（4つ目の見出しの文言）</a></li>
<li><a href="#○○（5つ目の見出しへのリンク）">○○（5つ目の見出しの文言）</a></li>
</ol>
すると、下図のように見出しごとにリンクが設置された目次を作成できます。
引用：Liveweave
CSSによって目次の背景色やフォントを変えることも可能ですので、サイトのデザインに合うように調整してみるのがおすすめです。
階層を表示する目次の作成方法
目次の階層を深くする際は、先述した<li>タグの中に<ol>タグと<li>を使用することで可能になります。具体的なコードは以下のとおりです。
<ol>
<li><a href="#○○（1つ目の見出しへのリンク）">○○（1つ目の見出しの文言）</a></li>
<li><a href="#○○（2つ目の見出しへのリンク）">○○（2つ目の見出しの文言）</a></li>
<li><a href="#○○（3つ目の見出しへのリンク）">○○（3つ目の見出しの文言）</a>
<ol style="display: block;">
<li><a href="#○○（3.1つ目の見出しへのリンク）">○○（3.1つ目の見出しの文言）</a></li>
<li><a href="#○○（3.2つ目の見出しへのリンク）">○○（3.2つ目の見出しの文言）</a></li>
<li><a href="#○○（3.3つ目の見出しへのリンク）">○○（3.3つ目の見出しの文言）</a></li>
</ol>
</li>
<li><a href="#○○（4つ目の見出しへのリンク）">○○（4つ目の見出しの文言）</a></li>
<li><a href="#○○（5つ目の見出しへのリンク）">○○（5つ目の見出しの文言）</a></li>
</ol>
上記のコードにより、下図のように階層を深くした目次を作成できます。
引用：Liveweave
階層が深い見出しを表示することで、大見出しだけでなく小見出しの内容も目次で把握できるようになります。しかし、階層をすべて目次に表示すると目次内の情報量が増えてわかりづらくなる恐れがあるため、<h2>までの表示に限定するか、<h3>以降は折りたたむなどで表示する見出しを調整するとよいでしょう。
目次のデザインアイデア
目次には、ボックスで囲んだり、リストの先頭を別の文字で表示したりするなどのデザインがあります。デザインを調整することで、ユーザーが見やすくなり、サイトのデザインにも合わせられるようになります。ここでは、それぞれのアイデアをご紹介します。
目次をボックスで囲む
目次をボックスで囲むデザインは、目次の枠や背景色を変更できるため多くのサイトで使われています。
コードの例は以下のとおりです。
・HTMLのコード
<ol id="box">
<li><a href="#○○（1つ目の見出しへのリンク）">○○（1つ目の見出しの文言）</a></li>
<li><a href="#○○（2つ目の見出しへのリンク）">○○（2つ目の見出しの文言）</a></li>
<li><a href="#○○（3つ目の見出しへのリンク）">○○（3つ目の見出しの文言）</a></li>
<li><a href="#○○（4つ目の見出しへのリンク）">○○（4つ目の見出しの文言）</a></li>
<li><a href="#○○（5つ目の見出しへのリンク）">○○（5つ目の見出しの文言）</a></li>
</ol>
・CSSのコード
#box {
width: 400px;
height: 200px;
padding: 25px;
border: 1px solid gray;
background-color: silver;
box-sizing: border-box;
}
#box li {
margin-top: 5px;
margin-left: 70px;
}
このコードでは、枠線の太さや色、背景色、表示領域の調整を行っており、下図のような表示になります。
引用：Liveweave
サイトのデザインに合わせてデザインを調整してみるとよいでしょう。
目次の先頭にある数字の表記やデザインを変える
リストの先頭にある数字の表記やデザインを変えたい場合は、以下のように<span>タグを活用します。
まずHTMLでは以下のように記述します。
<li><a href="#○○（1つ目の見出しへのリンク）">○○（1つ目の見出しの文言）</a>
<ol style="display: block;">
<li><span>1-1</span><a href="#○○（3.1つ目の見出しへのリンク）">○○（3.1つ目の見出しの文言）</a></li>
<li><span>1-2</span><a href="#○○（3.2つ目の見出しへのリンク）">○○（3.2つ目の見出しの文言）</a></li>
<li><span>1-3</span><a href="#○○（3.3つ目の見出しへのリンク）">○○（3.3つ目の見出しの文言）</a></li>
</ol>
次にCSSで以下のように記述します。
ol {
list-style: none;
}
li {
margin-top: 5px;
}
span {
margin-right: 20px;
display: inline-block;
border-bottom: 2px solid blue;
font-size: 23px;
}
上記のコードにより、下図のように表示できます。
引用：Liveweave
このようにリストの先頭のスタイルを変えると、階層がわかりやすくなったり、独自のデザインでリストを作ったりすることが可能になります。CSSで文字の大きさや色などを調整するとよりサイトに合ったデザインの目次を作れるでしょう。
先頭を①②などの数字を丸で囲ったデザインにする
目次の先頭にある数字を丸で囲って、①②③のように表示し、丸の中の色を変えたり大きさを調整したりすることも可能です。コードの例としては、以下のとおりです。
まずHTMLでは以下のように記述します。
<ol>
<li><span>1</span><a href="#○○（1つ目の見出しへのリンク）">○○（1つ目の見出しの文言）</a></li>
<li><span>2</span><a href="#○○（2つ目の見出しへのリンク）">○○（2つ目の見出しの文言）</a></li>
<li><span>3</span><a href="#○○（3つ目の見出しへのリンク）">○○（3つ目の見出しの文言）</a></li>
</ol>
次にCSSで以下のように記述します。
ol {
list-style: none;
}
span {
display: inline-block;
width: 30px;
height: 30px;
margin: 5px 7px 0 0;
padding-top: 5px;
text-align: center;
border-radius: 50%;
border: 1px solid gray;
background-color: silver;
box-sizing: border-box;
}
これにより、下図のように数字のスタイルがグレー丸枠で中の色がシルバーになった①②③になります。
引用：Liveweave
CSSで丸を作る際は、widthとheightを同じ値にして、border-radiusの値を50%にすると作成できます。➀は「①」、❶は「❶」といったように特殊文字のコードでも作成できますので、ぜひ試してみてください。
目次をユーザーに活用してもらうためのコツ
目次をユーザーに活用してもらうためは、見出しに飛ぶためのリンクを入れたり、最初から開いた状態で表示したりするのがおすすめです。ここでは、これらのコツについてそれぞれご紹介します。
目次内の見出しにはリンクを入れる
目次は必ずリンクとひもづけるようにしましょう。目次の役割は、ユーザーが記事の内容を把握しやすくするだけでなく、リンクから目当ての見出しに飛べるようにすることも含まれます。
また、前述したように検索結果でディスクリプションの下に見出しがリンクつきで表示されることもあるため、ユーザーの利便性とSEO対策の両方の観点からリンクつきで目次を設定するのが必須といえます。
最初から開いた状態で表示する
目次には開閉ボタンを設置することで、ユーザーの利便性が向上します。特に、見出しの数が多くなると目次の表示領域も広くなるため、目次を見ないユーザーにとっては閉じられるほうが便利です。
また、開閉ボタンはページが表示されたときに、初めから開いている状態か閉じている状態かを設定できます。この設定では、初めから開いている状態にしておくのが望ましいです。目次を閉じた状態にすると訪れたユーザーが目次に気づきにくくなり、目次が活用されなくなってしまう恐れがあります。
ただし、前述したように目次の階層をすべて表示すると目次の情報量が多くなり、内容を把握するのが難しくなるため、<h3>以降は折りたたむなどで目次を調整するとよいでしょう。
適切な長さで要点を伝える見出しにする
見出しの文言が長すぎると、目次を表示した際に文字の量が多くなり、ユーザーが一目でコンテンツの内容を把握するのが難しくなってしまいます。また、短すぎても内容を伝えるには不十分でしょう。
そのため、見出しはコンテンツの要点をきれいにまとめて表記し、長くても1行で収まるように心がけることが大切です。これにより、目次に表示される文字数を抑えつつ、ユーザーが内容を把握しやすくなります。
SEOを意識した見出しを作成する
見出しを考える際はSEOを意識するとよいでしょう。見出しは重要度が最も高いものを<h1>として、<h2><h3>と階層が深くなるほど重要度が下がっていき、最大で<h6>まであります。<h>タグでは重要度が高い見出しに適切にSEOキーワードを含めて文言を考えるとよいでしょう。
適切な見出しの付け方についてより詳しく知りたい場合は「見出しの付け方とは？役割や重要性、付けるときのポイントを解説」の記事をご参照ください。
まとめ
この記事では、目次を設置するメリットやHTMLで目次を作成する方法などをご紹介しました。目次を設置すると、ユーザーの利便性向上やSEOでの高評価などが期待できます。
HTMLでは、階層がない基本的な目次と階層を表示する目次を作成することが可能ですが、階層をすべて目次に表示するとわかりづらくなる恐れがあるため、表示する見出しを調整するのがおすすめです。
目次をユーザーに活用してもらうには、見出しに飛ぶためのリンクを入れたり、目次を開いた状態で表示したりするなどの工夫を施すとよいでしょう。
