ヘッダーを画面に固定する

01 / 05

スクロールしても消えないヘッダー

長いページを下まで読んでいっても、上の帯だけずっと残っているサイトがあるよね。あれは画面に固定されているんだ。

どこまで読んでもメニューに戻れるので、ページが長いときに便利な作りだよ。

02 / 05

position は前に relative（元の場所からずらす）と absolute（流れから外して親を基準に置く）を使ったね。ここで3つめの fixed が出てくるよ。

fixed は流れから外れるところは absolute と同じ。ちがうのは基準で、親ではなく画面そのものが基準になる。だからスクロールしても動かないんだ。

.header {  position: fixed;}

03 / 05

置く場所の決め方は absolute と同じ。top left right bottom を使うよ。

画面の左上にぴったり置くなら top: 0; と left: 0;。ヘッダーは横いっぱいにしたいので width: 100%; も足す。

.header {  position: fixed;  top: 0;  left: 0;  width: 100%;}

04 / 05

固定した帯は、あとから来る中身に隠されてしまうことがある。どちらが手前かを決めるのは、前に使った z-index だよ。

数が大きいほど手前。ヘッダーはいちばん手前に置きたいので、10 くらいを書いておくと安心だよ。

.header {  z-index: 10;}

05 / 05

固定した帯は流れから外れているので、場所を取らない。だから本文の1行目がヘッダーの下に隠れてしまう。

本文の入れ物に padding-top を足して、ヘッダーの高さぶんだけ下げよう。ここから書いてみよう。

.main {  padding-top: 64px;}