パソコントラブルから
Web制作まで、
ITの困りごとを解消

概要

ページ内の見出し（h2とh3）を自動で検出し、クリックすると該当箇所にジャンプできる目次リストを生成します。 長い記事や解説ページの冒頭に設置することで、ユーザーが読みたい場所にすぐに移動できるようになり、利便性と可読性が大きく向上します。SEO対策としても有効です。

デモ

使い方

1. HTMLの準備: 目次を表示したい場所に、以下のdivタグを1つだけ設置してください。
2. CSSの追加: 以下のCSSを、サイトのCSSファイルに貼り付けます。デザインはお好みで変更できます。
3. JavaScriptの追加: 以下のJavaScriptコードを、サイトのJSファイルに貼り付けるか、</body>タグの直前に<script>タグで囲って設置します。

コード

1. HTML

コピー
<div id="toc-container"></div>

<!-- デモ用のコンテンツ -->
  <h2>最初の見出し (H2)</h2>
  <p>これは最初のセクションの段落です。</p>
  <h3>サブ見出し (H3)</h3>
  <p>これはサブセクションの段落です。</p>
  <h3>もう一つのサブ見出し (H3)</h3>
  <p>これはもう一つのサブセクションの段落です。</p>

  <h2>二番目の見出し (H2)</h2>
  <p>これは二番目のセクションの段落です。</p>
  <p>段落が続きます。</p>

  <h2>三番目の見出し (H2)</h2>
  <h3>サブ見出し (H3)</h3>
  <p>これは三番目のセクションのサブセクションです。</p>
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

2. CSS

コピー
/* 目次のスタイル */
#toc-container {
  border: 1px solid #eee;
  background: #f9f9f9;
  padding: 15px 20px;
  border-radius: 8px;
}
#toc-container ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
#toc-container > ul > li {
  font-weight: bold;
  margin-top: 10px;
}
#toc-container ul ul {
  padding-left: 20px;
  font-weight: normal;
}
#toc-container a {
  text-decoration: none;
  color: #337ab7;
}
#toc-container a:hover {
  text-decoration: underline;
}
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

3. JavaScript

コピー
document.addEventListener('DOMContentLoaded', function() {
  const contentSelector = 'body'; 
  const tocContainer = document.getElementById('toc-container');
  const contentArea = document.querySelector(contentSelector);

  if (!tocContainer || !contentArea) return;

  const headings = contentArea.querySelectorAll('h2, h3');
  if (headings.length === 0) {
    tocContainer.style.display = 'none';
    return;
  }

  // IDを安全に生成する関数
  const generateUniqueId = (element, index) => {
    if (element.id) {
      return element.id;
    }
    const baseId = element.textContent.trim().replace(/\s+/g, '-').replace(/[^\w-]/g, '');
    return `toc-${baseId || 'heading'}-${index}`;
  };

  const tocList = document.createElement('ul');
  let lastH2ListItem = null;

  headings.forEach((heading, index) => {
    const level = parseInt(heading.tagName.substring(1), 10);
    
    // 見出しにユニークなIDを付与
    const id = generateUniqueId(heading, index);
    heading.id = id;

    const listItem = document.createElement('li');
    const link = document.createElement('a');
    link.href = `#${id}`;
    link.textContent = heading.textContent;
    listItem.appendChild(link);

    if (level === 2) {
      tocList.appendChild(listItem);
      lastH2ListItem = listItem;
    } else if (level === 3 && lastH2ListItem) {
      let sublist = lastH2ListItem.querySelector('ul');
      if (!sublist) {
        sublist = document.createElement('ul');
        lastH2ListItem.appendChild(sublist);
      }
      sublist.appendChild(listItem);
    }
  });

  tocContainer.appendChild(tocList);
});
免責事項: 本コードを利用したことによって生じたいかなる損害についても、当サイトは一切の責任を負いません。自己責任の上でご利用ください。

注意点

• 目次を生成するエリアの指定：Javascriptコード内のconst contentSelector = 'body';を、目次を作成したい記事本と囲む要素のIDやクラス（例：#article-bodyや.post-content）に変更すると、より正確に動作します。

• 見出しが無い場合の挙動：ページ内に見出し（h2やh3）が存在しない場合、目次全体が自動的に非表示になります。

• 既存IDの優先：見出しに既にIDが付与されている場合、そのIDが目次リンクにそのまま使用されます。IDが無い場合は、見出しのテキストから自動的にIDが生成されます。

カスタマイズ方法

• デザインの変更：目次の見た目は、CSSで自由にカスタマイズ可能です。#toc-containerやその内部のul、li、a要素に対して、background、color、padding、border-radiusなどのプロパティを調整し、サイトのデザインに合わせましょう。

• 対象見出しの追加：const headings = contentArea.querySelectorAll('h2, h3');の部分を変更することで、<h4>などの他の見出しレベルも目次に追加できます。

• スムーズスクロールの有効化：スムーズスクロールを実装することで、クリックした際に滑らかに移動するようになり、ユーザー体験が向上します。CSSにhtml (scroll-behavior: smooth;)を追加するだけで簡単に有効化できます。