ヘッダーに関する記事が増えてきたので、まとめ記事を作ってみました。
よく使うCSSや初心者がよくつまづくエラーを一挙に紹介します。
ヘッダーの作成はある程度パターンが決まっておりますので、この記事を見ながらヘッダーを作成していただければ、「ここどうやるんだっけ・・・」をいちいち調べる必要がありません。
省エネでヘッダー作成しましょう。
ロゴとナビゲーションの高さをそろえる
まずはヘッダーメニューのflexです。
ロゴとナビゲーションの高さをそろえるには、align-items: center; です。
詳細はこちらの記事を参考にしてください。
-
【flex】ヘッダーのロゴとナビゲーションの高さを中央でそろえる方法
続きを見る
flexの余白はgapが便利
flexを使って、ヘッダーのナビゲーションメニューを横並びにします。
flexで並べた要素と要素の間隔（余白）はmarginで設定する人、paddingで設定する人、それぞれですが、個人的にはgapがおすすめですね。
純粋に要素間の余白なので、となりの要素の方向以外の余白は気にしなくていいのでとても便利です。
詳細はこちらの記事を参考にしてください。
-
display:flexで並べた要素間の余白設定はgapが便利
続きを見る
ヘッダーのfix後に上部にすきまができたらtop:0
ヘッダーのレイアウトが完成し、ページをスクロールしてもヘッダーを表示できるようにしておこう。
使用するのは position:fixed; です。
ここで注意点です。
fixするとヘッダーの上に細い隙間が出てしまうことがあります。
その場合は、ヘッダーにtop: 0; を設定してあげましょう。
詳細はこちらをどうぞ。
-
ヘッダーの固定は position:fixed; 隙間対策はtop:0
続きを見る
ヘッダーを固定したらメニューが左によってしまった
せっかくロゴとナビゲーションを左端と右端に設置したのに、position:fixed;を設定したら全て左によってしまった・・・。
このエラーで困ったら header に width を設定しているか確認してしましょう。
詳細はこちらの記事をご覧ください。
-
【CSS】ヘッダーを固定したらメニューが左寄せになってしまった！を解決します
続きを見る
ページ内リンクの移動時に スムーズにスクロールさせる方法
これもよく使うテクニックです。
ページ内リンクでスクロール移動させる方法です。
これもCSSで簡単に設定できますのでこの記事を参考にしてください。
-
【CSS】ページ内リンクの移動時に スムーズにスクロールさせる方法
続きを見る
まとめ
いかがでしたでしょうか。
初心者の方はヘッダーでつまづくと、いきなり壁にぶち当たった感がでますよね。
この先大丈夫かなと不安にもなります。
そのためにも、ヘッダーはサクサクといきたいです。
この記事を参考に、ヘッダー作成にあれこれ調べる時間を減らしてスムーズにＷＥＢ制作ができることを願っております。
独学で苦戦している方はプログラミングスクロールも検討してみてはいかがでしょうか。
私が卒業したTechAcademy [テックアカデミー]は、メンターさんがしっかりサポートしてくれるのでおすすめです。
それではまた次記事でお会いしましょう。