ヘッダーを画面上部に固定する方法

このステップの目的

ページをスクロールしても、ヘッダー（ナビゲーションメニュー）が常に画面の上部に表示され続ける「固定ヘッダー」の実装方法を学びます。
これにより、ユーザーはいつでもサイト内の他のページに簡単に移動できるようになり、利便性が大きく向上します。

build実装方法①：position: sticky を使う（モダン・推奨）

position: sticky;は、要素が特定の場所（この場合は画面上部）に到達したら、そこに「貼り付く（stick）」ようにする、比較的新しいプロパティです。非常にシンプルに実装できます。

<!-- HTML -->
<header class="site-header is-sticky">
  ...ヘッダーの中身...
</header>

<!-- CSS -->
.site-header.is-sticky {
  position: -webkit-sticky; /* Safari用の記述 */
  position: sticky;
  top: 0; /* 画面の上端から0pxの位置に固定 */
  width: 100%;
  z-index: 100; /* 他の要素より手前に表示 */
}

ポイント：top: 0;とセットで使います。これが「どこに貼り付くか」を指定しています。

---

build実装方法②：position: fixed を使う（従来の方法）

position: fixed;は、親要素に関係なく、常に画面の特定の位置に要素を固定する方法です。こちらも広く使われますが、一つ大きな注意点があります。

<!-- HTML -->
<header class="site-header is-fixed">
  ...ヘッダーの中身...
</header>
<main class="site-main">
  ...メインコンテンツ...
</main>

<!-- CSS -->
.site-header.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
}
body {
  padding-top: 80px; /* ★ヘッダーの高さ分、ページの開始位置をずらす */
}

ポイント：position: fixed;を指定した要素は、レイヤーが浮いたような状態になり、後続の要素（例: `main`）がその下に潜り込んでしまいます。そのため、bodyにヘッダーの高さ分の`padding-top`を指定して、コンテンツの開始位置を押し下げる必要があります。

---

warning注意点・よくある間違い

position: sticky;が効かない

親要素や、さらにその上の要素にoverflow: hidden;やoverflow: auto;などが指定されていると、stickyは機能しません。親要素のoverflowがvisible（デフォルト値）になっているか確認しましょう。

position: fixed;にしたら、コンテンツがヘッダーの後ろに隠れた

これが最もよくある間違いです。fixedにした要素の高さ分だけ、bodyや後続の要素にpadding-topまたはmargin-topを指定して、場所を確保してあげる必要があります。

他の要素の下にヘッダーが潜ってしまう

固定ヘッダーには、必ずz-indexに大きな値（例: 100や999など）を指定し、常に最前面に表示されるようにしましょう。

---

---