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

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

 

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

 

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

 

もくじ

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

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

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

スポンサーリンク



 
 

 
 

1. 目次を作る

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

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

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

 

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

 

■HTML文

 

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

 

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

 

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

 

■CSS

 

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

 

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

 

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

 

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

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

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

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

 

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

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

 

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

 

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

     

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

 

 

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

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

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

 

 

■HTML文

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

 

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

 

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

 

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

スポンサーリンク