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

この記事では、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",
          });
        }
      });
    });
  }
});

Webデザインのオススメ書籍

1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)
1冊ですべて身につくHTML & CSSとWebデザイン入門講座 (DL特典: CSS Flexbox チートシート)

Web界隈やデザイナーに大人気! Web関連の情報やデザインについて学べる『Webクリエイターボックス』の中の人、Manaによる渾身のHTML&CSSとWebデザインが学べる本。 Webサイト制作に必要な知識がすべて身につく! 今のWebサイトの作り方が一気に学べる!

KindleAmazon
CSS設計完全ガイド ~詳細解説+実践的モジュール集
CSS設計完全ガイド ~詳細解説+実践的モジュール集

CSS設計の考え方をウェブ開発に取り入れる案件が、プロジェクトの大小を問わず増えています。本書は、CSSのさまざまな設計手法を紹介しつつ、基礎から実践のポイントまで解説します。ボタン、ラベル、カード、テーブルといったモジュールごとの、実践的なコードを多数掲載。

KindleAmazon
スラスラわかるHTML&CSSのきほん
スラスラわかるHTML&CSSのきほん

4万人が学んだベストセラーが、5年ぶりの大改訂! 小さなサイト作りを通してHTMLとCSSの基礎が学べる入門書の決定版! 第2版ではPCだけでなくスマホやタブレットにも対応したサイトが完成します。 ソースコードは現在のトレンドに合わせ、解説もいっそう丁寧にわかりやすくなりました。 これからWeb制作を始める人にも、HTML/CSSを学び直したい人にもおすすめの、充実の内容です!

KindleAmazon

最後まで読んでいただきありがとうございました。

「この記事が参考になったよ」という方は、ぜひ記事をシェアをしていただけるととても嬉しいです。

今後も有益な記事を書くモチベーションにつながりますので、どうかよろしくお願いいたします。↓↓↓↓↓↓↓

あなたにおすすめ