みなさんこんにちは、現役エンジニアのサメハックです
アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！
１分で理解できるHTML/CSS講座シリーズです。
今回は固定ヘッダの作り方について学んでいきましょう！
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！
この記事を読むと・・・
- 1分で固定ヘッダが作れる
１分で理解できるHTML/CSS講座シリーズはじめっ！
固定ヘッダの作り方
まずは完成形から見てみましょう。
See the Pen 固定ヘッダー by samehack (@samehack) on CodePen.
このようにスクロールしても位置が変わらないものを
固定ヘッダといいます。
固定ヘッダを作るポイントは
- ヘッダの高さを指定
- ヘッダのポジションを固定する
- メイン箇所の上部にヘッダと同サイズのマージンを設定
色々と書いていますが、上記に該当するのはこの部分です。
/* ヘッダ */
header {
/* 高さを指定 */
height: 100px;
/* ヘッダを固定する設定 */
position: fixed;
top: 0;
left: 0;
}
.container {
/* ヘッダ分のマージンをあける */
margin-top: 100px;
}定番なヘッダデザインなので、コピペでつかってOKだよ!
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈
