HTMLとCSSで目次をデザイン！作成方法から具体例を挙げて解説！

更新日：2022年12月14日 / 投稿日：2021年10月5日

HTMLとCSSで目次を作成したい
ご自身のWebサイトに目次を導入したい

という方向けに、この記事では初心者でも目次の作り方をわかりやすく解説しています。

HTMLで目次を構造を作る方法
CSSで目次をデザインする方法

を理解することができます。

～目次～

1 HTMLで目次の構造をつくる
2 CSSで目次をデザインしよう
3 CSSでの目次デザインの例
- 3.1 上下線のみでスタイリッシュな目次デザイン
- 3.2 「もくじ」を強調したボックスデザイン
4 まとめ

HTMLで目次の構造をつくる

Webサイトに目次を導入するためにはHTMLで目次の構造を作る必要があります。HTMLで目次の構造を作った後、CSSでデザインを行います。

この章ではHTMLで目次の構造を作る方法について解説します。

リストを作る

目次を作るための土台となるのがリストです。リストを使わなくても目次を作成することができますが、デザインのしやすさからリストで目次を作ることが一般的となっています。

リストは<ul></ul>もしくは<ol></ol>タグの中に<li></li>タグを入れ子にして使います。

<ul>タグはUnordered Listの略で番号なしの箇条書き、<ol>はOrdered Listの略で番号付きの箇条書きとなります。

今回は<ul>タグを利用することとします。

例として以下のような構成の記事の目次のリストを作ってみましょう。

H2:はじめに

H2:内容

H3:AAAについて

H3:BBBについて

H3:CCCについて

H2:まとめ

全てを<ul>タグ内の<li>タグで囲めばできるので、

<ul>
  <li>はじめに</li>
  <li>内容</li>
  <li>AAAについて</li>
  <li>BBBについて</li>
  <li>CCCについて</li>
  <li>まとめ</li>
</ul>

これで見出しを箇条書きで表示することができました。これでも目次といえますが、もう少し見やすいように、使いやすいように設定していきましょう。

段階をつけて表示する

Webの記事は基本的に「見出し＋文章」で構成されています。見出しは大見出し（H2）、中見出し（ H3）、小見出し（ H4）、…と設定され、大見出しの中に中見出し、中見出しの中に小見出しと入れ子の状態です。

入れ子の状態を表現することで、よりわかりやすい目次にできます。やり方は簡単です。リストの中にリストを作ることによって再現できます。以下の例をご覧ください。

<ul>
  <li>はじめに</li>
  <li>内容</li>
  <li>
    <ul>
      <li>AAAについて</li>
      <li>BBBについて</li>
      <li>CCCについて</li>
    </ul>
  </li>
<li>まとめ</li>
</ul>

リストの中に<ul>タグを追加して、リストの中にリストを追加しています。これで、入れ子の状態を表現できるので、大見出し、中見出し、小見出しの表示に対応できます。

目次からジャンプする機能をつける

目次をクリックしたら、該当する箇所にジャンプする機能をつけましょう。これには<a>タグを利用します。<a>タグはリンクを貼るときに使うタグです。同じページの該当箇所にリンクを貼ることでジャンプ機能を作ります。

それぞれのH2、H3、H4にジャンプすればいいので、まずはジャンプするためのリンクを作ります。やり方は簡単で、各見出しにidを設定すれば実現できます。

idの設定は以下の通りです。

<h2 id="first">はじめに</h2>

開始タグの中にid=””で好きな文字列を入力します。一度使った文字列は他のidに設定できません。見出しそれぞれにオリジナルの文字列を設定してください。

<h2 id="first">はじめに</h2>
<h2 id="main">内容</h2>
  <h3 id="aaa">AAAについて</h3>
  <h3 id="bbb">BBBについて</h3>
  <h3 id="ccc">CCCについて</h3>
<h2 id="point">まとめ</h2>

idの設定が完了しました。次は目次から該当箇所にリンクできるように設定します。idに対してリンクを貼るためにはaタグのhref属性で#id名を指定します。

<li>
  <a href=”#first”>はじめに</a>
</li>

文字列を<a></a>タグで囲み、href=”#id名”を指定します。これで、該当するidにリンクを貼れました。

