Webサイトを作っていると、固定されたヘッダー（ナビゲーションバーなど）がページをスクロールした時にセクションのタイトルに被ってしまう…なんて経験、ありませんか？特にアンカーリンク（aタグ）やページ内リンクをクリックした際、この問題がよく発生します。この問題を解決してくれるのが、CSSのscroll-padding-topプロパティ！今日は、この便利なプロパティの使い方と、どうしてこの問題が起きるのか、解説していきます！
なぜヘッダーが重なるのか？
アンカーリンクでセクションに飛んだとき、ブラウザは通常セクションの上端を画面上に揃えます。しかし、固定されたヘッダーがあるとセクションタイトルが隠れてしまいます。そこで、scroll-padding-topを使うことで、ヘッダー分の余白を確保してタイトルが隠れないようにします！
scroll-padding-topで解決
それでは、ナビゲーションメニューのリンクをクリックしたときに、セクションタイトルがヘッダーに隠れないようにする方法を具体的に見ていきましょう。
次の例では、各セクションに個別のscroll-padding-topを指定しています。
<header class="fixed-header">固定ヘッダー</header>
<nav>
<a href="#section1">セクション1</a>
<a href="#section2">セクション2</a>
<a href="#section3">セクション3</a>
</nav>
<section id="section1">
<h2>セクション1</h2>
<p>ここはセクション1の内容です。</p>
</section>
<section id="section2">
<h2>セクション2</h2>
<p>ここはセクション2の内容です。</p>
</section>
<section id="section3">
<h2>セクション3</h2>
<p>ここはセクション3の内容です。</p>
</section>html {
scroll-behavior: smooth;
}
body {
margin: 0;
padding: 0;
}
.fixed-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 60px;
background-color: #333;
color: white;
text-align: center;
line-height: 60px;
z-index: 1000;
}
nav {
margin-top: 60px;
/* ヘッダーの下にナビゲーションを配置 */
}
nav a {
margin-right: 10px;
color: #0073e6;
text-decoration: none;
}
section {
padding: 0 20px;
height: 1000px;
}
#section1 {
background-color: #eee;
}
#section2 {
background-color: #ddd;
}
#section3 {
background-color: #ccc;
}このコードでは、html要素（スクロール元となる親要素）にscroll-padding-top: 60px;を指定しています。これにより、ナビゲーションのリンクをクリックしたとき、固定されたヘッダーがセクションタイトルに被らず、スクロールがスムーズに行われます！
カスタム変数でヘッダーの高さを管理しよう
ヘッダーの高さは変わることがあるので、scroll-padding-topの値も管理しやすくするために、カスタム変数を使うと便利です。
:root {
--header-height: 60px; /* ヘッダーの高さを変数として管理 */
}
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header-height);
}
.fixed-header {
height: var(--header-height);
}こうすることで、将来的にヘッダーの高さを変える場合でも、変数の値を変更するだけで全体が自動的に調整されます。管理が楽になるだけでなく、コードのメンテナンス性も向上します！
さいごに
今回は、各セクションにscroll-padding-topを設定し、ナビゲーションメニューからリンクをクリックした際にヘッダーがセクションに重ならないようにする方法を紹介しました！scroll-padding-topをうまく活用することで、スクロールに関する細かな調整も可能となるため、ぜひ取り入れてみてください！
