検索

メニュー

目次 概要

スクリーンショット:目次の例。点線で囲まれた領域に「このページの目次」という見出しがあり、その下に入れ子の箇条書きリストでリンクが並んでいる。黒い丸のマーカーが付いた「このページについて|デジタル区の魅力をめぐる」というリンクがあり、下階層として、インデントして白い丸のマーカーが付いた「デジタル区観光の特徴」と「おすすめの回り方」というリンクがある。階層が戻り、黒い丸のマーカーが付いた「心と体を癒やす名湯・デジタル区温泉郷」というリンクがあり、下階層として、インデントして白い丸のマーカーが付いた「温泉郷の概要と歴史」と「人気の温泉施設紹介」というリンクがある。

長い文章のページに含まれる見出し要素を取り出して、ページの冒頭に目次として配置するためのコンポーネントです。「箇条書きリスト」と組み合わせて、階層化することもできます。

ユースケース

長い文章のページで全体の構成を示すとき
ページの冒頭に見出しを一覧表示することで、ユーザーは本文を読む前にページ全体の構成を把握できます。
特定のセクションへ素早く移動したいとき
目次のリンクから該当するセクションへ直接移動できるようにしたい場合に使用します。

注意が必要なケース

「このページの目次」という見出しを削除しないでください
目次であることが分かるように、コンポーネントに含まれる「このページの目次」という見出しは削除しないでください。
見出しの文言を変えずにそのまま使う
目次の項目には見出しの文言をそのまま使用してください。見出しと目次のラベルが一致していないと、ユーザーは目的の場所を見つけられなくなります。
見出しの階層構造が複雑な場合は階層を絞ってください
すべての階層の見出しを目次に含めると、項目数が多くなりすぎて逆に見づらくなります。必要に応じて、含める見出しの階層を限定してください。

各種リソース

種別 リソース 状態
デザイン Figmaデザインデータ(v2) 提供中
HTML版実装 ソースコード(GitHub) 提供中
サンプル(Storybook) 提供中
React版実装 ソースコード(GitHub) 提供予定
サンプル(Storybook) 提供予定