CSSでstickyを使ってスクロールに合わせて固定するUIの作り方を初心者向け解説

1. stickyの基本的な使い方

1. stickyの基本的な使い方

CSSの「position: sticky」は、特定の要素をスクロールに合わせて「ピタッ」と吸い着くように固定できる便利なプロパティです。 プログラミング未経験の方でも、「スクロールしても追いかけてくるメニュー」や「見出しが画面の上端で止まる動き」と言えばイメージしやすいでしょう。

最大の特徴は、要素が本来あるべき場所から外れず、スクロールが指定の位置（例えば画面の最上部など）に達したときだけ固定が開始される点です。 これにより、ユーザーがページを読み進めても、重要な情報を常に視界に入れておくことができます。

実装のポイントは以下の2点です。

• 位置の指定： top: 0; のように、どこで固定するかを必ずセットで記述します。
• 親要素の制約： sticky要素は「親要素の範囲内」だけで動きます。親要素に十分な高さがない場合や、親に overflow: hidden; が設定されていると正しく動作しないので注意しましょう。

<style>
	.parent-box {
		height: 400px;
		background-color: #f0f0f0;
		border: 2px dashed #ccc;
		padding: 10px;
	}
	.my-sticky-item {
		position: sticky;
		top: 0;
		background-color: #0d6efd;
		color: white;
		padding: 15px;
		text-align: center;
		border-radius: 5px;
	}
	.spacer {
		height: 800px;
		padding-top: 20px;
		color: #666;
	}
</style>

<div class="parent-box">
	<div class="my-sticky-item">
		<i class="bi bi-pin-angle-fill"></i> スクロールするとここに固定されます
	</div>
	<div class="spacer">
		<p><i class="bi bi-arrow-down"></i> 下にスクロールしてみてください。</p>
		<p>青いボックスが画面の上にくっついたままになります。</p>
		<p>親要素（グレーの枠）の終わりまで来ると、一緒に流れていきます。</p>
	</div>
</div>

2. sticky要素のHTMLとCSS例

2. sticky要素のHTMLとCSS例

実際に「position: sticky」がどのように動作するのか、シンプルなソースコードで確認してみましょう。 ここでは、スマートフォンのアプリやニュースサイトでよく見かける「スクロールするとタイトルが上端に固定される」UIを作成します。

プログラミングが初めての方でも、まずはこのコードをコピーして動作を試してみてください。 ポイントは、固定したい要素に対して「どこの位置で止めるか（top: 0;）」を指定すること、そして「親要素」の中でしか動かないというルールを理解することです。

<style>
	/* 外側のコンテナ（動く範囲） */
	.scroll-container {
		height: 600px;
		background-color: #fdfdfd;
		border: 1px solid #ddd;
		overflow-y: auto;
		padding: 10px;
	}

	/* 固定されるヘッダー */
	.sticky-header {
		position: sticky;
		top: 0; /* 画面の一番上で止まる設定 */
		background-color: #ffc107;
		padding: 15px;
		font-weight: bold;
		border-bottom: 2px solid #333;
		z-index: 10; /* 他の要素の下に隠れないように設定 */
	}

	/* スクロールさせるためのダミーテキスト */
	.content-area {
		height: 1000px;
		padding: 20px;
		line-height: 2;
		color: #555;
	}
</style>

<div class="scroll-container">
	<div class="sticky-header">
		<i class="bi bi-layout-text-sidebar-reverse"></i> 目次：ここが固定されます
	</div>
	<div class="content-area">
		<p>下にスクロールを続けてください。</p>
		<p>黄色のヘッダーが常に上部に表示され続けるのがわかります。</p>
		<p>これにより、ユーザーはいつでも「今何の項目を読んでいるか」を把握でき、ユーザビリティが向上します。</p>
		<p>親要素（枠線の中）を抜けると、ヘッダーも一緒に上へ流れていきます。</p>
	</div>
</div>

上記のコードでは、z-indexを指定することで、コンテンツ内の画像やテキストがヘッダーの上を通過して隠れてしまわないように調整しています。 特に複数の要素が重なるレイアウトでは、このz-indexの設定が「stickyを使いこなすコツ」になります。

3. stickyを使うメリットと活用例

3. stickyを使うメリットと活用例

stickyを活用すると、ユーザーが長いページをスクロールしても重要な情報を見失いません。例えば、目次、サブナビゲーション、広告バナー、アクションボタンなどで使えます。メリットとしては、以下の点があります。

• スクロールに応じて自然に固定されるのでUIが直感的
• ヘッダーや目次を常に表示できる
• ページ全体のレイアウトに影響を最小限にできる

4. stickyを使うときの注意点

4. stickyを使うときの注意点

stickyは親要素の範囲内でのみ固定されます。親要素の高さが足りないと、思った位置で固定されません。また、overflowがhiddenやautoの場合はstickyが効かないことがあります。これらの条件を満たすことが重要です。

