問題
8
HTML/CSS
固定ヘッダーを作成しよう
固定ヘッダーとは、Webサイトなどでスクロールをしても常時で表示されているヘッダーのことです。ヘッダーが常時表示されていることで、UI/UXの向上に繋がります。
HTML/CSSの問題に挑戦しよう！
問題
「固定ヘッダーを作成しよう」
今回の問題は、スクロールしても上部にヘッダーが固定されるというものです。
動画を参照してください。
※スクロールできるようにbodyタグにheightで高さをとりましょう。
例: body {height: 2000px;}
あらかじめエディタに書くコード
<header>ロゴ</header>
¥HTML¥
期待する画面
解答と解説（固定ヘッダーを作成しよう）
解説
LINE登録して解答を見る
※ご登録後トークルーム下部にあるメニュー内
「無料問題集※解答付き」を押すと
解答閲覧用URLが届きます
position: fixed;というプロパティを使うことで位置を固定できます。
横いっぱいに広げるためにwidth: 100%;も忘れないようにしましょう。
補足
要素を固定するにはposition: fixed; を使用しました。
ヘッダー以外にも、バナー広告やCVボタン、SNSリンクなどの常時固定に様々なサイトで用いられています。
今後Web制作を行なう上で必ず使用してくるプロパティなので覚えておきましょう。
また技術的な部分だと、position: fixed;を指定すると要素は浮いた状態になります。
位置を指定する際はtop,right,bottom,leftを使用して設定するようにしましょう。
