---
title: "position:stickyとは？スクロールで追従するヘッダーの基礎"
description: "スクロールしても追従するヘッダーを作りたいが、fixedとどう違うか分からない人向けに、position:stickyの「通常配置と固定の中間」という独特の挙動を解説。効かない原因になる親要素のoverflowにも触れて整理します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/sticky-header-term"
markdown: "https://giga-site.com/articles/sticky-header-term/index.md"
category: "用語解説"
publishedAt: "2026-06-24"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# position:stickyとは？スクロールで追従するヘッダーの基礎

下にスクロールしてもヘッダーが画面上部に貼り付いて見える。あの追従するヘッダーはCSSのposition:stickyで作れます。この記事では、stickyが「途中まで普通、ある位置から固定」という独特のふるまいをする仕組みを、初めての人にもわかるように整理します。

> Source HTML: https://giga-site.com/articles/sticky-header-term
> Article index: https://giga-site.com/articles/index.md

## position:stickyとは何か

position:stickyは、要素を「ふだんは通常どおりに配置し、スクロールでしきい値に達したらその位置に固定する」という動きをさせるCSSの指定です。relativeとfixedの中間のような性質を持ちます。

代表的な使い道が、ページ上部に貼り付くナビゲーションや、表の見出し行をスクロール中も見えるようにする用途です。読み進めても重要な要素が視界から消えない、というメリットがあります。

## 「途中まで通常、以降は固定」の仕組み

stickyを使うときは、固定し始める位置をtop（またはbottomなど）で指定します。たとえばtop:0と書くと、その要素が画面の一番上に達した瞬間からそこに貼り付きます。

それまでは通常のフローの中に普通に存在しているので、スクロールに従って一緒に上がっていきます。しきい値に到達すると、そこで止まって固定表示に切り替わる、というのがstickyの基本的な挙動です。

固定は親要素の範囲内に限られます。親の領域を抜けると、要素は一緒にスクロールアウトしていきます。この親との関係が、後述の「効かない」問題に深く関わります。

## 実務ではどこで関係する？

position:stickyは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

position:stickyについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

- 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
- 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
- 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
- 運用の話: 期限、差し替え、削除、共有メッセージまで決める

## fixedとの違い

似た指定にposition:fixedがありますが、fixedは最初から常に画面の特定位置に固定され続けます。一方stickyは、スクロールがしきい値に届くまでは普通に流れ、そこから固定に切り替わる点が異なります。

「最初は本文の流れの中にあってほしいが、上部に来たら貼り付いてほしい」という自然な追従を求めるなら、stickyが適しています。

## 追従ヘッダーを作る手順

シンプルな追従ヘッダーを作る流れを順番に並べます。まずは1つのヘッダーで試すのがおすすめです。

1. ヘッダー要素を用意し、ページ上部に置く
2. そのヘッダーにposition:stickyを指定する
3. 固定し始める位置としてtop:0を指定する
4. 下に十分な高さのコンテンツを置き、スクロールできる状態にする
5. スクロールして、上部に達したら貼り付くことを確認する
6. 重なり順が気になる場合はz-indexで前面に出す

## 効かないときの確認ポイント

stickyが効かない原因で多いのは、topなどのしきい値を指定し忘れているケースです。位置の基準がないと固定が始まりません。

もうひとつ多いのが、親要素にoverflowの指定があってスクロールの基準がずれている、あるいは親の高さが足りずすぐにスクロールアウトしてしまうケースです。stickyは親の範囲内でしか固定されないため、親子の関係を見直すと解決することがよくあります。

## 追従の見え方を実機で確認する

追従ヘッダーは、スクロール量や画面の高さによって見え方が変わります。特にスマートフォンとパソコンで印象が違うため、実際の端末で確かめるのが確実です。

