CSS WEB制作

ヘッダーの固定は position:fixed; 隙間対策はtop:0

header

プログラミングを勉強しているみなさん、こんにちは!

ヘッダー(header)の位置を固定したい。
サイトの下の方へスクロールしても、常に最上部にヘッダーは表示させたい。

よく使う手法ですね。

けど、
「CSSはいったいどうすればいいの?」
「あれ、どうやんだっけ?」

初めてトライする方、忘れてしまった方のために、紹介します。
(というか私自身のメモみたな感じですが(笑))

目次
  1. コード
  2. CSSの補足
  3. まとめ

コード

CSSでposition:fixed;をヘッダー要素に設定しましょう。

見栄えを良くすると、コードが増えてわかりにくくなりますので、コードは必要最低限にとどめております。

「Result」の表示の方で、下にスクロールしてみてください。
ヘッダーが固定されているのがわかります。

See the Pen
ヘッダー固定
by t.h (@tomtom15)
on CodePen.

 

 

CSSの補足

top:0;

「top:0;」は、画面の最上部のすきまを埋めるためです。

position:fixed;を設定すると、ヘッダーの上に微妙なすきまが生じてしまうケースがあります

 

「ようし、固定できた!」
と思って、下にスクロールすると・・・

 

ヘッダーの上のすきまから、

「あれ、要素が見えてる!」

と気づくはずです。

 

それを防ぐため、「top:0;」をCSSでヘッダー要素に設定することにより、そのすきまを埋めます。

問題無ければ記述する必要はありませんが、
そうなってしまった方は、この「top:0;」を記述して解決です。

 

 

padding-top:〇〇px;

ヘッダーの下の要素に
「padding-top:100px;」
というのを設定しました。

 

これは何かというと。

ヘッダーにposition:fixed;を設定すると、
ヘッダーの下の要素が、ヘッダーと重なってしまうのです

position:fixed;もfloatと同じで、要素が浮いた状態になります。
ですので、浮いたヘッダーの下に、ヘッダー直下の要素がもぐりこんで、
重なっているよう状態になります。

 

ですので・・・・

 

ヘッダーと重ならいように、padding-top を設定して、下へずらしてあげるのです。
高さはヘッダーの高さと同じにしてくださいね。

 

まとめ

これでposition:fixed;を設定しても慌てることはありませんね。

ヘッダーの上部にすきまができたらtop:0;、
ヘッダーの下の要素がもぐりこんだら、padding-top です。

position:fixed;
top:0;
padding-top:〇〇px

この3つはセットで覚えておくと良いでしょう。

すきま関連の記事も紹介しておきます↓

ノート
画像の下の余白を無くすにはvartical-aline :bottom

続きを見る

-CSS, WEB制作
-,

© 2024 人生フリーハンド Powered by AFFINGER5