【CSS】スクロールでヘッダーが重なる問題を解決!scroll-padding-topで快適なページ移動を実現しよう!」

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をうまく活用することで、スクロールに関する細かな調整も可能となるため、ぜひ取り入れてみてください!

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次