Webサイトに固定ヘッダーを採用したとき、誰もが一度はぶつかる壁。それが「ページ内リンクをクリックすると、見出しがヘッダーの下に隠れてしまう」というアンカーリンクのズレ問題です。
私も初めて[amazon_link product=”MacBook Pro”]でWebデザインのコーディングをしていた際、この現象に直面して「なぜ指定した場所に飛ばないのか」と数時間頭を抱えた経験があります。かつてはJavaScriptを駆使して「移動距離からヘッダー分をマイナスする」といった力技が必要でしたが、今はCSSだけで、しかも驚くほどスマートに解決できます。
今回は、現場の制作体験から得た「最も確実でメンテナンスしやすい解決策」をシェアします。
なぜアンカーリンクは「ずれる」のか？
ブラウザの標準機能では、アンカーリンクをクリックすると、リンク先の要素の最上部が画面の最上端にぴったり重なるようにスクロールします。
しかし、画面上部に「固定ヘッダー」があると、その分だけ表示領域が実質的に狭くなっています。ブラウザはヘッダーの存在を考慮せずにスクロールするため、見出しなどのリンク先要素がヘッダーの背後に潜り込んでしまうのです。
この現象は[amazon_link product=”iPad”]やスマートフォンなど、画面が小さいデバイスほど致命的で、ユーザーが「今どこを読んでいるのか」を見失う原因になります。
【解決策1】html要素に1行足すだけ：scroll-padding-top
現在、最も推奨されるモダンな解決策がこれです。
私はこのプロパティを知った時、これまでのJSでの苦労は何だったのかと軽くショックを受けました。
CSS
html {
scroll-padding-top: 80px; /* ヘッダーの高さに合わせて調整 */
}
このコードを[amazon_link product=”Windows 11″]搭載PCのテキストエディタでhtml要素に対して書き込むだけで、ページ内のすべてのアンカーリンクに対し、指定した分の「余白」を考慮してスクロールを止めてくれるようになります。
現場の実感アドバイス
ヘッダーの高さがぴったり80pxだった場合、私はあえて100px程度に設定することをおすすめします。見出しのすぐ上に少し余白がある方が、[amazon_link product=”iPhone 15″]などのRetinaディスプレイで見た際にも窮屈感がなく、視認性が格段に向上するからです。
【解決策2】特定の見出しだけ調整したい：scroll-margin-top
「サイト全体ではなく、特定のセクションだけ位置を調整したい」という場面もよくあります。そんな時は、ターゲットとなる要素そのものにscroll-margin-topを適用します。
CSS
h2 {
scroll-margin-top: 2rem;
}
これはレイアウト上のマージンには影響を与えず、「スクロールが止まる位置」だけをずらしてくれる魔法のようなプロパティです。
現場で遭遇した「落とし穴」と対処法
実装時に私が実際に経験した「あれ？動かない」というトラブルとその解決策をまとめました。
- キャッシュが強烈に残っているCSSを書き換えても[amazon_link product=”Google Chrome”]のキャッシュで古い挙動が続くことがあります。必ずシークレットモードで確認するか、強制再読み込みを試してください。
- JavaScriptとの競合昔ながらの「スムーズスクロール用JS」が導入されているサイトだと、CSSの設定を無視してJSが位置を計算してしまうことがあります。モダンブラウザであれば、JSを削除してCSSの
scroll-behavior: smooth;に乗り換えるのが正解です。 - レスポンシブでの高さ変化PCとスマホでヘッダーの高さが変わる場合、メディアクエリを使って
scroll-padding-topの値も切り替える必要があります。これを忘れると、スマホで見た時に見出しが浮きすぎて不自然な空白ができてしまいます。
まとめ：ユーザーにストレスを与えないスクロール体験を
アンカーリンクのズレは、些細なことのように見えて、ユーザーの読了率に大きく響くポイントです。scroll-padding-topを使えば、[amazon_link product=”Logicool マウス”]のホイールを軽く転がすだけで、ユーザーは常に最適な位置で見出しを目にすることができます。
かつての私のように、複雑なスクリプトを書いて時間を浪費する必要はありません。CSS1行で、今日からストレスフリーなWebサイトを実現しましょう。
「もっとスムーズに動かしたい」という場合は、あわせて scroll-behavior: smooth; も設定してみてくださいね。
次に行うこと:
あなたのサイトのヘッダーの高さを測り、html 要素に scroll-padding-top を追記してみましょう。一瞬で修正が完了するはずです。
コメント