また、z-indexを調整しないと他の要素に隠れてしまう場合があるので注意しましょう。

5. stickyとfixedの違い

5. stickyとfixedの違い

fixedは常に画面を基準に固定されるのに対し、stickyはスクロールに応じて固定されます。stickyは自然なスクロールの流れを保ちながら、ユーザーが必要な情報を見失わないUIを作るのに向いています。

例えると、stickyは「スクロールすると止まる付箋」、fixedは「画面の窓に常に貼ってある付箋」というイメージです。

まとめ

まとめ

stickyの基本をしっかり押さえよう

今回はCSSのpositionプロパティの中でも特に実務でよく使われるstickyについて詳しく解説してきました。stickyはスクロールに応じて要素が固定されるという特徴を持ち、ユーザーにとって見やすく使いやすい画面設計を実現するために非常に重要な技術です。通常のレイアウトの流れに従いながら、特定の位置で止まるという動きは、ナビゲーションや見出し、目次などのUIにおいて大きな役割を果たします。

stickyの仕組みと動作のポイント

stickyは単純に固定するだけではなく、スクロールの途中で動作が変化する点が特徴です。最初は通常の要素として表示され、スクロールして指定した位置に到達すると固定状態に切り替わります。この仕組みを理解することで、ユーザーの視線を自然に誘導するデザインを実現できます。また、topやleftなどの指定が必要であること、親要素の影響を受けることなども重要なポイントです。

stickyを使った実践的なレイアウト例

実際の開発現場では、ブログ記事の目次やサイドバー、固定ナビゲーションなどでstickyが多く活用されています。特に長いページでは、ユーザーがどこを見ているのか分かりにくくなるため、常に重要な情報を表示し続けることが重要になります。stickyを使うことで、ユーザー体験を向上させることができ、離脱率の低下や滞在時間の向上にもつながります。

<style>
    body {
        margin: 0;
    }
    .header {
        position: sticky;
        top: 0;
        background-color: #0d6efd;
        color: #fff;
        padding: 10px;
        font-weight: bold;
    }
    .main {
        height: 1200px;
        padding: 20px;
        background-color: #f8f9fa;
    }
</style>

<div class="header">固定ナビゲーション</div>
<div class="main">
    スクロールしてもヘッダーが上部に固定されます。長いコンテンツでもナビゲーションが見えるため、ユーザーにとって操作しやすくなります。
</div>

よくあるトラブルと対処方法

stickyがうまく動作しない場合の多くは、親要素の設定に原因があります。例えば、親要素にoverflowが設定されているとstickyが効かないことがあります。また、親要素の高さが不足していると、固定される前に要素が消えてしまうこともあります。このような問題を事前に理解しておくことで、スムーズに開発を進めることができます。

stickyとfixedの違いを正しく理解する

stickyとfixedは似ているようで全く異なる挙動をします。fixedは常に画面に固定されるため、スクロールしても位置が変わりません。一方でstickyはスクロールに応じて動きが変わるため、より自然な表示になります。この違いを理解し、適切に使い分けることで、より洗練されたUIを作ることが可能になります。

ユーザー体験を意識したstickyの活用

stickyを使う際には、単に固定するだけではなく、ユーザーの操作性を意識することが重要です。例えば、画面の上部を占有しすぎると逆に見づらくなる場合もあります。そのため、適切な高さや配置を考えながら設計することが大切です。使いどころを見極めることで、視認性と利便性を両立させることができます。

このように、CSSのstickyは初心者でも扱いやすく、なおかつ実務でも頻繁に利用される重要な技術です。今回の内容をしっかり理解しておくことで、今後のWeb制作やフロントエンド開発において大きな武器になります。まずはシンプルな例から試し、少しずつ応用的なレイアウトに挑戦していきましょう。

この記事を読んだ人からの質問

この記事を読んだ人からの質問

プログラミング初心者からのよくある疑問／質問を解決します

CSSのposition: sticky（スティッキー）とは具体的にどのような機能を持つプロパティですか？初心者にもわかりやすく教えてください。

CSSのpositionプロパティの一つである「sticky（スティッキー）」は、日本語で「粘着する」という意味を持ちます。プログラミング初心者がWebサイト制作でよく直面する「スクロールしても特定の要素を画面内に残したい」という要望を叶えるための非常に便利な機能です。具体的には、要素がブラウザの表示領域内で通常通りスクロールの流れに従って動きますが、あらかじめ指定した位置（例えば画面の最上部など）に到達した瞬間に、まるで磁石で吸い付いたようにその場に固定されるという挙動を示します。この「動いている状態から、ある地点で固定される」というハイブリッドな動きがsticky最大の特徴であり、ユーザーが長い記事を読んでいる間も常にメニューを表示させ続けるといった、ユーザーフレンドリーなUI（ユーザーインターフェース）を構築する際に欠かせない技術となっています。