ページ内リンクの見出しが隠れるとき：固定ヘッダーの下に余白を設ける

目次のリンクを押すとページは動くのに、移動先の見出しが見えない。ページ内リンクの見出しが隠れるときは、リンクの間違いだけでなく、画面上部に残る固定ヘッダーとの重なりも調べます。移動できているかと、移動先を読めるかを別々に確認しましょう。

ここでは架空の展示案内を練習用ページとして作ります。常に上部にある高さ64pxのヘッダーと、目次から移動する見出しを用意します。既存サイトのヘッダーの高さを64pxへ統一する提案ではありません。

先にリンク先のidを確かめる

リンクのhrefが#accessなら、移動先には同じ文字のidが必要です。同じページ内でidを重複させず、綴りを合わせます。リンクが反応しない場合と、移動後に隠れる場合を混同しないでください。

ページの上端に固定された要素があると、見出しがその背後へ入ることがあります。少し上へスクロールを戻すと見出しが現れるなら、重なりを調べる手掛かりになります。目的地へ来たのか分からない状態を、そのままにしないようにします。

練習用ページで、重なりを再現する

次のHTMLはbody内へ置く断片です。CSSと組み合わせて試してください。前後に長さを持たせているのは、スクロールする距離を確保するためです。

<header class="site-header">小さな展示室</header>
<main>
  <a href="#access">会場への行き方</a>
  <div class="intro"><p>展示作品の紹介が続きます。</p></div>
  <h2 id="access">会場への行き方</h2>
  <p>入口は建物の東側です。</p>
  <div class="after"><p>館内の案内が続きます。</p></div>
</main>

body { margin: 0; padding-top: 64px; }
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #333;
  box-sizing: border-box;
  z-index: 1;
}
.intro, .after { min-height: 100vh; }

この状態でリンクを押し、見出しの位置を確認します。bodyのpadding-topは、最初の本文が固定ヘッダーの下へ入り込むのを避けるための指定です。それだけで、途中の見出しへ移動する際の間隔まで決まるわけではありません。

移動先へscroll-margin-topを足す

先ほどのCSSの末尾に、次の指定を加えます。

#access { scroll-margin-top: 80px; }

この例の80pxは、ヘッダー64pxと、その下に残したい間隔16pxを合わせた値です。MDNのscrollIntoViewの例にも、固定ヘッダーとの間隔を調整する用途が示されています。scroll-margin-topの説明で指定の意味を確認できます。

通常のmarginで本文全体を押し下げる指定とは役割が異なります。リンクを押したときに確保したい位置として考えてください。ここではJavaScriptでスクロール量を計算せず、CSSを一つ足して変化を比べます。

高さが変わる条件と、ページ末尾を確認する

実際のヘッダーは、狭い画面でメニューが折り返すと高くなる場合があります。画面幅や文字サイズを変え、設定した余白で見出しが隠れないか確かめます。80pxをどのサイトにもそのまま使わず、表示条件に合わせて調整しましょう。

また、ページ末尾の見出しでは、下側にスクロールできる量が足りず、上部の同じ位置まで移動しないことがあります。今回のafterはその違いを切り分けるための練習用の長さです。実際のページへ不要な空白を加える前に、見出しを読める状態かを確認してください。

本文へ移動するスキップリンクの記事で扱うキーボード操作も、別途確認が必要です。見た目の位置を直しただけで、フォーカスの動作まで検証済みにはなりません。

最後に指定の有無を比べ、クリック後に見出しを読めるか記録します。無料レッスンのページへ目次を加えるときも、リンクがつながることと、到着後に読めることの両方を完成条件にしましょう。