本記事はこんな方にオススメ

「Webの初心者の方」

「目次のHTMLを作成したい方」

「HTMLの学習をしたい方」

本記事の内容

ブログやサイト等でよく見かける目次機能。

単に項目を並べたものもあれば、目次をクリックすると記事まで飛んでくれるものまで、機能や表示は様々です。

今回はweb初心者が押さえておくと便利な３つの公式を使って、プロ顔負けの目次を作っていきます。

そのために踏むステップはなんと３つだけ。

HTMLを学びたい方は是非この機会に身につけちゃってください♩

[Web初心者でも簡単] HTMLで目次を作ってみよう（HTML実用編４）

今回の記事のゴール

今回作る目次はこんなもの

今回作る目次はこの様なものです。

この記事を読み進めると、Web初心者の方でも上の様な目次を作ることができます。

この目次は、目次の項目をクリックすると自動的に該当記事内容に移動してくれる機能も付いています。

今回の目次作りで身につく知識

1. 見出しの作り方
2. リストの作り方
3. リンクの貼り方
4. 目次の項目をクリックすると該当内容に移動する機能の付け方

見出し作りから始めよう

見出しのタグと公式

見出し作成のHTML

hの後のナンバーは、1~6の数字が入ります。

また、見出しのタイトルとして表示したい文字は〇〇の部分に書きます。

目次作成のどこに見出しのHTMLを使うの？

目次作成のHTMLの以下の様な部分で今回の見出しのタグを使います。

<h1>記事のタイトル</h1>

~

<h2 id=”id名①”>目次タイトル①</h2>
<p>本文</p>
<hr>
<h2 id=”id名②”>目次タイトル②</h2>
<p>本文</p>
<hr>
<h2 id=”id名③”>目次タイトル③</h2>
<p>本文</p>
<hr>
<h2 id=”id名④”>目次タイトル④</h2>
<p>本文</p>
<hr>
<h2 id=”id名⑤”>目次タイトル⑤</h2>
<p>本文</p>
<hr>
<h2 id=”id名⑥”>目次タイトル⑥</h2>
<p>本文</p>

箇条書きリストを作ろう

リストの表示は箇条書きリストと、数値表示のリストと、大きく分けて２つあります。

今回の目次づくりでは箇条書きリストを使用して進めていきます。

箇条書きリストのタグと公式

ではここで、箇条書きリストのタグと公式をご紹介します。

箇条書きリスト

<li>○○</li>の中身である○○の部分に文章を入力することでリストを自由に作ることができます。

目次作成のどこに箇条書きリストのHTMLを使うの？

<ul>
<li><a href=”#id名①”>目次タイトル①</a></li>
<li><a href=”#id名②”>目次タイトル②</a></li>
<li><a href=”#id名③”>目次タイトル③</a></li>
<li><a href=”#id名④”>目次タイトル④</a></li>
<li><a href=”#id名⑤”>目次タイトル⑤</a></li>
<li><a href=”#id名⑥”>目次タイトル⑥</a></li>
</ul>

リンクを貼ろう

リンクを貼るタグと公式

目次作成のどこにリンク作成のHTMLを使うの？

<a href=”#id名①“>目次タイトル①</a>
<a href=”#id名②“>目次タイトル②</a>
<a href=”#id名③“>目次タイトル③</a>
<a href=”#id名④“>目次タイトル④</a>
<a href=”#id名⑤“>目次タイトル⑤</a>
<a href=”#id名⑥“>目次タイトル⑥</a>

〜

<h2 id=”id名①“>目次タイトル①</h2>
<h2 id=”id名②“>目次タイトル②</h2>
<h2 id=”id名③“>目次タイトル③</h2>
<h2 id=”id名④“>目次タイトル④</h2>
<h2 id=”id名⑤“>目次タイトル⑤</h2>
<h2 id=”id名⑥“>目次タイトル⑥</h2>

黄色のアンダーマーカーの部分はid属性といって、名前を決めるのに使われます。

今回の場合<a href=”#id名①“>は、idの名前が「id名①」の部分に移動するリンクのような指示を出しています。

そしてその移動先（リンク先のようなもの）を探してみると、idの名前が「id名①」の部分が、<h2 id=”id名①“>の中にあります。

要するに<a href=”#id名①“>は、<h2 id=”id名①“>の所まで移動させる指示を出しているという事です。

そのため『<a href=”#id名①“>目次タイトル①</a>』のHTMLが隠れている目次タイトル①をクリックすると、

『<h2 id=”id名①“>目次タイトル①</h2>』の目次タイトル①まで移動する機能が働きます。

目次のクリックで記事に移動する機能をつける

必要な3つのタグと公式

これまでにご紹介してきた３つのHTMLタグと公式をミックスすることで、目次のクリックで記事に移動する機能をつけることができます。

見出し作成のHTML

箇条書きリストのHTML

リンク作成のHTML

見出し/箇条書きリスト/リンクの3つタグと公式をミックスする

例えばこんな目次とクリックで移動できるページを作るとき、

HTMLはこの様になります。

少し分かりやすくするために、HTMLの骨組みのみでまとめてみました。