スティッキーヘッダー / フッター

CoddyのHTMLジャーニー「実践的フロントエンド」セクションの一部。レッスン 30/35。

A sticky header（またはフッター）は、scroll するとページの top（または bottom）に表示されたままになります。これにより、ユーザーが戻ってscrollする必要なく、ナビゲーションや重要な情報にいつでもアクセスできます。

これは、次の用途によく使われます：

Webサイトのナビゲーションバー（sticky header）
「今すぐ購入」または「Contact」バー（sticky footer）
重要なアクションを画面上に留める必要があるモバイルアプリ

position: sticky または position: fixed を使用して、sticky な header または footer を作成できます。

例（Sticky Header）

HTML

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

<main>
  <p>Lots of content here...</p>
  <p>Keep scrolling down to see the header stay in place.</p>
</main>

CSS

body {
  margin: 0;
  font-family: Arial, sans-serif;
}

header {
  position: sticky;
  top: 0;
}

main {
  padding: 2rem;
  height: 2000px; /* just to create scroll */
}

チャレンジ

簡単

header、footer、main content を含む HTML ページが与えられています。あなたの課題は、header と footer をstickyにして、常に表示されるようにすることです。あなたの課題：

headerをページのtopに固定します。
footerをページのbottomに固定します。
header と footer に（白以外の）background color を設定し、テキストを中央揃えにします。

ユーザーがどれだけスクロールしても、常に header と footer が見えるようにします。

自分で試してみよう

<!DOCTYPE html>
<html>
<head>
  <title>Sticky Header / Footer</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
      line-height: 1.6;
      background-color: #f4f4f4;
    }

    header {
      z-index: 100;
      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    }

    footer {
      margin-top: auto;
      z-index: 100;
      box-shadow: 0 -2px 6px rgba(0,0,0,0.2);
    }

    main {
      flex: 1;
      padding: 2rem;
      max-width: 800px;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }

    h1, h2 {
      color: #333;
    }

    h2 {
      margin-top: 1.5rem;
    }

    p {
      margin-bottom: 1rem;
    }
  </style>
</head>
<body>

  <header>
    <h1>Secrets of Longevity</h1>
  </header>

  <main>
    <h2>What Are Blue Zones?</h2>
    <p>Blue Zones are regions of the world where people live much longer than average. Researchers identified several key areas, including Okinawa (Japan), Sardinia (Italy), Nicoya (Costa Rica), Ikaria (Greece), and Loma Linda (California, USA).</p>

    <h2>Common Habits of Long-Lived People</h2>
    <p>People in Blue Zones often share similar lifestyle habits that contribute to longevity:</p>
    <ul>
      <li>Plant-based diets rich in vegetables, beans, and whole grains.</li>
      <li>Regular physical activity integrated into daily life, like walking or gardening.</li>
      <li>Strong social connections and family support.</li>
      <li>Stress reduction through meditation, prayer, or relaxation rituals.</li>
      <li>Having a sense of purpose, which motivates daily life.</li>
    </ul>

    <h2>Why Longevity Matters</h2>
    <p>Studying Blue Zones helps us understand how lifestyle, diet, and community can increase lifespan and improve quality of life. Adopting even a few of these habits can lead to a healthier, happier life.</p>

    <p>Remember, longevity isn’t just about living longer — it’s about living well.</p>
  </main>

  <footer>
    <p>&copy; 2025 Longevity Insights</p>
  </footer>

</body>
</html>