全てに対してリンクを貼ってみましょう。

<ul>
  <li><a href="#first">はじめに</a></li>
  <li><a href="#main">内容</a></li>
  <li>
    <ul>
      <li><a href="#aaa">AAAについて</a></li>
      <li><a href="#bbb">BBBについて</a></li>
      <li><a href="#ccc">CCCについて</a></li>
    </ul>
  </li>
  <li><a href="#point">まとめ</a></li>
</ul>

href属性でidを記述する際には#が必要となりますので注意してください。

ジャンプ機能をつけることで、だいぶん、見出しらしくなってきました。

CSSで目次をデザインしよう

HTMLで目次の構造を作成したら、次はCSSで見た目を整えていきましょう。

なぜCSSを使う必要があるのかと疑問に思っている方はぜひ以下の記事を参照してみてくださいね。CSSの使い方についても解説しています。

関連記事：【初心者向け】CSSについて使い方や優先順位などを解説

CSSを使うことで見た目の変更を簡単に行うことができます。今回は次のような見た目の目次を作成していきましょう！。

目次の要素をdivタグで囲い、classを設定

特定の範囲にCSSを適用したいというシーンは多々存在します。そのようなときにCSSを適用する範囲を指定できるタグが<div></div>です。タグとしては意味を持ちませんが、<div>タグで囲った範囲をひとグループとして扱うことができるようになります。

今回はのちに目次をボックスで囲みたいので目次の要素全体を<div>タグで囲みましょう。この際にclassを設定しておく必要があります。

classを設定しておくことで、どの要素に対してCSSを適用するのかを指定できます。class名はtable_of_contentsとします。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>Table of Contents</title>
</head>
<body>
  <header>
    <h1>Title is Here</h1>
  </header>
  <div class="table_of_contents">
    <ol>
      <li>MENU 01</li>
      <li>MENU 02</li>
      <li>MENU 03</li>
      <li>MENU 04</li>
      <li>MENU 05</li>
   </ol>
  </div>
  <main>
    main contents Here.
  </main>
  <footer>
    <p>footer Contents Here.</p>
  </footer>
</body>
</html>

CSSを記述するときに table_of_contents のclassを指定すれば目次全体にそのCSSを適用できることになります。

大枠のデザイン

枠や背景色、目次ボックスの位置を設定します。CSSのコードをみていきましょう。classに対してCSSを適用するためには「.（ドット）クラス名{ }」で指定します。今回はclass名が table_of_contents ですので、

.table_of_contents{ 

  ここにCSSを記述します

}

となります。CSSを記述してみましょう。

.table_of_contents{
  background: #f8f5f2; /*背景色を#f8f5f2に指定*/
  color: #333; /*文字色を#333に設定*/
  font-weight: bold; /*フォントを太字に設定*/
  font-size:17px;  /*フォントの大きさを17pxに設定*/
  margin:0 auto;  /*目次の位置を指定*/
  border: 5px solid #078080;  /*目次のボックスを線で囲む。5pxで線の種類はsolid、色は#078080に設定。*/
  width:100%;  /*横幅を親要素に対してどのくらいの大きさにするか設定*/
  max-width:300px;  /*最大の横幅を設定*/
}

プロパティーに対して、値を指定して見た目を整えていきます。色はカラーコードで指定するかもしくはgreenやredなどはそのまま記述して指定することができます。

CSSが適用されないとお悩みの方は以下の記事をご覧ください！

目次タイトルのデザイン

目次を目次だとひと目でわかるようにするために、目次に「もくじ」とタイトルを設定しておきましょう。今回は目次ボックスの中に「もくじ」の文字列を設定します。

この「もくじ」についてもCSSで装飾を行いたいのでそのためのタグをつけておきます。<span>タグです。

<span></span>は<div>タグと同様に意味を持たないタグのひとつです。要素全体を囲みたい場合には<div>タグがよく使われるのに対して、文字列などの指定には<span>タグを利用します。

