Webサイト制作でよくある「固定ヘッダーがある状態でページ内リンク（アンカーリンク）をクリックすると、見出しがヘッダーの下に隠れてしまう」という現象。

以前は、CSSの padding-top と margin-top を相殺させたり、位置調整用のダミー要素をHTMLに仕込んだりと、地味に頭を悩ませるポイントでした。

しかし、現在のモダンなCSSでは、もっとスマートで簡単な解決策が標準となっています。

それが scroll-margin-top プロパティです。

この記事では、基本の使い方から実装例、そしてSEOに効果的な理由まで詳しく解説します。

昔よく使われていた調整方法（おさらい）

これまでは、以下のようなハック的なアプローチが一般的でした。

1. ネガティブマージンを使う方法 ターゲット要素に padding-top と、同値のマイナス margin-top を設定して見かけ上の位置をずらす。

2. ダミー要素を挿入する方法 本来のアンカー位置とは別に、ヘッダーの高さ分だけ上に配置した空の <div> タグを置く。

これらはレイアウトの構造が複雑になったり、HTMLのマークアップが冗長になったりするデメリットがありました。

今の主流：scroll-margin-top なら一行で解決

現在では、スクロール位置のオフセットを指定するための専用プロパティ scroll-margin-top が主要ブラウザで完全サポートされています。

どこに書くの？

このプロパティは、リンク元（「ここをクリック」の <a> タグ側）ではなく、リンク先（ジャンプしたときに表示させたい見出しやセクションのタグ）のCSSに指定するのがポイントです。

実装サンプル

HTML

<!– 固定ヘッダー –>
<header class=”header”>固定ヘッダー</header>

<!– 目次（リンク元） –>
<ul>
<li><a href=”#about”>Aboutについて</a></li>
<li><a href=”#service”>Serviceについて</a></li>
</ul>

<!– リンク先（ここに scroll-margin-top を効かせる） –>
<section id=”about”>
<h2>About</h2>
<p>ここにコンテンツが入ります。</p>
</section>

<section id=”service”>
<h2>Service</h2>
<p>ここにコンテンツが入ります。</p>
</section>

CSS

/* 固定ヘッダー */
.header {
position: fixed;
top: 0;
height: 70px; /* ヘッダーの高さ */
}

/* リンク先の要素に対して指定する */
#about,
#service {
scroll-margin-top: 90px; /* ヘッダーの高さ（70px）＋ 余裕の余白（20px） */
}

これだけで、ページ内リンク経由でジャンプした際、ブラウザが自動的にヘッダーの高さ分を考慮して、ちょうどいい位置でスクロールを止めてくれます。

scroll-margin-top を使うべき3つのメリット

1. HTMLが汚れない 調整用のダミー要素を挿入する必要がなくなるため、マークアップをクリーンに保てます。

2. 通常のレイアウトに影響しない 普段の表示時のマージンやパディングを変更せず、「スクロール位置の判定」だけに作用するため、デザインの意図を正確に再現できます。

3. 保守性が高い デザイン改修などでヘッダーの高さが変わった場合も、CSSの数値を変更するだけで一括対応が可能です。

【重要】SEO（検索エンジン最適化）の観点でも効果的？

結論から言うと、この実装はSEOの観点において「非常に効果的（プラスに働く）」と言えます。理由は大きく3つあります。

• ユーザビリティ（UX）の向上と即座の離脱防止 見出しがヘッダーに隠れてしまうとユーザーは混乱し、すぐにページを閉じ（直帰）してしまいます。スムーズな回遊性を担保し、サイト滞在時間を守ることができます。

• Core Web Vitals（CLS）への配慮 JavaScriptや複雑なCSSハックで無理やり位置を制御すると、表示のズレ（レイアウトシフト）が起きやすくなります。CSSの標準仕様である scroll-margin-top なら、不要な描画のたつきを防ぎ、Googleが重視する指標に対しても健全です。

• モバイルフレンドリー性の強化 スマホなどの狭い画面ではズレ問題が顕著になるため、モバイルでの快適な回遊性を担保することは、そのままSEO上の評価向上につながります。

まとめ

scroll-margin-top は、コーディングの手間を減らし、コードの保守性高め、さらにUXやSEOの観点からもメリットがある非常に優秀なプロパティです。

まだ古い手法を使っている場合は、次の案件からぜひ取り入れて、よりスマートなCSS設計を試してみてください。