【CSS】目次を画面横に固定する【レスポンシブデザイン】

Toshihiko Arai

投稿日: 2020-10-18

はじめに

この記事では、CSSで目次を画面横（サイド）に固定する方法を詳しく解説していく。また、スマホでの表示を切り替えられるように、レスポンシブデザインで対応させた。さらに、jQueryを使ってページのスクロールに合わせ、目次をハイライトさせたのでぜひ参考にしてもらいたい。

目次のHTML

今回、目次に使ったHTMLは次の通り。navタグにtocクラスを指定した。ちなみに「TOC」とは「Table of Contents」の略である。

<nav class="toc">
    <h2>目次</h2>
    <ul>
        <li>
            <a href="#header-1" >目次のHTML</a>
        </li>
        <li>
            <a href="#header-2">基本のCSS</a>
        </li>
        <li>
            <a href="#header-3">レスポンシブルデザイン</a>
        </li>
        <li>
            <a href="#header-4">目次を右に固定</a>
        </li>
    </ul>
</nav>

目次の基本のスタイルシート

目次の基本のCSSがこちら。

.toc {
    background: #f6f6f6;
    clear: both;
    padding:20px 0 20px;    
    overflow: scroll;
}
.toc ul {
    padding:0 20px;
    list-style-type: none;
}
.toc a {
    color:#333 ;
}
.toc a:hover {
    color: #757C84;
}
.toc h2 {
    margin:0;
    padding:10px 0;
}

レスポンシブデザインの説明

今回は、横幅が広いパソコン画面の時のみ右横に目次を固定したい。そのため次のような、レスポンシブデザインで条件分岐する。

@media screen and (min-width: 1423px) and (orientation: landscape)  {
  /* ここに、目次を固定するスタイルを書いていく */
}

目次を画面横に固定するスタイルシート

目次を画面横に固定するスタイルシートがこちら。

@media screen and (min-width: 1423px) and (orientation: landscape)  {
    .toc {
        position: fixed;
        top: 0px;
        left: 1123px;
        width:340px;
        font-size: 0.75em;
        background: inherit;
        padding:0;
        white-space:nowrap;
        overflow: scroll;
        height: 100%;
    }   
    .toc h2 {
        background: inherit;
        text-align: inherit;
        border-bottom: 1px #eee solid;
        padding:10px;
    }
    .toc ul {
        padding:0 10px;
    }
    .toc li {
        padding:0 10px;
    }
}

ポイントは次の2つ。

position: fixed;の指定
left: 1123px;でブラウザの左端を基準に、目次位置を指定

また、目次がたくさんある場合を考えてoverflow: scroll;とheight: 100%;でスクロールできるようにした。

ページのスクロールに追従させて目次をハイライトにする

最後に、ページのスクロール移動に追従して、目次がハイライトされるようにしてので紹介する。

jQueryを使って実現させた。スクロールする度に見出しのh2タグのid属性と、目次のaタグのhref属性を比較してハイライトしている。

jQuery(function () {
  /* TOCハイライト処理 */
  if ($(window).width() >= 1423) {
    $(window).scroll(function () {
      var position = $(this).scrollTop();
      var currentId = "";

      $("h2").each(function (index, element) {
        var y = $(element).offset().top;
        var id = $(element).attr("id");

        if (position > y - 10) {
          currentId = id;
        }
      });

      $(".toc li").each(function (index, element) {
        var href = $(element).children("a").attr("href");

        if ("#" + currentId == href) {
          $(element).css({
            "background-color": "#EFEFEF",
          });
        } else {
          $(element).css({
            "background-color": "inherit",
          });
        }
      });
    });
  }
});