<div class="table_of_contents">
  <span>もくじ</span>
  <ul>
    <li><a href="#first">はじめに</a></li>
    <li><a href="#main">内容</a></li>
    <li>
      <ul>
        <li><a href="#aaa">AAAについて</a></li>
        <li><a href="#bbb">BBBについて</a></li>
        <li><a href="#ccc">CCCについて</a></li>
      </ul>
    </li>
    <li><a href="#point">まとめ</a></li>
  </ul>
</div>

それでは早速、「もくじ」タイトルに対して装飾を行います。<span>タグにclassを設定してもいいのですが、今回は table_of_contents クラスの中の<span>タグ要素と指定してCSSを記述してみます。

.table_of_contents span{
  background: #078080; /*背景色を設定*/
  color: #f8f5f2;  /*文字色を設定*/
  font-size: 20px;  /*フォントのサイズを設定*/
  padding: 8px;  /*要素とそのボックスの間で余白を設定*/
  top: -5px;  /*親要素（今回はdiv）に対して位置設定*/
  left: -5px;  /*親要素（今回はdiv）に対して位置設定*/
}

「もくじ」タイトルは目次のボックスについているように見えますが、HTMLの要素的には別々のものです。CSSによって装飾することでボックスについているような見た目にしています。

親要素に対して位置を指定したい場合にはtop, leftを利用すると便利です。

項目のデザイン

それでは最後に各見出し項目のデザインを整えていきます。やりたいことは主に３つです。

リンク感をなくしたい
各項目の「・」を消去したい
項目ごとの間隔を整えたい

まずはリンク独特のデザインを無効化していきます。mokujiクラスのa要素に対してCSSを適用します。

.table_of_contents a{
  color: #333; /*文字色を#333に設定*/
  text-decoration: none; /*文字の装飾を無効化*/
}

ブラウザの設定によっても異なりますが、リンクは青色の文字になりますのでそれを避けるためにもcolorプロパティで色を設定します。また、テキストの装飾を無効化するには text-decorationをnoneに設定します。

続いてはtable_of_contentsクラスのli要素にCSSを適用します。

.table_of_contents li{
  list-style: none; /*リストのスタイルを無効化*/
  padding-bottom: 5px; /*要素のbottom（下）に余白を5pxに設定*/
}

リストのスタイルを無効化するにはlist-styleをnoneに設定します。また、padding-bottomで要素の下に対して余白を設定することで全体的に項目間のバランスを取ることが可能となります。

以上で目次のデザインが完了しました。

CSSでの目次デザインの例

この章ではいくつか目次のデザインについて紹介します。簡単に適用できるのでぜひ試してみてください。

上の章のサンプルで作った目次に適用できる形でCSSを記述しています！

上下線のみでスタイリッシュな目次デザイン

CSSの例は以下の通りです。


.table_of_contents{
  color: #333;
  font-weight: bold;
  font-size:17px;
  margin:0 auto;
  border-top: dashed #191970 3px;
  border-bottom: dashed #191970 3px;
  width:100%;
  max-width:300px;
}

.table_of_contents span{
  display:block;
  text-align:center;
  color: #333;
  font-size: 25px;
  padding: 8px;
}

.table_of_contents a{
  text-decoration: none;
  color: #333;
}

.table_of_contents li{
  list-style: none;
  padding-bottom: 5px;
}

上下のみボーダーを入れ、シンプルな見た目の目次です。スタイリッシュな見た目で、Webサイトの景観を邪魔しないデザインとなっています。

「もくじ」を強調したボックスデザイン

CSSの例は以下の通りです。

.table_of_contents{
  color: #004643;
  font-weight: bold;
  font-size:17px;
  margin:0 auto;
  width:100%;
  max-width:300px;
  border: solid 1px #004643;
  background: #fff;
}

.table_of_contents span{
  display:block;
  text-align:center;
  color: #fff;
  font-size: 25px;
  background:#004643;
  padding:8px;
}

.table_of_contents a{
  text-decoration: none;
  color: #004643;
}

.table_of_contens li{
  list-style: none;
  pad

「もくじ」部分をボックスにして、目次全体を細いボーダーで囲むことでメリハリをつけたデザインとなっています。

「背景に画像を入れたい！」など、より凝ったデザインを作成するためには外部からファイルを読み込む必要があります。以下の記事を参考にすることですっきりとしたコードを書くことができますので試してみてくださいね！