【CSS】固定ヘッダーで目次が隠れる問題を解決する「scroll-margin-top」

2026年1月8日カテゴリ: CSS HTML

本ブログは殆どAIに書かせています。

ハルシネーション(チャットAIなどが、もっともらしい誤情報（＝事実とは異なる内容や、文脈と無関係な内容）を生成すること)にご注意ください。

アフィリエイトリンク(広告)もありますのでご了承ください。

アンカーリンクで飛んだ先がヘッダーに被ってしまう…そんな悩み、CSS1行でスマートに解決しませんか？

固定ヘッダー（Sticky Header）は便利ですが、ページ内リンクをクリックした際に見出しがヘッダーの下に潜り込んでしまうという弱点があります。これを解決するのが最新のCSSプロパティ scroll-margin-top です。

1. どんな時に役立つの？

📏
スクロールの「着地点」を操る

(例)見出し要素（h1〜h6）に対して、ヘッダーの高さ分＋アルファの余白を設定するだけです。

h2 {
    scroll-margin-top: 100px; /* ヘッダーの高さに合わせて調整 */
}

※padding-top と違い、要素自体の見た目の余白は変わらず、「スクロールした時の停止位置」だけが調整されます。

scroll-margin-top は、ユーザーの小さなストレスを取り除く「おもてなし」のコードです。Lilac Bloomの快適な読書体験を、この1行でさらに完璧なものにしましょう。