サイト制作

目次から飛ぶと見出しが隠れる、scroll-margin-topで固定ヘッダー分を空ける

慈愛妃きづな

2026-11-06

この記事には広告・アフィリエイトリンクが含まれます。

固定ヘッダーにアンカー先の見出しが隠れるときは、移動先の要素へscroll-margin-topを指定する方法があります。通常の余白とは役割が違い、ヘッダーの高さと画面幅に合わせて確認します。

指定するのは、目次リンクの移動先

目次を押すと見出しが画面の上まで移動し、固定ヘッダーの後ろへ隠れてしまう。そんな場合は、移動先の見出しなどにscroll-margin-topを指定する方法があります。スクロールで表示位置を合わせるときに、要素の上側へ考慮する余白を設けるCSSのプロパティです。

リンクの文字そのものへ設定するのではなく、リンクが指しているidを持つ要素など、移動先に指定する点が大切です。

例えば、固定ヘッダーが64pxで、見出しとの間に16pxの余裕を持たせたいなら、80pxを検討するという考え方です。これは説明用の例で、どのサイトにも80pxが適するわけではありません。

通常のmargin-topのように本文の段落間を広げる目的とは異なります。ページ全体の見た目を崩さないか確認しながら、アンカー移動後の見出しの位置を調整してください。

ヘッダーの高さが画面幅で変わるなら、設定する余白も見直します。PCで隠れなくなっても、スマートフォンではメニューが2段になるなど、条件が変わることがあるためです。

ページ内の目次から押した場合と、URLの末尾に見出しの識別子を付けて直接開いた場合を確かめましょう。独立したスクロール領域の中にある見出しでは、どの要素がスクロールするのかも確認します。実装環境のブラウザーで、目的の見出しが読めることまで確認して完成にしましょう。