# スティッキーヘッダー＋最下部フッターのCSS実装

> スクロールしても上部に残る半透明ヘッダーと、内容が少なくても最下部に付くフッター。ページ全体骨格の実用テンプレートです。

- カテゴリ: レイアウトパターン
- URL: https://www.css-dictionary.com/recipes/sticky-header-footer/

## HTML

```html
<div class="page">
  <header class="site-header">サイト名（スクロールしても残ります）</header>
  <main class="content">
    <p>本文コンテンツ。</p>
    <p style="height: 300px">（スクロール用の余白）</p>
    <p>本文の末尾。</p>
  </main>
  <footer class="site-footer">© サイト名</footer>
</div>
```

## CSS

```css
.page {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* 内容が少なくてもフッターを最下部へ */
  margin: -16px;     /* デモ用: プレビューのbody余白を打ち消す */
}

.site-header {
  position: sticky;
  top: 0; /* stickyはtop等の指定がないと効かない */
  padding: 12px 16px;
  background: rgb(253 250 243 / 0.8);
  backdrop-filter: blur(8px); /* 透けた背景をぼかして読みやすく */
  border-bottom: 1px solid #e2d8c2;
  font-weight: 600;
}

.content {
  flex: 1 0 auto; /* 余った高さを本文が引き受ける */
  padding: 16px;
}

.site-footer {
  padding: 14px 16px;
  background: #1a1712;
  color: #fdfaf3;
  font-size: 13px;
}
```

## 仕組みの解説

2つの定番を1つの骨格にまとめています。フッター最下部固定は「全体をflex縦積み＋min-height: 100vh＋本文にflex: 1」の組み合わせで、内容が少ないページでもフッターが浮き上がりません。ヘッダーは position: sticky と top: 0 でスクロール追従し、半透明背景に backdrop-filter: blur() を重ねると、透けた本文がぼけてヘッダーの文字が読みやすくなります。

## 実装のポイント

stickyが効かないときは、祖先のoverflow: hiddenが原因のことが多いです。モバイルではmin-height: 100dvhにするとアドレスバーの伸縮に追従します。

## AIに依頼するときの文例

スクロールで上部に残る半透明ヘッダー（position: sticky + backdrop-filter: blur）と、内容が少なくても最下部に付くフッター（flexとmin-height: 100vh）を組み合わせたページ骨格を作ってください。

## 使っているプロパティ

- [position](https://www.css-dictionary.com/property/position.md)
- [display-flex](https://www.css-dictionary.com/property/display-flex.md)
- [flex-direction](https://www.css-dictionary.com/property/flex-direction.md)
- [flex-grow-shrink-basis](https://www.css-dictionary.com/property/flex-grow-shrink-basis.md)
- [backdrop-filter](https://www.css-dictionary.com/property/backdrop-filter.md)