問題
17ナビゲーションバー固定の作り方
スクロール時にメニューが見えなくなり、不便に感じたことはありませんか。
ナビゲーションバー固定を実装すると、ページのどの位置からでもメニューへアクセスしやすくなります。
この問題では、スクロールしても画面上部に残る固定ナビゲーションの作り方を学びましょう。
HTML/CSSの問題に挑戦しよう！
問題
「ナビゲーションバー固定の作り方」
スクロールしても画面上部にナビゲーションバーが固定されるレイアウトを実装しましょう。
指定されたコードをもとに、メニューが常に見える状態を作り、ナビゲーションバー固定の基本構造とCSSでの位置指定を理解します。
あらかじめエディタに書くコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>固定ナビゲーションバー</title>
</head>
<body>
<div class="navbar">ナビゲーションバー</div>
<div class="content">
<p>スクロールしてみてください...</p>
</div>
</body>
</html>
¥HTML¥
期待する画面
解答と解説（ナビゲーションバー固定の作り方）
解説
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
position: stickyは、スクロールに応じて要素を特定の位置に固定するためのCSSプロパティです。
今回のコードでは、ナビゲーションバーにstickyを指定し、さらにtop: 0を設定することで、画面上部に固定される動きを実現しています。
top: 0は「スクロールしたときにどこに張り付くか」を指定する重要な値で、これがないと期待通りの固定動作にならない場合があります。
position: fixedとの違いとして、stickyは親要素の範囲内でのみ固定される点が特徴です。
そのため、ページ構造に自然に組み込めるレイアウトが作りやすくなります。
ナビゲーションバーを固定することで、ユーザーはどの位置からでもメニュー操作が可能になり、サイト全体の操作性が大きく向上します。
特に長いページ構成のWebサイトでは必須レベルのUI設計です。
さらに、スマホ表示でもナビゲーションが常に見えるため、離脱率の改善にもつながる重要な要素です。
また、実務ではヘッダー固定と組み合わせて使われることも多く、UI設計の基礎として非常に重要な技術です。
補足
ナビゲーションバー固定を実現するposition: stickyは、スクロールに連動して要素を固定できる便利なプロパティです。
固定ヘッダーや追従サイドバーなど実務でも頻繁に使われるため、基礎の理解が重要です。
positionプロパティ全体を理解することでレイアウト設計の幅が大きく広がります。
・position関連問題：固定ヘッダーを作成しよう
・メニュー関連問題：ドロップダウンメニューを作ってみよう
・問題集一覧：HTML/CSS問題集トップ
・CSSの基礎から学びたい方：CSS入門講座
ポイント
ナビゲーションバー固定の基本と作り方
ナビゲーションバー固定を実装する際は、スクロール中でもメニューが見やすい状態を保つことが重要です。
position: stickyは通常のレイアウトを維持しながら、指定位置に到達したタイミングで固定表示できます。
さらに背景色やz-indexを設定すると、下の要素と重なっても読みやすいナビゲーションになります。
長いページやLPで特に役立つ実務的なUIです。
