【CSS】ヘッダーを固定して表示させる方法
Webサイト制作において、cssの「position:fixed」を使用してヘッダーを固定して表示させる方法を記載していきます。
ヘッダーの固定について
ページをスクロールした際に、画面上部に常にヘッダが表示されている状態にすることができます。
ヘッダ内にグローバルメニューを含んでおり、かつ1ページの縦幅が大きいサイトに取り入れられやすい表示方法となります。
利用者がページ内のどの部分を読んでいても、メニューのリンクを押すことができるという利便性があります。
サンプル
記述方法
cssにて、要素の位置を固定させる 「position:fixed」 の記述をヘッダー部分に追加することで、ヘッダーの位置を固定することができます。
しかし、上記の記述によってヘッダーが手前に浮いた状態になり、ヘッダーの下に表示している部分がヘッダーの高さ分だけ上にずれ、ヘッダーに隠れて表示されてしまいます。
これを解消するため、ヘッダーの下に表示させる要素（ほとんどは「main」）に、ヘッダーの高さと同じ長さの「padding-top」を追加し、自然に表示されるよう整えます。
下記、記述例となります。
header {
position: fixed;
height: 80px;
}
main {
padding-top: 80px;
}以上となります。
なお、もっと無料でプログラミングを学びたい方はこちら
がオススメです。