HTMLで目次を作成してCSSでデザインする

ブログに目次があると、記事を読みに来てくれた方が最初に目次をみることで、どんな内容のことが書いてあるのかページ概要を把握できます。

検索ユーザーは少しでも早く自分の悩みに一致する情報が欲しいものです。

そのための手助けとしてページの最初に目次を作成して表示しておくと、ページにアクセスしてくれた検索ユーザーの求めている答えを見つけやすくなるようにできるのが目次の目的でもあります。

上記は目次を作成する目的のほんの一例ですが、目次作成が必要な方はHTMLで目次を作成してCSSでデザインするまでの流れを記事にしたので読んでみてください。

1. HTMLで目次の作り方はリストで作成する
2. HTMLで目次の階層を作成
3. 目次から見出しにジャンプするHTML
4. CSSで目次をデザインする
5. CSSで目次に番号を振ったデザインにする
6. まとめ

HTMLで目次の作り方はリストで作成する

HTMLで目次を作成するときには、目次全体を囲む親要素にdivを使用してclass属性に任意のクラス名をつけておきます。

そして目次の親要素div内部で目次のリスト作成をするために、リスト親要素を<ol>、そして子要素を<li>でマークアップして目次の土台を作ります。

<div class="l_toc">
    <ol>
        <li>見出し1</li>
        <li>見出し2</li>
        <li>見出し3</li>
        <li>見出し4</li>
    </ol>
</div>

親要素のdivのクラス名はHTMLで作成した目次をCSSでデザインするときに使用します。

<li>要素には目次を作成するページの見出しを記述します。

リスト構造にした目次をいったんブラウザで表示確認すると、上の画像のようにリスト先頭には番号が表示された階層なしの目次リストになります。

HTMLで目次を作成するページに<h2>のみで見出し構成してる場合には、階層なしでも問題ないですが、<h2>の見出しに<h3>の小見出しを挟むように階層を下げた構成にしている場合には、目次にHTMLで階層を作るようにします。

HTMLで目次の階層を作成

目次にHTMLで階層を作る場合は、リストの親要素<ol>内で1番上に記述してる<li>要素に、さらに小見出しの目次用のリストを追加記述します。

<div class="l_toc">
    <ol>
        <li>目次1
            <ol class="child_ol">
                <li>目次1-1</li>
                <li>目次1-2</li>
            </ol>
        </li>
        <li>目次2
            <ol class="child_ol">
                <li>目次2-1</li>
                <li>目次2-2</li>
            </ol>
        </li>
        <li>目次3
            <ol class="child_ol">
                <li>目次3-1</li>
                <li>目次3-2</li>
            </ol>
        </li>
        <li>目次4
            <ol class="child_ol">
                <li>目次4-1</li>
                <li>目次4-1</li>
            </ol>
        </li>
    </ol>
</div>

目次を作成するHTMLのリスト要素全体を囲むdivすぐ下のol要素から１つ階層を下げた直下のli要素内に小見出し階層用のolとliのリストを記述します。

ul ol liの使い方を覚えてリストを作れるようにする

また、記述した目次になる小見出し用のリスト階層のol開始タグには、CSSで目次をデザインするとき用にclass属性を任意名で付与しておきます。

ブラウザで目次にHTMLで階層を作ることができたページの表示確認をして、h2の見出しの目次と、h3の小見出しでリストが階層で分かれて表示できてれば、目次をHTMLで階層にする作り方は成功です。

目次から見出しにジャンプするHTML

次に目次のリストをクリックしたらページの各見出しまでジャンプすることができる目次の機能を作成をします。

<div class="l_toc">
    <ol>
        <li><a href="#chapter1">目次1</a>
            <ol class="child_ol">
                <li><a href="#schapter1">目次1-1</a></li>
                <li><a href="#schapter2">目次1-2</a></li>
            </ol>
        </li>
        <li><a href="#chapter2">目次2</a>
            <ol class="child_ol">
                <li><a href="#schapter3">目次2-1</a></li>
                <li><a href="#schapter4">目次2-2</a></li>
            </ol>
        </li>
        <li><a href="#chapter3">目次3</a>
            <ol class="child_ol">
                <li><a href="#schapter5">目次3-1</a></li>
                <li><a href="#schapter6">目次3-2</a></li>
            </ol>
        </li>
        <li><a href="#chapter4">目次4</a>
            <ol class="child_ol">
                <li><a href="#schapter7">目次4-1</a></li>
                <li><a href="#schapter8">目次4-2</a></li>
            </ol>
        </li>
    </ol>
