# ページ内目次（スムーススクロール）のCSS実装

> 記事の目次からページ内リンクで滑らかに移動するナビ。scroll-behaviorとscroll-marginの2プロパティで、JSなしで完成します。

- カテゴリ: ナビゲーション
- URL: https://www.css-dictionary.com/recipes/smooth-anchor-nav/

## HTML

```html
<nav class="toc" aria-label="ページ内目次">
  <a href="#sec-a">概要</a>
  <a href="#sec-b">使い方</a>
  <a href="#sec-c">注意点</a>
</nav>

<section id="sec-a" class="sec">
  <h3>概要</h3>
  <p>目次のリンクを押すと、この見出しへ滑らかにスクロールします。</p>
</section>
<section id="sec-b" class="sec">
  <h3>使い方</h3>
  <p>href="#id" のアンカーリンクだけで動いています。</p>
</section>
<section id="sec-c" class="sec">
  <h3>注意点</h3>
  <p>固定ヘッダーがある場合は scroll-margin で着地位置を調整します。</p>
</section>
```

## CSS

```css
html {
  scroll-behavior: smooth; /* アンカー移動を滑らかに */
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; } /* 動きを減らす設定では即時ジャンプ */
}

.toc {
  position: sticky;
  top: 0;
  display: flex;
  gap: 8px;
  padding: 10px 0;
  background: rgb(253 250 243 / 0.92);
}

.toc a {
  padding: 6px 14px;
  border: 1px solid #cbbfa5;
  border-radius: 999px;
  font-size: 13px;
  color: #5c5445;
  text-decoration: none;
}

.toc a:hover,
.toc a:focus-visible {
  border-color: #b0413e;
  color: #b0413e;
}

.sec {
  min-height: 220px;
  scroll-margin-top: 56px; /* 固定目次に隠れない着地位置 */
}

.sec h3 {
  margin: 0 0 8px;
  padding-top: 16px;
  border-top: 1px solid #e2d8c2;
}

.sec p {
  font-size: 13px;
  color: #5c5445;
}
```

## 仕組みの解説

アンカーリンク（href="#id"）はHTML標準の機能なので、CSSは移動の質だけを整えます。scroll-behavior: smooth で移動が滑らかになり、scroll-margin-top が「固定ヘッダーの下に見出しが潜り込む」定番トラブルを解決します。スムーススクロールは酔いの原因にもなるため、prefers-reduced-motion では必ず即時ジャンプに戻します。

## 実装のポイント

現在位置のハイライトまで必要な場合はJS（IntersectionObserver）の領域です。目次だけならこのレシピで十分です。

## AIに依頼するときの文例

ページ内目次のナビゲーションを作ってください。scroll-behavior: smoothで滑らかに移動し、scroll-margin-topで固定ヘッダー分の着地位置を確保、prefers-reduced-motionでは即時ジャンプに戻してください。JSは使わないでください。

## 使っているプロパティ

- [scroll-behavior](https://www.css-dictionary.com/property/scroll-behavior.md)
- [scroll-margin](https://www.css-dictionary.com/property/scroll-margin.md)
- [position](https://www.css-dictionary.com/property/position.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)