ギガサイト便を使えば、作りかけのHTMLをドロップして発行されたURLをスマホで開くだけで、手元の実機での追従の様子を確認できます。表示はCDNのエッジ配信で速く、QRコードの配布にも対応しているので、複数の端末でさっと開いて挙動を見比べる用途に便利です。

## よくある質問

### position:stickyとfixedはどう違いますか？

fixedは最初から常に画面の特定位置に固定され続けます。stickyはスクロールがしきい値に達するまでは通常の流れに沿って動き、そこから固定に切り替わります。本文の流れの中から自然に貼り付かせたいときはstickyが適しています。

### stickyが効かないのはなぜですか？

topなどのしきい値を指定し忘れている、または親要素のoverflow指定や高さの都合でスクロールの基準がずれている、といった原因が多いです。stickyは親の範囲内でしか固定されないため、親子関係を見直すと解決することがよくあります。

### 表の見出しを固定するのにも使えますか？

はい。見出し行にstickyとtop:0を指定すると、スクロール中も見出しが上部に残せます。長い表で「今どの列が何だったか」を見失いにくくなる、よく使われる用途のひとつです。

### ヘッダーが他の要素の下に隠れるときは？

重なり順の問題が考えられます。固定したいヘッダーにz-indexを指定して前面に出すと、後続のコンテンツの下に潜り込まずに表示できます。

### 実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

## 関連記事

- [Flexboxとは？要素を横並び・縦並びに整えるCSSの基礎](https://giga-site.com/articles/flexbox-term/index.md)
- [CSSアニメーションとは？keyframesで動かす仕組みの基礎](https://giga-site.com/articles/css-animation-term/index.md)
- [ダークモードとは？暗い配色に切り替える仕組みの基礎](https://giga-site.com/articles/dark-mode-term/index.md)
- [ミニファイ（minify）とは？ファイル圧縮の基礎](https://giga-site.com/articles/what-is-minify/index.md)
- [HTTPヘッダーとは？リクエストとレスポンスの付帯情報](https://giga-site.com/articles/what-is-http-header/index.md)
- [CSS Gridとは？格子状にレイアウトを組む仕組みをやさしく解説](https://giga-site.com/articles/grid-layout-term/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "position:stickyとは？スクロールで追従するヘッダーの基礎",
  "description": "スクロールしても追従するヘッダーを作りたいが、fixedとどう違うか分からない人向けに、position:stickyの「通常配置と固定の中間」という独特の挙動を解説。効かない原因になる親要素のoverflowにも触れて整理します。",
  "datePublished": "2026-06-24",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/sticky-header-term",
  "url": "https://giga-site.com/articles/sticky-header-term",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "用語解説",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "position:stickyとfixedはどう違いますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "fixedは最初から常に画面の特定位置に固定され続けます。stickyはスクロールがしきい値に達するまでは通常の流れに沿って動き、そこから固定に切り替わります。本文の流れの中から自然に貼り付かせたいときはstickyが適しています。"
      }
    },
    {
      "@type": "Question",
      "name": "stickyが効かないのはなぜですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "topなどのしきい値を指定し忘れている、または親要素のoverflow指定や高さの都合でスクロールの基準がずれている、といった原因が多いです。stickyは親の範囲内でしか固定されないため、親子関係を見直すと解決することがよくあります。"
      }
    },
    {
      "@type": "Question",
      "name": "表の見出しを固定するのにも使えますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "はい。見出し行にstickyとtop:0を指定すると、スクロール中も見出しが上部に残せます。長い表で「今どの列が何だったか」を見失いにくくなる、よく使われる用途のひとつです。"
      }
    },
    {
      "@type": "Question",
      "name": "ヘッダーが他の要素の下に隠れるときは？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "重なり順の問題が考えられます。固定したいヘッダーにz-indexを指定して前面に出すと、後続のコンテンツの下に潜り込まずに表示できます。"
      }
    },
    {
      "@type": "Question",
      "name": "実務ではどこで関係する？はHTML共有で必ず理解しておく必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。"
      }
    }
  ]
}
```