プログラミング備忘録【CSS編③】
今回はヘッダーを固定する方法です。
このnoteのページを下にスクロールしても上部の一部表示が
一緒についてくると思います。
これはHTML作成時のheaderと呼ばれる部分にCSSであることをすると
実現できます。
言葉で説明してもわかりにくいと思うので、まずはコードと
表示画面を貼り付けます。
事前準備
--HTML--
<body>
<header>
<div class="menu">ヘッダー</div>
</header>
<main>
<div class="content">内容
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</main>
</body>--CSS--
.menu {
background-color: skyblue;
height: 70px;
width: 100vw;
text-align: center;
padding: 20px;
}
.content {
text-align: center;
background-color: tan;
height: 1000px;
width: 100vw;
padding: 20px;
margin-top: 20px;
}上記のコードを記述するとこのような見た目になります。
しかしこのままでは「ヘッダー」が固定されていないので
下にスクロールすると画面から消えてしまいます。
そこで次のようなコードをCSSのmenuクラスに追記します。
ヘッダーを固定するためのコード
.menuクラスへ追記
position: fixed;
top: 0;
z-index: 10;これで「ヘッダー」が固定されました。
プロパティの説明
１. position: fixed
MDN抜粋：要素は文書の通常のフローから除外され、ページレイアウト内に要素のための空間が作成されません。
簡単に言うと、トイレットペーパーの押さえつけている金具の部分ですね。
クルクルクルクル回しても動かない！そんなイメージです。
２．top: 0;
こちらはどこに固定しますか？と言う位置です。
今回の場合だと一番上に配置しておきたいのでこのような記述になります。
footerを固定したい場合なら
bottom: 0;で最下部に固定できます。
３．z-index: 10;
Z方向（高さ）を指定するプロパティです。
Excelで図形描画をしているときに最背面に指定とかしませんか？
前面に持ってきたければz-indexの要素を大きくして
背面に持ってきたければ小さくすることで調整できます。
今回の場合であれば、あってもなくてもどっちでもいいんですが
header以下にfloatプロパティを使って、z-indexを指定していると
その要素だけ浮き上がって見えてしまうので
とりあえず10に指定しています。
以上が自分なりのヘッダー固定方法の解説になります。
ここまで読んでいただき、ありがとうございました。
この記事が気に入ったらサポートをしてみませんか？