</div>

目次から見出しにジャンプするHTMLは、目次側にaタグのhref属性を使用します。

<a href="#chapter1">目次1</a>

href属性の値にはidを記述します。idは＃を先頭に記述してid名を記述。このとき記述するid名は、全て異なるid名にして目次のリストで構成している全てのli要素内部に記述です。

ブラウザで表示して以下の画像のようにリンクされていてば、目次側のジャンプする目次構造は完成です。

目次を使用するページの見出し側では、目次側で指定したid名を記述します。

<h2 id="chapter1">見出し.1</h2>

id=”目次で指定したid名”

見出しに記述するidには#を記述しないことに気をつけます。

目次側
<a href="#chapter1">目次1</a>

見出し側
<h2 id="chapter1">見出し.1</h2>

例えば目次の1番最初の<li><a href=”#chapter1″>見出し</a></li>からページの最初の見出しにジャンプする作り方は、ページの最初の見出しをマークアップしているh2開始タグにid=”chapter1″を記述します。

HTMLでページ内の特定の場所にジャンプする指定方法

検証ツールなどで目次からジャンプする見出しにidが読み込まれていれば見出し側の作成もオッケーです。

HTMLで目次を作成する最終確認としてHTMLファイルを保存してブラウザの表示確認をし、作成した目次のリスト項目がリンク表示され、各目次をクリックして紐付けされた該当の各見出しへジャンプできれば、HTMLで目次の作り方が成功しています。

CSSで目次をデザインする

HTMLで目次を作成したら、CSSで目次のデザインをします。

目次全体を囲んだ親要素のdivのクラス名をCSSでクラスセレクタにして、目次要素内部のaタグやol、li要素のデザインやレイアウトをします。

CSSで目次をデザインするサンプルとして以下のように記述しました。

.l_toc {
    width: 100%;
    max-width: 500px;
    margin: 30px auto;
    font-weight: bold;
}

.l_toc a {
    text-decoration: none;
    color: #fff;
}

.l_toc ol {
    background-color: #464646;
    padding-left: 0;
    list-style: none;
    counter-reset: section;
    padding: 20px;
}

.child_ol li {
    padding-left: 20px;
}

目次全体の幅を500pxの最大幅にして、width: 100%;で目次を伸縮させます。目次の配置は上下30pxのマージンで余白を持たせて左右をautoにして目次全体をページの中央に配置します。

そしてHTMLで作成した見出しにジャンプする目次リストのaタグをCSSで.l_toc a{}のセレクタにして、text-decoration: none;を指定し、リンクの下線を消します。またリンクの文字色もcolorプロパティでデザインしておきます。

次に目次のリスト親要素のolにCSSのlist-style: none;で各目次リスト先頭の番号を非表示にします。番号振りは後ほど非表示にした番号をCSSでデザインし直します。

番号を非表示にした部分には余白ができてしまいます。padding-left: 0;で余白をなくしておきます。

背景色はサンプルでは黒系にしてますが、お好みで指定してください。

.child_ol liのセレクタは、HTMLで目次作成したときの小見出しにジャンプする目次リストのli要素です。20px分のpadding-leftで上の階層の目次との距離を作りました。

ここまでCSSで目次をデザインした表示をブラウザ確認すると上の画像のような目次デザインで作成できます。

CSSで目次に番号を振ったデザインにする

次にCSSのカウンターを使用して目次のそれぞれのリストに番号を振ったデザインを作成します。

HTMLで作成した目次要素の中で目次番号の指定ができる要素はol要素です。

.l_toc ol {
    background-color: #464646;
    padding-left: 0;
    list-style: none;
    counter-reset: section;/*連番リセット*/
    padding: 20px;
}

.l_toc li::before {
    counter-increment: section;
    content: counters(section, ".") " ";
    color: #fff;
}

.l_toc olのセレクタでolで表示される番号はCSSのlist-style: none;で非表示にして目次番号が二重表示しないようにしているので、同じく.l_toc olのセレクタ内にcounter-reset: section;を記述して目次先頭の連番表示される番号の値をリセットしておきます。

そしてHTMLで目次作成したli要素の全ての目次項目を対象に、.l_toc li::beforeの擬似要素で目次の先頭に番号を付与します。

CSSでcounterの使い方を理解できるようにする