HTMLとCSSで目次を作成していたのですが、目次を使うHTMLページが多くなったときのことを考えて、目次を自動生成してHTMLページに表示したいと考えました。
javascriptやjQueryの書き方を詳しく知らないので、目次を自動生成して表示するにはどうしたら良いのか調べていると、jQueryで目次を自動生成する「tocプラグイン」なるものを発見です。使うまでが簡単なので、さっそく使いました。
「tocプラグイン」を使用しHTMLページに目次を自動生成して表示するまでに行った作業の流れを記事にまとめておきます。
目次を自動生成する要素をHTMLで記述
はじめにHTMLページで目次を表示する場所に、目次が自動生成される親要素をdivタグでマークアップし、div要素にid属性とclass属性を付与します。
<div id="toc" class="l-toc"></div>
- idの属性値はtoc
- class属性は自動生成する目次の要素をCSSでデザインするクラス
目次を自動生成する要素をHTMLで記述するのはこれで完成です。
jQuery.toc.jsに目次を自動で生成してもらう
次に「tocプラグイン」に目次を自動で生成してもらうために「tocプラグイン」のjsファイル「jquery.toc.js」をダウンロードして、サイトのフォルダに設置します。
小粋空間さんのサイトのページにjQueryで目次を自動生成する「tocプラグイン」を公開してくれていますので、上記のリンクでページの「プラグインのダウンロード」の見出し部分までスクロールしてjquery.toc_0.0.2.jsのリンクをクリックします。
リンクをクリックするとjqueryのコードが記述されたページが開きます。キーボードのcommand+sの操作でページをファイルにしてダウンロードします。
ダウンロードするjsファイル名は「jquery.toc_0.0.2.js」のようになっているので「toc.js」にリネームしてダウンロードします。
jquery.toc.jsをリネームしてダウンロードしたtoc.jsファイルはHTMLページで目次を自動で生成してもらうので、目次を自動生成したいサイトのフォルダに設置します。
これでjQuery.toc.jsに目次を自動で生成してもらう準備の完了です。
目次をHTMLページに自動生成して表示
ここでは事前にtocのidを付与してマークアップしておいたdiv要素に目次を表示するために、サイトのフォルダに設置したtoc.jsを読み込み、jqueryで目次をHTMLページに自動生成して表示する作業です。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="toc.js"></script>
<script>
$(function () {
$("body").toc();
});
</script>
- jquery本体
- toc.jsファイル
まず上記の2つを目次を自動生成して表示するHTMLファイルの</body>直前で読み込みます。jquery本体はGoogleライブラリなどから持ってきてコピペで貼り付け、toc.jsファイルはscriptタグにsrc属性でファイルパスを通して読み込みます。
次に$(function ()から始まるコードを記述します。
$(“body”).toc();」については、HTMLページで目次を自動生成する為にhタグの見出しを抽出する範囲です。
デフォルトは見出しを抽出する範囲をbody要素にしているためページ全体のhタグが抽出されます。そのため目次として表示するhタグだけを抽出したい場合は、id属性かclass属性で範囲を指定し直します。
<div class="toc-contents">
<h2>見出し1</h2>
<h3>小見出し1.1</h3>
<h3>小見出し1.2</h3>
<h2>見出し2</h2>
<h3>小見出し2.1</h3>
<h3>小見出し2.2</h3>
<h2>見出し3</h2>
<h3>小見出し3.1</h3>
<h3>小見出し3.2</h3>
</div>
例えば上記hタグのように見出しの集団がHTMLファイルにマークアップしてあり、divでラッピングしているとしたら、divに目次を抽出する範囲のclass属性を指定します。例：class=”toc-contents”
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="toc.js"></script>
<script>
$(function () {
$(".toc-contents").toc();
});
</script>
目次を抽出する範囲として付与したdivのclass名は$(“body”).toc();のbodyをdivのclass名に変更します。
例：$(“.toc-contents”).toc();
変更後にHTMLファイルを保存してHTMLページをブラウザに表示すると、目次が自動生成されて表示しますが、h3レベルの見出しから見出し階層を下げて表示してしまいます。
そこでサイトのHTMLページの見出し階層に合わせた目次を自動生成するためにオプションを記述するか、デフォルト値を書き換えます。
<script>
$(function () {
$(".toc-contents").toc({
startLevel: 'h2',
listType: 'ul',
target: 'toc'
});
});
</script>
オプションを記述する場合は$(“.toc-contents”).toc();のtoc()のカッコ内に記述します。
startLevel
自動生成する目次の見出し要素を設定します。例えば目次を自動生成したい見出しをh2から始める場合には、startLevelはh2を指定します。デフォルトのままだとh3から目次が表示します。
listType
listTypeは自動生成した目次リストをHTMLのulかolを指定し設定します。デフォルトがulなので、olで番号付きリストにするなどの場合に使用できます。ただ番号付きリストはulリストの目次にしても、cssのcounterで実現できるのでお好みですね。
target
targetオプションは目次を表示する要素のid属性値です。HTMLのdivで目次を自動生成する親要素を記述したときにid属性値「toc」を付与しましたが、別のid名にする場合はtargetオプションで、そのid属性値を指定します。
jQuery.fn.toc = function(options) {
var defaults = {
startLevel: 'h3',
listType: 'ul',
target: 'toc'
};
オプションを指定せずにデフォルト値を書き換える場合はtoc.jsのファイル4行目に上記のコード記述部分がありますので、startLevel、listType、targetのデフォルト値からサイトに合わせた目次のHTML構造に変更することができます。
記述後にHTMLファイルを保存してHTMLページに目次が自動生成して表示しているか確認します。
HTMLページで使用しているh2やh3の見出しを抽出して目次が自動生成されて表示することができていれば成功です。
自動生成された目次リストのリンクをクリックすると、それぞれの見出しまで自動スクロールで移動します。
HTMLページに自動生成された目次をCSSでデザイン
あとはHTMLページに自動生成された目次をCSSでデザインしていくだけになります。
それぞれのサイトに合わせた目次デザインをCSSで記述していくので参考程度の目次デザインをしてみました。
.l-toc {
padding: 20px;
width: 100%;
max-width: 500px;
color: powderblue;
background-color: #333;
border: 5px solid #48d9cb;
}
.l-toc a{
color: powderblue;
text-decoration: none;
}
.l-toc ul{
list-style: none;
}
.l-toc ul>li {
margin: 10px 0px;
}
HTMLページで目次を自動生成して表示する親要素divに付与したクラスl-tocをCSSでクラスセレクタにして自動生成する目次のボックスをデザインしています。
各見出しにジャンプする自動生成した目次のテキストをデザインしたい場合は、目次の親要素のクラスとaタグを結合したセレクタにしてデザインします。
目次リストのそれぞれの項目は見やすくするために少し余白が欲しいのでCSSの子結合子でまとめて余白を出しています。
以上がHTMLページの目次を自動生成して表示する説明ですが、サイトに新しいHTMLページを追加するときに目次が必要な場合、id=”toc”とclass=”l-toc”付きのdiv要素と、jquery本体、toc.jsを読み込むだけで目次が自動生成されるので、目次を使うHTMLページが多くなっても簡単に実装できるようになります。
