目次ジェネレーター
HTMLとMarkdownの目次ジェネレーター | We.Inc
HTMLやMarkdownの記事を貼り付けると、アンカーリンク付きの階層化された目次、見出しに追加したid、追従するサイドバーのCSSが得られます。ブラウザー内で動作します。
目次ジェネレーター
このジェネレーターは記事内の見出しを読み取り、それぞれに一意のidを付け、それらを指すページ内リンクの階層リストを作ります。HTMLかMarkdownを貼り付け、含める見出しレベルを選んで、完成したnavブロック、Markdownのリスト、またはアンカーid追加済みのHTMLをコピーしましょう。
貼り付けるものと得られるもの
- HTML
- <h1>〜<h6>要素
- navのHTML、Markdownのリスト、id追加済みの記事
- Markdown
- #〜######で始まる行
- navのHTML、Markdownのリスト
- 既存のid
- id="..."または{#custom-id}
- そのまま保持
- 重複する見出し
- 同じテキストが2回
- 2つ目のidには-1、次は-2が付きます
長いガイドは、読者がセクションへ移動できると流し読みも共有もしやすくなります。リンクによってページの各部分に独自のアドレスができるので、必要な段落へ相手を直接案内できます。
アンカーidの作り方
- 各見出しのテキストは小文字にされ、句読点が除かれ、スペースはハイフンになります。たとえばChoose a layoutはchoose-a-layoutになります。アクセント付きの文字や、ラテン文字以外の文字（日本語など）は削除されずに残ります。
- idは文書内で一意でなければならず、スペースを含めてはいけません。同じ見出しテキストが2回出てくると、2つ目には-1、3つ目には-2が付くので、どのリンクにも行き先がちょうど1つになります。
- Markdownのプラットフォームは独自に見出しidを作り、そのルールは少しずつ異なります。すでにidを付けてくれる場所でMarkdownを公開する場合は、公開後にリンクを1つ確認しましょう。自分で管理するHTMLなら、idが正確に一致するよう記事の出力を使いましょう。
目次ブロックの配置
- 目次は導入文の上ではなく後に置き、読者がまずページの内容を把握できるようにしましょう。広い画面では、追従するサイドバーにするとスクロール中も手の届く位置に保てます。
- サイトに固定ヘッダーがあると、ページ内リンクで移動した先の見出しがその下に隠れてしまいます。scroll-margin-topプロパティは、ブラウザーが移動先へスクロールするときに上に余白を加えるので、JavaScriptなしでこれを解決できます。
- 記事を貼り付けます。見出しタグがあればHTMLとして検出し、なければMarkdownの見出しを読み取って、フェンスで囲まれたコードブロックは無視します。
- 含める見出しの最も浅いレベルと最も深いレベルを選びます。ほとんどの記事ではH2とH3だけを載せます。
- 箇条書きか番号付きリストを選び、スクリーンリーダーがnavについて読み上げるラベルを設定します。
- 目次ブロックをコピーします。HTMLを入力した場合は、すべてのリンクに行き先があるよう、id付きの記事もコピーしましょう。
- 見出しは短く具体的にしましょう。見出しはリンクテキストにも、アドレスバーのアンカーにもなります。
- レベルを飛ばす（H2の直下にH4を置く）のは避けましょう。ツールはそれでも階層化しますが、スクリーンリーダーの利用者は見出しレベルで移動します。
- 見出しを変えるとidも変わり、共有されたリンクが切れます。他の場所からリンクされているセクションには固定のidを設定しましょう。
- ページのH1は目次に入れないでください。読者はすでにページの一番上にいます。
よくある質問
HTMLでクリックできる目次を作るには？
各見出しにidを付け、ハッシュでリンクします。<a href="#set-a-budget">Set a budget</a>はid="set-a-budget"を持つ要素へ移動します。リンクは中にリストを入れたnav要素で囲みます。このツールはidとリストの両方を書き出します。
ページ内リンクの移動先がヘッダーの裏に隠れるのはなぜですか？
固定ヘッダーや追従ヘッダーがウィンドウの上部を覆っていて、ブラウザーは見出しをその上端までスクロールするからです。見出しにヘッダーの高さより少し大きいscroll-margin-topを追加すると、見出しがヘッダーの下で止まります。
目次を追従させることはできますか？
できます。navをサイドバーのカラムに置き、position: stickyとtopの値を指定します。その位置に達するまでは普通にスクロールし、その後はカラムが画面にある間その場にとどまります。下の例でCSSを紹介しています。
目次はSEOに役立ちますか？
読者がセクションを見つけやすくなり、各セクションにリンク可能なアドレスができます。検索エンジンがセクションへのページ内リンクを表示することもありますが、いつ表示するかは検索エンジンが決めるもので、それを保証する設定はありません。
追従する目次サイドバー
目次が常に表示され、見出しが固定ヘッダーに隠れない2カラムレイアウトです。
追従するnavと見出しのオフセット
フレームが小さいので、中でスクロールしてください。記事が動いても目次のカラムは固定されたままです。
目次を作成
記事をHTMLかMarkdownで貼り付けてください。見出しが読み取られ、一意のアンカーidが付き、レベルごとに階層化されて、HTMLのnav、Markdownのリストになります。HTMLを入力した場合は、足りないidを追加した記事のコピーも作られます。
目次
記事（HTMLまたはMarkdown）
開始レベル
終了レベル
navのラベル
リストの形式
箇条書き
番号付き
{format}として読み取り：見出し{n}件、範囲内{m}件。
{format}として読み取り：見出し{n}件、範囲内{m}件。
その範囲に見出しがありません。レベルを広げるか、見出しが#で始まっているかhタグを使っているか確認してください。
プレビュー
navのHTML
Markdownのリスト
見出しid付きのHTML
コピー
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る