松本のブログ

HTML CSS 目次の作り方【ページ内リンク 階層構造】

HTML-CSS もくじ index

今回は、HTMLで目次を作る方法を紹介します。

 

ホームページやブログなどで目次やページ内リンクをつけていると、訪問者に優しい記事になります。

 

また製作者側としても、目次と見出し・本文の構成を確認することで全体の整合性を確認しやすくなります。

 

もくじ

以下は本記事のもくじです。

  1. 1. 目次を作る
    1. 1-1. 簡単な目次を作る
    2. 1-2. ページ内リンクを設定する
    3. 1-3. 階層構造の目次を作る

それでは目次の作り方に入っていきます。
 
 

スポンサーリンク



 
 

 
 

1. 目次を作る

1-1. 簡単な目次を作る

はじめに以下のような一番簡単な目次を作ってみましょう。
 
■簡単な目次の例

  1. 大阪の人気ラーメンの紹介
  2. 京都の人気ラーメンの紹介
  3. 博多の人気ラーメンの紹介

 

上記の目次は、順番付きリスト<ol>と<li>を使って作成できます。

 

■HTML文

<h2>目次</h2>

<ol class="page-contents">

<li>大阪の人気ラーメン</li>

<li>京都の人気ラーメン</li>

<li>博多の人気ラーメン</li>

</ol>

 

※「class=”page-contents”」は後ほど出てくるCSSで指定するために記述しました。必須ではありません。

 

なお、HTML文には「1. 」などの数字を入れていませんが、Webブラウザが<ol><li>を解釈して数字をつけてくれています。

 

この数字が不要な場合はCSSでリストに対して「list-style:none」を指定することで非表示にできます。

 

■CSS

/* もくじ */
.page-contents{
list-style:none; /* 冒頭の数字が不要なので消す */
padding-left:5px; /* 左側の余白を5pxに調整 */
}

 

簡単な目次 list-style:noneで数字を消した
list-style:noneで数字を非表示にした

 

このようにして簡単に目次を作成できます。

 

次に目次にページ内リンクをつけてみましょう。

 

1-2. ページ内リンクを設定する

サイトに初めて訪問した人はまずぱっと見て自分の探している情報かどうかを判断します。

訪問者が目次から素早く本文を参照できるように、目次にページ内リンクをつけるとより親切になります。
 

■ページ内リンクで本文に移動する例

 

ページ内リンクは下記のような書き方で実現できます。

<h2>もくじ</h2>
<ol class="page-contents">

<li><a href="#i1">大阪の人気ラーメン</a></li>

<li><a href="#i2">京都の人気ラーメン</a></li>

</ol>


<h3 id="i1">大阪の人気ラーメン</h3>

大阪の人気ラーメンは、こってり系の〇〇とあっさり系の◇◇に分かれていて・・・
 

<h3 id="i2">京都の人気ラーメン</h3>

一方、京都の人気ラーメンは、大阪に比べて・・・

 

先ほどと比べて、<li>の中に、<a href=”#〇〇;”></a>を追加しています。

 

そして、<h>見出しにid=”〇〇”を指定して、<a href=”#〇〇;”>のリンク先と関連付けることでページ内の指定箇所に移動できるようになります。

 

  • <a>タグをつけると目次に下線がついてしまうので、不要な場合はtext-decoration:none;で下線を消します。
     
    ■CSS

    /* もくじ */
.page-contents{
list-style:none; /* 冒頭の数字が不要なので消す */
padding-left:5px; /* 左側の余白を5pxで調整する */
}
.page-contents a{
text-decoration:none; /* 装飾(下線)を消す */
}

     
     

    目次 CSS text-decoration指定なしで下線が表示
    text-decoration指定なしで下線が表示される

     

    目次 CSS text-decoration:noneで下線が非表示になる
    text-decoration:noneで下線が非表示になる

 

 

1-3. 階層構造の目次を作る

最後に、先ほどの簡単な目次とページ内リンクを使って、階層を持った目次を作ってみます。
下記は本記事で利用している目次です。

本記事の目次(階層構造)
本記事の目次(階層構造)

 

 

■HTML文

階層構造の目次は<li></li>の中にさらに<ol><li>を入れること(入れ子)で実現できます。

<ol class="page-contents">
 <li><a href="#i1">1. 目次を作る</a></li>
 <li>
<ol>
 <li><a href="#i1-1">1-1. 簡単な目次を作る</a></li>
 <li><a href="#i1-2">1-2. CSSを設定する</a></li>
 <li><a href="#i1-3">1-3. 階層構造のの目次を作る</a></li>
</ol>
</li>
</ol>

<h2 id="i1">1. 目次を作る</h2>

・・・
<h3 id="i1-1">1-1. 簡単な目次を作る</h3>

・・・

<h3 id="i1-2">1-2. ページ内リンクを設定する</h3>

・・・
 
<h3 id="i1-3">1-3. 階層構造の目次を作る</h3>

...
 

 

このようにして、自由に目次を作成することができます。

 

特に長い記事を書く場合には、目次やページ内リンクがあると訪問者に優しい記事になります。

 

最後までご覧いただきありがとうございました。
 
 

スポンサーリンク