Webページで長いコンテンツを書いた場合、あらかじめ目次が用意されます。しかし多くの目次は文頭にあり、途中から選ぶことはできません。また、見出しレベルを細かくすると目次だけで長くなってしまって可読性が落ちてしまいます。 そこで使ってみたいのがjQuery Tocibleです。ヘッダーを使って自動生成し、使いやすい目次を提供します。

jQuery Tocibleの使い方

コンテンツの右側に自動生成された目次が表示されます。

スクロールすると小見出しが表示されます。

さらにスクロール。

実際に使っているところです。ハイライトされる部分がスクロールに合わせて変化しているのが分かります。

jQuery Tocibleは自動生成された目次で、かつフローティング表示なのでコンテンツを読みつつ、いつでも別な見出しに移動できます。長い文章(仕様書などなど)で使うと便利ではないでしょうか。

jQuery TocibleはjQuery/JavaScript製のオープンソース・ソフトウェア(MIT License)です。

jQuery Tocible, A lightweight table of contents navigation plugin | by Mark Serbol markserbol/tocible: A lightweight table of contents navigation menu