CSSでstickyを使ってスクロールに合わせて固定するUIの作り方を初心者向け解説
生徒
「先生、スクロールするときに、あるヘッダーだけ画面の上にくっついて固定されるようにしたいです。どうすればいいですか？」
先生
「それならCSSのpositionプロパティでstickyを使うと便利です。stickyは、要素が通常は流れに沿って動きますが、指定した位置までスクロールすると固定される特徴があります。」
生徒
「fixedとabsoluteとどう違うんですか？」
先生
「absoluteは親要素を基準に位置を決め、fixedは画面を基準に位置を固定します。一方、stickyはスクロールに応じて動いたり止まったりするので、ナビゲーションバーや目次で使うとユーザーに優しいUIになります。」
1. stickyの基本的な使い方
CSSでposition: stickyを設定すると、要素は通常通りページの中で流れに沿って配置されますが、スクロールして指定したtopやleftの位置に達すると、その位置で固定されます。これにより、ユーザーがスクロールしても重要なナビゲーションや見出しを常に表示できます。
stickyを使うには、必ず親要素に高さが必要で、overflowがhiddenやautoになっていないことがポイントです。
2. sticky要素のHTMLとCSS例
以下の例では、目次のヘッダーをstickyでスクロールに合わせて固定しています。ユーザーがページをスクロールすると、ヘッダーは指定したtop位置で止まります。
<style>
.sticky-header {
position: sticky;
top: 0;
background-color: #ffc107;
padding: 10px;
font-weight: bold;
border-bottom: 2px solid #333;
z-index: 10;
}
.content {
height: 1500px;
background-color: #f8f9fa;
padding: 20px;
}
</style>
<div class="sticky-header">目次ヘッダー</div>
<div class="content">
ここに長い記事の内容が入ります。スクロールしてみると、ヘッダーが画面上部で止まります。
</div>
3. stickyを使うメリットと活用例
stickyを活用すると、ユーザーが長いページをスクロールしても重要な情報を見失いません。例えば、目次、サブナビゲーション、広告バナー、アクションボタンなどで使えます。メリットとしては、以下の点があります。
- スクロールに応じて自然に固定されるのでUIが直感的
- ヘッダーや目次を常に表示できる
- ページ全体のレイアウトに影響を最小限にできる
4. stickyを使うときの注意点
stickyは親要素の範囲内でのみ固定されます。親要素の高さが足りないと、思った位置で固定されません。また、overflowがhiddenやautoの場合はstickyが効かないことがあります。これらの条件を満たすことが重要です。
また、z-indexを調整しないと他の要素に隠れてしまう場合があるので注意しましょう。
5. stickyとfixedの違い
fixedは常に画面を基準に固定されるのに対し、stickyはスクロールに応じて固定されます。stickyは自然なスクロールの流れを保ちながら、ユーザーが必要な情報を見失わないUIを作るのに向いています。
例えると、stickyは「スクロールすると止まる付箋」、fixedは「画面の窓に常に貼ってある付箋」というイメージです。
【60分集中】Flexboxを完全攻略！最新CSS3で「崩れない・迷わない」モダンUI構築セミナー
「魅せる力」をコードで実現。CSS3でモダンWebデザインのプロトタイピングを。
本講座では、単に色を変えるだけではなく、「ユーザーを迷わせないUIデザイン」と「崩れないレイアウト設計」の本質を学びます。最新のCSS3とモダンなレイアウト手法を通じて、プロの現場で通用する「美しさと機能性を両立した実装力」を最短距離で習得します。
具体的なワークショップ内容と環境
【つくるもの】
HTMLで作成した骨組みに対し、商用サイトでも採用される「スタイリッシュなカード型UI」や「レスポンシブなナビゲーション」を構築します。色の選定基準や余白（ホワイトスペース）の黄金比など、デザインの理論をコードに落とし込む工程を体験してください。
【開発環境】
フロントエンド開発の標準であるVisual Studio Code (VS Code)を継続使用。CSSの記述を効率化するプラグインや、ブラウザのデベロッパーツール（検証機能）を駆使して、リアルタイムでデザインを微調整するプロのワークフローを再現します。
この60分で得られる3つの技術資産
要素の横並びや中央揃えを自由自在に操り、どんなデバイスでも崩れないレスポンシブな配置術を完全理解します。
後から修正しやすい「壊れにくいコード」の書き方を伝授。プロの現場で必須となる命名規則の考え方を学びます。
画像の最適化や軽量な装飾技法など、ページの表示速度を落とさずに高級感のある演出を行うテクニックを習得します。
※本講座は、HTMLの基礎を終えた後のステップアップ講座です。Webデザイナー、UIデザイナー、フロントエンドエンジニアへの道を切り開く「魅せる技術」を、モクモク独自のパーソナル指導で着実に定着させます。
リラックスしながら、学ぶことが大切です。しっかりと基礎を理解しましょう！
各回少人数・マンツーマン形式で徹底サポート
このセミナーの詳細・お申し込みはこちら
