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

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

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

▼ レスポンシブデザインについてはこちらの書籍もご覧ください。

目次のHTML

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

css
<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がこちら。

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;
}

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

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

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

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

目次が画面横に固定された
目次が画面横に固定された

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

css
@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属性を比較してハイライトしている。

js
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",
          });
        }
      });
    });
  }
});

関連記事

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

▼ 記事に関するご質問やお仕事のご相談は以下よりお願いいたします。
お問い合わせフォーム

オススメ!Webデザインの本

デザインの目的は相手に伝えること。美しく装飾することだけがデザインではないのです。そして、デザインはセンスよりも知識が必要です。 ここではWebデザインをつくる上で、実際に役に立ったと思う本をご紹介します。

▼ コードを見ながら手を動かし、作りながら学べる内容になってます。Webデザインの知識からHTMLやCSSの技術的なことまでを、体系的に順序立てて学ぶことができます。実際の制作現場の流れが体験できる本です。「レスポンシブデザイン」「Flexbox」「CSSグリッド」についても学べます。

▼ デザインの本といえばこちら。とても有名な古典的名著です。デザインを良くするための4つの基本原則を徹底解説してます。DTPをはじめ、Webデザインやプレゼン資料づくりにも役立ちます。

SEO関連のオススメ書籍