HTML  ·  2018/04/30

HTMLとCSSによる目次の実装

（著）山たー

目次が無くて見づらいと思ったので目次を実装しました。とは言え、ソースコードのほとんどは

SIMPLE TABLE OF CONTENTS (TOC) USING PURE HTML AND CSS CODE

を参考にしたので、やったことと言えば少しレイアウトをいじっただけです。なので、自分用のメモとして書いているだけと思ってください。

 

CSSのコード 

#toc_container {
    background: #f9f9f9 none repeat scroll 0 0;
    border: 1px solid #aaa;
    display: table;
    font-size: 95%;
    margin-bottom: 1em;
    margin-left: 1em;
    padding: 10px;
    width: auto;
}

.toc_title {
    font-weight: 700;
    text-align: center;
}

#toc_container li, #toc_container ul, #toc_container ul li{
    list-style-position: outside;
    margin-left: 1em;
    margin-right: 1em;
    padding-left: 0;
    /* リストの記号を付けない場合は   
     list-style: outside none none !important;
    */
}

HTMLのコード 

<div id="toc_container">
    <p class="toc_title">
        目次
    </p>

    <ul class="toc_list">
        <li>
            <a href="#section1">項目1</a>
            <ul>
                <li>
                    <a href="#subsection1">サブ項目1</a>
                </li>
            </ul>
            <ul>
                <li>
                    <a href="#subsection2">サブ項目2</a>
                </li>
            </ul>
        </li>

        <li>
            <a href="#section2">項目2</a>
        </li>

        <li>
            <a href="#section3">項目3</a>
        </li>
        <li>
            <a href="#section4">項目4</a>
        </li>
    </ul>
</div>

表示例

見出しの設定

見出しに次のようにidを設定すれば、目次から見出しへジャンプすることができます。 

<h2 id="section1">項目1</h2>
<h3 id="subsection1">サブ項目1</h3>