CSSで目次を画面横に固定する方法【レスポンシブデザインで自動切り替え】



最近いろいろなブログサイトでよく見られるようになった、目次を画面の横に固定するデザイン。
目次まで行ったり来たり移動するのが面倒だったので、このブログでも取り入れてみたいと思った。



このブログはPythonで作った自作静的ジェネレーターで書き出しているので、Wordpressなどのプラグインは使うことができない。
プラグインなしでCSSだけでも簡単に実現できたので、この記事でそのやり方を紹介しておく。






目次のHTML


目次は次のようなHTMLで構成してある。


ナビゲーションタグにtocというクラスを指定してある。
ちなみに、TOC とは Table of Contents の略で、目次という意味になる。





基本のCSS


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


このように、よくあるシンプルなレイアウトになっている。
また、パソコンでもスマホでも同じ表示になっている。







レスポンシブデザイン


さて、ここからが本題。
今回は横幅が広いパソコン画面などの時のみ、右横に目次を固定するレスポンシブデザインを設定する。

そのため基本の目次CSSに付け足す形で、次のようなメディアクエリ内に、目次を右横に固定する処理を書いていくことになる。


min-width のサイズの算出は、目次を右横に固定した場合に、無理なく自然に見ることのできる画面横幅の最小値である。ブログデザインによって異なるので自分のブログにあった値を入れることになる。





目次を右に固定


最後に先ほどのメディアクエリ内に、実際に設定したCSSを紹介する。

ポイントは position: fixed; を指定すること、left: 1123px; で左端を基準に目次位置を指定しているところだ。
自分のブログは左に寄せているのでこのようなCSSの指定となった。
また目次がたくさんある場合に画面に収まらないので、その場合は overflow: scroll;height: 100%; の指定でスクロールできるようにしてある。



これで画面サイズを伸ばしたり縮めたりすると、目次の位置が自動で変わるレスポンシブデザインになった。
あまりに簡単で拍子抜けしたかもしれない。





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


ページのスクロール移動に追従して目次がハイライトされる機能をJavascriptで実装してみたので紹介しておく。
jQueryを使っているので、下のコードを使う前にjQueryのライブラリを読み込んでおこう。
https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js



仕組みは、スクロールする度に見出しのh2タグのid属性と、目次のaタグのhref属性を比較してハイライトにしている。

このプログラムはスクロールする度に要素を検索するので、大量に目次があると処理が重くなるかもしれない。
とはいえ、ブログの目次は多くても30個程度だし、現在のパソコンスペックであれば問題なさそうだ。
スクロールアップの時のハイライトをもう少し洗練させても良いが、とりあえずはこれで実用十分そうだ。

以上で記事の説明を終わる。

Web制作者のためのCSS設計の教科書

モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

KindleAmazon

あなたにおすすめ