【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;でブラウザの左端を基準に、目次位置を指定
ページのスクロールに追従させて目次をハイライトにする
最後に、ページのスクロール移動に追従して、目次がハイライトされるようにしてので紹介する。
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",
});
}
});
});
}
});