[HTML/CSS]ヘッダーを上部に固定して追従させる方法【コピペOK】

セイタ

こんにちは、セイタです。

今回のテーマは、HTML/CSSの学習過程で難しそうで意外と簡単だったヘッダーをページの上部に固定する方法をご紹介します。

複雑に思いがちですが、使い方さえわかればすぐに使い始められるので、Web制作の参考になれば幸いです。

[HTML/CSS]ヘッダーを上部に固定して追従させる方法

それでは、HTML/CSSのを使用してヘッダーをページの上部に固定して、さらにスクロールした際に追従してくるという動作をさせるためのコードを解説します。

ヘッダーを上部に固定するときに使用するCSS

ヘッダーを上部に固定するときに使用するCSSは『position』というプロパティを使用します。

positionプロパティを使用する

ヘッダーを上部に固定する際に使用するCSSである、『position』プロパティはこのように記述します。

header {

  position:値

}

『header』の部分には、ほかにもセレクターを設定することができますが、今回はヘッダーを上部に固定するための方法解説になるため、headerと記述しています。

値は『fixed』を使用する

positionを使用するときの値は複数ありますが、ヘッダーを上部に固定する際には『fixed』の値を使用します。

positionプロパティの値一覧

実際にCSSのを記述する際には、こちらのように記述します。

header {

position:fixed;

}

追加で必要になるCSS

『position:fixed;』を使用する際に上記だけでは固定ができません。

header {

position:fixed;
top:0;
left:0;

}

追加で位置調整をするためのCSSを記述する必要があるので、下記のコードを参考にしてください。

画面の左上と上部からどれだけの感覚を空けて固定するかという記述をしなければいけないので、topとleftを0に設定して左上詰めで固定するという記述をして完成です。

固定するだけだったら以上で終了できるのですが、注意点があるので後述する注意点もあわせてご確認ください。

[HTML/CSS]でヘッダーを上部に固定する際の注意点

ヘッダーを上部に固定する際の注意点をお伝えします。

ヘッダーとbodyの重なりに注意

ヘッダーを上部に固定すると、ヘッダーの下にbody要素が入り込んでしまって重なって表示されてしまう場合があります。

その状態を防ぐために新たにCSSを記述する必要があるので、注意してください。

重なりを防ぐためのCSS

重なりを防ぐためのCSSですが、body要素に対して『margin-top』を追加して上部に余白をあけてバランスを整えます。

header {

  position:fixed;
  top:0;
  left:0;

}

body {

  margin-top: 100px;

}

margin-topの値100pxに関しては、作成しているサイトのレイアウトによって変化するので、ヘッダーの大きさ等に合わせてバランスが取れるように記述してください。

重ならないようにmargin-topが設定できたら、ヘッダーを上部に固定するためのCSS記述は完了です。

上記のコードをコピペしてもらえたら、そのまま使用できるので、ぜひ活用してください。

positionプロパティを使用すればヘッダー固定がらくらく

今回はヘッダーを固定する方法についてお伝えしましたが、同じ要領でフッターを下部に固定することも可能となるはずです。

見積もりページの作成等をする際に、オプションをリアルタイムで表示するために使用することも可能ですよね。

まだ実際にコードを打ち込んで作成していないのですが、理論上可能である事は間違いないはず。

今回の記事を参考にフッターを固定することにも挑戦してみると制作の幅が広がると思うので、ぜひチャレンジしてみてくださいね！

それでは、最後まで読んでいただきありがとうございました。セイタでした。

オススメ記事【Udemy】Webデザインを独学するなら、おすすめは1つだけ【転職済】

オススメ記事プログラミングの本は学習に必要だけど、本だけではキツいというお話【体験談】