目次追加JS

本文中の見出しタグ（h2～h3）を取得し、目次（ul）として追加するJavaScriptファイルです。
手打ちでHTMLを編集しているサイト向けですが、PPPなど一部CMSでも動作確認済みです。デモはこのページ自体で確認できます。

ファイル読み込みとタグひとつの追加で使えます。Javascriptファイルだけなので、たいていのサーバーで動くと思います。
お好きなCSSテンプレートと一緒にご利用ください。

• 10/20動作の変更・ファイル追加
• 10/12公開

内容物

• contents_table.js
• 旧版のJavascriptファイル（二点）
  • contents_table_h1h2.js（最初のh1＋全てのh2を目次にする）
  • contents_table_h2h3.js（最初のh2＋全てのh3を目次にする）
• HTMLファイル（この説明書）

使い方

1. JavaScriptファイルをHTML内で読み込む
2. 目次を追加したい箇所にid="#contents-table"を設定する
3. 本文の内容を追加する

使い方詳細

1. 以下をbodyタグ内の最下部に記載します。
   <script src="（.jsファイルのURL）"></script>
   
2. 目次は<div id="contents-table"></div>のようにします。divやnavなどのブロック要素が望ましいです。それ以外でもたぶん機能はしますが非推奨です。
3. あとは普通に本文の内容を書きます。

仕様

• id="#contents-table"内にulを生成します。目次化する対象はページ内のh2とh3です。
• 目次には各見出しへのページ内リンクを追加します。
  その際、idがあるh2/h3はそのidを使用し、idがない場合は「contents-table-数字」のidを追加します。
• 目次にはそれぞれクラスを追加します。デザイン調整に使ってください。
  元がh2：contents-table-h2
  元がh3：contents-table-h3

旧版について

仕様

• hタグにidがある場合、目次にページ内リンクを追加します。
  id自体は何でもいいです。
• ～_h1h2.js使用時のh1または～_h2h3.js使用時のh2 にidがない場合、ページ最上部へのジャンプを追加します。
• それ以外は、リンクしないただのテキストになります。

注意点

• h1/h2の順序は考慮しません。目次は必ずh1→h2→…またはh2→h3→…の順になります。
  • 例えば、h1がh2より後の行にある場合でも、h1を目次の一番最初に表示します。
  • これらはHTML側の編集箇所を増やせばきちんと対応できるのですが、導入が気軽でなくなるので（導入のためにHTMLをいっぱいいじるのは本末転倒）、対応予定はないです。他の方法は勉強中です。
• HTML/CSSベタ打ちのページでの使用を想定しています。それ以外での動作は未確認です。