問題
17
HTML/CSS
スクロールで固定されるナビゲーションバーを作ろう
position: stickyを使用した固定要素の作成方法を習得しましょう。
HTML/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¥
期待する画面
解答と解説（スクロールで固定されるナビゲーションバーを作ろう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
position: stickyは、スクロールに応じて要素を固定する便利なプロパティです。このコードでは、ナビゲーションバーにposition: stickyとtop: 0を設定することで、スクロールしても画面上部に固定される効果を実現しています。
top: 0は、要素が画面の上部にピタッと固定される位置を指定します。これでユーザーがページをスクロールしてもナビゲーションバーが常に表示されるようになります。
