プログラミング

[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制作を独学で学べる講座はひとつあれば事足りそう

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

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

誠太

接客業で年間1600万円の売上を達成した経験を活かして、リアル接客とWebマーケティングを融合。『事実と根拠を明確に、誠実な情報発信』をモットーにブログを更新しています。

-プログラミング
-

Copyright© SEITALITY , 2019 All Rights Reserved.