【CSS】目次を画面横に固定する【レスポンシブデザイン】
はじめに
この記事では、CSSで目次を画面横(サイド)に固定する方法を詳しく解説していく。また、スマホでの表示を切り替えられるように、レスポンシブデザインで対応させた。さらに、jQueryを使ってページのスクロールに合わせ、目次をハイライトさせたのでぜひ参考にしてもらいたい。
目次のHTML
今回、目次に使ったHTMLは次の通り。nav
タグにtoc
クラスを指定した。ちなみに「TOC」とは「Table
of Contents」の略である。
>
<nav class="toc">目次</h2>
<h2>
<ul>
<li#header-1" >目次のHTML</a>
<a href=">
</li>
<li#header-2">基本のCSS</a>
<a href=">
</li>
<li#header-3">レスポンシブルデザイン</a>
<a href=">
</li>
<li#header-4">目次を右に固定</a>
<a href=">
</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) {
= id;
currentId
};
})
$(".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",
;
})
};
});
})
}; })