サイドバーに配置した「目次」ウィジェットをハイライト表示させる方法

記事に記載したコードは、スキンに追加されています。

参考：CSSのみで目次ハイライトを実装する方法

CSSのscroll-target-groupによってスクロール位置と連動する要素のグループ化を行い、:target-currentなどの疑似クラスを用いてユーザーが今どこを読んでいるかを判定しています。

ただし、全てのブラウザに対応しているわけではありません（対応状況は以下を参照）。

"scroll-target-group" | Can I use... Support tables for HTML5, CSS3, etc

"Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile w...

実装手順

以下のコードをstyle.cssに追加します。

.sidebar-scroll .toc .toc-list {
  scroll-target-group: auto;

  a:target-current {
    color: #ff0000;
  }
}

さいごに

今回紹介した方法を使えば、目次の現在位置をハイライト表示することができ、読者がどのセクションを読んでいるのかを直感的に把握できるようになります。
scrollとIntersectionObserverの2つの方法を紹介しましたが、それぞれのメリットとデメリットを理解し、サイトのパフォーマンスに応じて最適な方法を選んで実装しましょう。

拡張

本スキンでは、ローディング表示やフロントページの拡張、目次スタイルの調整、プロフィール機能の強化などの多彩なオプション設定を可能にし、サイト全体のデザイン性と使い勝手を向上させることを実現します。