記事内目次

記事 ／ パターン集トップ

長い記事の冒頭に置く1段の目次。見出しの id へ飛ばすだけの静的版

プレビュー#

コピーする#

上のプレビューでつまみを動かし、「生成する」で調整を反映したコードを作ってからコピーしてください。下の欄は生成の元になる型で、直接コピーするものではありません。

<!-- href の4本は、本文の h2 に置いた id を指す。
     見出しを増やしたら id を足し、消したらこの行も消す。
     行き先の無い # リンクは、押しても何も起きない -->
<nav class="toc-box" aria-label="目次">
  <h2 class="toc-box__title">目次</h2>
  <ol class="toc-box__list">
    <li><a href="#mame">豆を選ぶ</a></li>
    <li><a href="#hikime">挽き目を合わせる</a></li>
    <li><a href="#yuon">湯温と蒸らし</a></li>
    <li><a href="#hozon">保存のしかた</a></li>
  </ol>
</nav>

.toc-box {
  max-inline-size: 24rem;
  margin-block: var(--space-6);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}
.toc-box__title {
  margin: 0 0 var(--space-3);
  font-size: var(--text-base);
}
.toc-box__list {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: toc;
  font-size: var(--text-sm);
}
.toc-box__list li {
  counter-increment: toc;
}
.toc-box__list li + li {
  border-block-start: 1px solid var(--color-border);
}
/* 13px の行（13 × 1.9 = 24.7px）に上下 12px で、行の高さは 48.7px。
   番号も見出しも同じ1本のリンクなので、行のどこを押しても飛べる */
.toc-box__list a {
  display: flex;
  gap: var(--space-3);
  padding-block: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  line-height: var(--leading-body);
}
.toc-box__list a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.toc-box__list a:hover {
  color: var(--color-accent-text);
  text-decoration: underline;
}

確認する#

• リンク先の id が、本文の h2 に1つずつ実在する（見出しの改名で切れやすい）
• 目次の行の文言が、飛び先の見出しと同じ言葉になっている
• html に scroll-padding-block-start があり、飛び先が上端に隠れない
• 表示の「目次」と nav の aria-label が同じ文言になっている
• 1行の高さが 44px を超える（13px の行に上下 12px で 48.7px）

関連#

• 構造で伝える
• ナビゲーション
• 出発点のCSS