HTMLでページ内リンク（アンカーリンク）を設定したとき、ジャンプ先の見出しがヘッダーに隠れてしまうことはありませんか？
特に固定ヘッダーを使っているサイトではよくある悩みです。この記事では、ページ内リンクのズレを防ぐ3つの方法を、初心者にも分かりやすく紹介します。

そもそもページ内リンクとは？

ページ内リンクとは、同じページ内の特定の要素にジャンプできるリンクのことです。<a href="#id名">でリンクし、ジャンプ先には対応するid属性を付けます。

<a href="#section1">セクション1へ</a>

...

<h2 id="section1">セクション1</h2>

リンクをクリックすると、ページ内のid="section1"が付いた要素まで自動でスクロールします。

よくある問題：見出しがヘッダーに隠れる

ページの上部に固定ヘッダー（position: fixed）を使用していると、ジャンプ先の要素がヘッダーに隠れてしまうことがあります。

▼ こんな状態になっていませんか？

• ジャンプしても見出しが表示されない
• スクロール後にいきなり本文が始まる

解決方法1：CSSのscroll-margin-topを使う（見出しごとに設定）

最もよく使われる方法は、ジャンプ先となる見出しにscroll-margin-topを指定する方法です。

h2 {
  scroll-margin-top: 80px; /* 固定ヘッダーの高さに応じて調整 */
}

これにより、スクロールした際に見出しの上に余白ができ、ヘッダーに重ならずに表示されます。

ページ全体のid付き要素すべてに適用したい場合

ジャンプ先がh2以外（例えば<div id="...">など）にも及ぶ場合は、以下のように指定すると便利です。

[id] {
  scroll-margin-top: 80px;
}

解決方法2：ダミー要素を使って調整する

古いブラウザ対応やより細かい調整が必要な場合は、ジャンプ先の直前に見えないダミー要素を挿入する方法があります。

<div id="section1" class="anchor-adjust"></div>
<h2>セクション1</h2>

.anchor-adjust {
  display: block;
  height: 80px;
  margin-top: -80px;
  visibility: hidden;
}

見た目には何も表示されず、見出しの表示位置だけを調整できます。

解決方法3：htmlにscroll-padding-topを指定する（全体に一括適用）

もっと手軽にページ全体のスクロール位置を補正したい場合は、htmlタグに対してscroll-padding-topを指定する方法があります。

html {
  scroll-padding-top: 80px;
  scroll-behavior: smooth;
}

この方法では、すべての<a href="#id">に対して一括でスクロール位置を補正できます。サイト全体に反映されるため、最も手軽かつ強力な方法です。

補足：特定のidパターンにだけ適用したい場合

目次などの自動生成でid="toc-0"などが付与される場合、以下のように属性セレクタで限定的に指定できます。

h2[id^="toc-"] {
  scroll-margin-top: 80px;
}

まとめ

• 個別に設定：scroll-margin-top（方法1）
• 細かく調整：ダミー要素による補正（方法2）
• 全体に一括：html { scroll-padding-top }（方法3・おすすめ）

サイトの構成や使っているテーマによって最適な方法は異なりますが、scroll-padding-topはもっとも手軽でおすすめです。ぜひ試してみてください！