CSSスキル - 第6章 Lesson6

スクロール追従ナビゲーションを作成する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

navタグにpositionプロパティを記述し、スクロールしてもついてくるナビゲーションを作成する方法を初心者向けに解説しています。



この動画で学べること

・スクロール追従ナビゲーションを作成する方法



スクロール追従ナビゲーションを作成する方法

スクロールしてもついてくる要素を作成してみましょう。
前回と同じくpositionプロパティを使いますが、fixedという値を使って、ヘッダーがスクロールしてもついてくるようにCSSをかけていきたいと思います。
<header>にposition: fixed;と記述します。
前回、position:relative;と書くと基準となる要素を指定できると学びましたが、今回のposition: fixed;は画面の左上が基準になると決まっています。
なので、位置の指定は top: 0; left:0; にします。



header {
position: fixed;
top: 0;
left:0;
}



保存してブラウザで見てみましょう。
ヘッダーはついてくるようになりましたが、コンテンツの部分がヘッダーの下に潜り込んでしまいました。
これは、ヘッダーをtop: 0;と指定したので、高さが0になったと勘違いしているためです。
これを直すため、コンテンツをくるんでいる<div>id名wrapperにヘッダーの高さのmarginをかけましょう。



div#wrapper {
margin-top: 120px;
}



保存してブラウザで見てみましょう。
ヘッダーとコンテンツが被らなくなりました。