対外的なドキュメントを作る時に最適なフォーマットって何だろうと考えたとき、htmlが一番無難かな、と思っていました。でも、見出しへのリンクを手動でいちいち作るのは面倒。
そこで、「jQuery 開発者向けメモ – 基本・サンプル」を参考に、h1〜h6の見出しを抽出して、ページ内リンクを自動生成するJSをまとめました。（といっても「jQuery 開発者向けメモ – 基本・サンプル」から余分なコードを削除しただけなのですがｗ）
はじめに
- jQueryを使います。
- スタイルはデフォルトのhtmlのままです。デザインを変えたい方は適宜CSSで調整してください。
JavaScript
“`jQuery(function(){
// H1〜H6タグから目次を生成する
var idcount = 1;
var toc = ”;
var currentlevel = 0;
jQuery(":header",this).each(function(){
this.id = "toc_" + idcount;
idcount++;
var level = 0;
if(this.nodeName.toLowerCase() == "h1") {
level = 1;
} else if(this.nodeName.toLowerCase() == "h2") {
level = 2;
} else if(this.nodeName.toLowerCase() == "h3") {
level = 3;
} else if(this.nodeName.toLowerCase() == "h4") {
level = 4;
} else if(this.nodeName.toLowerCase() == "h5") {
level = 5;
} else if(this.nodeName.toLowerCase() == "h6") {
level = 6;
}
while(currentlevel < level) {
toc += "<ol>";
currentlevel++;
}
while(currentlevel > level) {
toc += "<\/ol>";
currentlevel–;
}
toc += ‘<li><a href="#’ + this.id + ‘">’ + $(this).html() + "<\/a><\/li>\n";
jQuery(this).append(‘ <a href="#toc">↑<\/a>’);
});
while(currentlevel > 0) {
toc += "<\/ol>";
currentlevel–;
}
jQuery("#toc").html(toc);
});“`
html
“`<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="tree.js"></script>
<title>無題ドキュメント</title>
</head>
<body>
<div id="toc"></div><!– ここにツリーが生成される –>
<hr />
<h1>見出し1見出し1見出し1見出し1見出し1</h1>
<p>文章文章<strong>文章文章文章</strong>文章文章文章<em>文章文章文章文章</em>文章文章文章文章文章</p>
<h2>見出し2見出し2見出し2見出し2見出し2</h2>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<h3>見出し3見出し3見出し3見出し3見出し3</h3>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<h4>見出し4見出し4見出し4見出し4見出し4</h4>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<h5>見出し5見出し5見出し5見出し5見出し5</h5>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<h6>見出し6見出し6見出し6見出し6見出し6</h6>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<ul>
<li>項目項目項目項目項目項目項目項目</li>
<li>項目項目項目項目項目項目項目項目</li>
<li>項目項目項目項目項目項目項目項目</li>
</ul>
<ol>
<li>数項目数項目数項目数項目数項目数項目</li>
<li>数項目数項目数項目数項目数項目数項目</li>
<li>数項目数項目数項目数項目数項目数項目</li>
</ol>
<blockquote>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
<p>文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章</p>
</blockquote>
<dl>
<dt>定義定義定義定義</dt>
<dd>説明説明説明説明説明説明説明説明</dd>
<dt>定義定義定義定義</dt>
<dd>説明説明説明説明説明説明説明説明</dd>
<dt>定義定義定義定義</dt>
<dd>説明説明説明説明説明説明説明説明</dd>
</dl>
<table>
<caption>キャプション</caption>
<tr>
<th>見出し</th>
<th>見出し</th>
<th>見出し</th>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<p>CO<sub>2</sub></p>
<p>m<sup>3</sup>、cm<sup>2</sup></p>
</body>
</html>
“`
の中で見出しタグのリストが生成されます。
また、各見出しの横には、上矢印（↑）がつき、メニューへ戻ることができます。
ダウンロード
上記ファイルをまとめたデータはこちらからダウンロードすることができます。ご自由にどうぞ。