CSS HTML

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

スポンサーリンク

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

 

誠太
こんにちは、誠太です。

 

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

 

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

 

CSSの記述方法が怪しいという人は、こちらのCSSの基礎知識と書き方を学んで初歩をマスターしようで詳しく解説しているので、復習を兼ねて確認しておいてください。

 

スポンサーリンク

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

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

 

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

 

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

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

 

  • positionプロパティを使用する
  • 値は『fixed』を使用する
  • 追加で必要になるCSS

 

positionプロパティを使用する

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

 

header {

  position:値

}

 

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

 

値は『fixed』を使用する

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

 

positionプロパティの値一覧

  • static(初期値)
  • relative
  • absolute
  • fixed

 

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

 

header {

  position:fixed;

}

 

追加で必要になるCSS

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

 

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

 

header {

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

}

 

画面の左上と上部からどれだけの感覚を空けて固定するかという記述をしなければいけないので、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プロパティを使用すればヘッダー固定がらくらく

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

 

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

 

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

 

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

 

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

 

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

 

オススメ記事【Udemyが強い!】Web制作を独学で学べる講座はひとつあれば事足りそう

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

  • この記事を書いた人
  • 最新記事
誠太

誠太

あなたの"困った"を解決するSEITALITYのブログ主。趣味はSEO研究とプログラミング。接客で年間売上1,600万の記録保持者。Web開発会社へ転身することが当面の目標。執筆・お仕事のご依頼はお問い合わせから!

よく読まれている記事

1

  AFFINGER5を購入しようか迷っているけど、損をしない特典が付いているところから購入したい。実用特典ってどんな特典なの?   ご覧いただいてありがとうございます。 &nbs ...

2

スポンサーリンク   アフィリエイトに向いているASPってあるのかな?もし稼ぎやすいASPがあるなら登録したいんだけど、おすすめのASPってある?   こんな悩みに解決しようと思い ...

3

  誠太こんにちは、誠太です!   ブログを運営していると、自分の文章をもっと良くしたいと思ってしまうものではないでしょうか。   しかし、ただブログを書いているだけでは ...

4

  THE THOR(ザ・トール)のレビューが知りたい THE THOR(ザ・トール)の特典で損をしない特典がほしい THE THOR(ザ・トール)で収益化できるのかを知りたい THE TH ...

5

  誠太こんにちは、誠太です。   WordPressのテーマはいまや沢山の種類がリリースされ、個人制作のものや企業がリリースしているものまで溢れかえるようになりました。 &nbs ...

-CSS, HTML
-

Copyright© SEITALITY , 2020 All Rights Reserved.