固定ヘッダー（追従ヘッダー）のサイトの場合、ページ内リンクをクリックすると遷移先の要素がヘッダーと被ってしまいますよね。
最初から固定ヘッダーになることがわかっていれば考慮しつつ実装できますが、後から言われることもしばしば🥹
ちょっと本題からそれますが、後出しの要件で追加費用をもらうまでもないけどちょっと手間がかかるぞ…！という時に、スムーズに対応できるように実装できていた時、勝手に誇らしい気持ちになります。笑
ということで、今回はそんな時の救世主scroll-margin-topが使えるよ！というお話です。
CSSのみで、固定ヘッダーでページ内リンクの遷移先要素が隠れる問題を解消できる！
固定ヘッダーを使ったサイトでページ内リンクをクリックすると、リンク先の要素がヘッダーに隠れてしまうことがあります。
スタイルをあて直したりJavaScriptでゴニョゴニョすればどうにかなるけど、もうちょっと簡単にどうにかできないの・・・🥲という時に、CSSのプロパティscroll-margin-topが使えます！！！
scroll-margin-topを使うことで、ページ内リンクをクリックした際に遷移先の要素が固定ヘッダーに隠れずに表示されるように調整できます。
具体的には、リンク先の要素の上部に追加のマージンを設定することで、ヘッダーの高さ分だけスクロール位置をずらすことができます。
これにより、ユーザーがリンクをクリックした際にコンテンツがヘッダーに隠れることなく表示され、ウェブサイトの使い勝手が大幅に向上します✨
scroll-margin-topの使い方
scroll-margin-topはCSSプロパティで、リンク先の要素に適用することで、その要素の上部に追加のマージンを設定します。これにより、リンク先にスクロールした際に要素がヘッダーに隠れることなく表示されます。
以下は、scroll-margin-topの基本的な使い方のサンプルコードです。
html{
scroll-margin-top: [ヘッダーの高さ];
}サンプルコードではhtmlに対してscroll-margin-topを適用しているので、全体に適用されます。
- 個別に
scroll-margin-topを設定する必要がなく、全体に一律で適用されるため、コードが簡潔になる - すべてのページ内リンクに対して同じマージンが適用されるため、リンク先要素がヘッダーに隠れることを防ぐ一貫した動作が保証される
などメリットがある一方
- 特定のセクションや要素に異なる
scroll-margin-topを設定したい場合に柔軟性にかける - 例えば、セクションによってヘッダーの高さが異なる場合や、特定の要素だけに異なるマージンを設定したい場合には不便
といったデメリットもあるので、セレクタは状況に応じて付け替えてください。
scroll-margin-topの使用上の注意点
現在、scroll-margin-topは最新の主要なブラウザ（Chrome、Firefox、Safari、Edgeなど）でサポートされていますが、古いブラウザや一部の特殊なブラウザではサポートされていない場合があります。
scroll-margin-topを使用する際には、対応ブラウザを確認してみてください。
詳細なブラウザ対応状況については、MDN Web Docsのscroll-margin-topのページを参照してください。
