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

CoddyのHTMLジャーニー「Practical Frontend」セクションの一部 — レッスン 30/35。

スクロールしても、スティッキーヘッダー（またはフッター）はページの上部（または下部）に表示されたままになります。これにより、ユーザーが元の位置までスクロールし直さなくても、ナビゲーションや重要な情報にいつでもアクセスできるようになります。

一般的に、以下の用途で使用されます：

ウェブサイトのナビゲーションバー（固定ヘッダー）
「今すぐ購入」または「お問い合わせ」バー（固定フッター）
主要なアクションを画面上に保持する必要があるモバイルアプリ

position: sticky または position: fixed を使用して、固定（スティッキー）ヘッダーやフッターを作成できます。

例 (スティッキーヘッダー)

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; /* スクロールを発生させるため */
}

チャレンジ

簡単

ヘッダー、フッター、およびメインコンテンツが含まれるHTMLページが与えられています。あなたのタスクは、ヘッダーとフッターをsticky（固定）にして、常に表示されるようにすることです。タスク内容は以下の通りです：

headerをページの上部（top）に固定してください。
footerをページの下部（bottom）に固定してください。
ヘッダーとフッターに背景色（白以外）を設定し、テキストを中央揃えにしてください。

ユーザーがどれだけスクロールしても、ヘッダーとフッターが常に表示されている必要があります。

チートシート

スティッキーヘッダー（またはフッター）は、スクロールしてもページの上部（または下部）に表示されたままになり、ナビゲーションや重要な情報にいつでもアクセスできるようにします。

position: sticky または position: fixed を使用して、スティッキー要素を作成します：

HTML

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

<main>
  <p>Content here...</p>
</main>

CSS

header {
  position: sticky;
  top: 0;
}

footer {
  position: sticky;
  bottom: 0;
}

自分で試してみよう

<!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>