ページ内リンクで特定の要素にジャンプした際、「ターゲットの内容が画面の一番上にギリギリ表示されてしまう」あるいは「固定ヘッダーに隠れてしまって見えない」といった経験はありませんか？
この問題は、ページ内遷移時にターゲットの位置がブラウザの最上部にピタッと配置されるために発生します。特にヘッダーを position: fixed で固定しているサイトでは、ターゲットの内容がヘッダーの裏に隠れてしまい、ユーザビリティが低下してしまいます。
jQueryやJavaScriptを使ってスクロール位置を調整する対応もできますが、実はCSSだけでも簡単に解決できる方法があるのでご紹介したいと思います。
解決方法：scroll-padding-top を使用するだけ
以下のCSSを html 要素に指定するだけで、ページ内リンクの遷移先がヘッダーに隠れず、さらにスクロール時のスナップ効果も得られます。
html {
scroll-padding-top: 80px; /* 固定ヘッダーの高さに合わせて調整 */
scroll-snap-type: y proximity; /* 垂直方向に自然なスナップ */
scroll-behavior: smooth; /* スムーズスクロール（任意） */
}ポイント解説
scroll-padding-top
アンカーリンクでジャンプしたとき、ターゲット要素がこの余白分だけ下にずれて表示されるため、ヘッダーと重なりません。
scroll-snap-type: y proximity
垂直方向のスクロール時に要素が“ピタッ”と止まりやすくなり、自然なスクロール体験を実現します。proximity を使うことで、ユーザーの操作を妨げにくいスナップ動作になります。
scroll-behavior: smooth（任意）
ページ内リンクやスナップ時の動きを滑らかにします。見た目も快適です。
応用：スナップ対象の要素に scroll-snap-alignを指定
scroll-snap-type を有効にするだけではスナップ効果は十分に機能しません。
スナップ対象の要素にも以下のような指定を追加するのがベストです。
section {
scroll-snap-align: start;
}これにより、各セクションの上端がスナップ対象となり、スクロール操作がより直感的になります。
まとめ
固定ヘッダーによってページ内リンクの表示が崩れる問題は、CSSだけで以下のようにスマートに解決できます。
scroll-padding-topでターゲットの表示位置を調整scroll-snap-type+scroll-snap-alignでスクロール体験を向上- JavaScript不要で、保守性・パフォーマンスも◎
ユーザーに優しく、開発者にも手間が少ないため、ページ内遷移を実装する際はぜひ使用してみてください！
