Flexboxを用いたよくあるヘッダーの作り方(IE11対応)

Web制作

 

 

コーディングのサイト制作をやっている時に、以下のようなパターンのヘッダー構成が非常によくあります。

ロゴが左側、ナビメニューが右側に寄っている構成ですね。

今回はこれをFlexboxを用いて簡単に組めるコードをご紹介します。

 

IE11でも問題なく組めるようになっていますので、困っている方はご参考にしてください。

 

ここにタイトル

※2019年4月25日追記

コードをcodepenに公開しました。

ページ下部に貼り付けておくので、合わせてご参照ください。

以下、記事に入ります。

 

前提条件

先ほどもお見せしたように、最終的な目標は以下のようなヘッダー構成です。

条件を文章で書くと、

ここにタイトル

・ロゴが左、メニューが右寄せ

・Flexboxを使用

・固定ヘッダー

では、次からコードを見ていきましょう。

 

Flexboxを用いたヘッダーの作り方

 

まずは、HTMLのコードをご紹介します。

ざっくり言うと、コンテンツ幅を指定するinnerで大きく囲ったあと、Flexboxでロゴとナビメニュー を囲って横並びにする形です。

ulにもFlexboxを用いることで、中のliも横並びにさせています。

 

次に、CSSは以下のようになります。

 

これだけではわかりにくいので、CSSについて一つづつ解説していきます。

 

ヘッダー全体

headerにもdisplay:flexを設定します。

これは横並びのためではなく、中のinner要素を上下中央に持ってくるためです。

親要素にdisplay: flexをかけて、子要素にmargin: autoを指定すると以下画像のように子要素が中央に並びます

(青がinnerで、オレンジがmargin:auto)

 

一つ注意なのですが、IEだけはこれだけじゃ中央に持ってこれません。以下のように上に寄ってしまいます。

 

そこで、align-items: centerをヘッダーに指定します。

これでIE11でも子要素が中央に寄ってくれます。

 

heightはヘッダーの高さ、backgroundとbox-shadowは単なる装飾ですね。

固定ヘッダーの場合、ここでposition: fixedを指定しておきましょう。

 

.inner

ヘッダー内のコンテンツ幅指定です。

先ほど解説したように、margin: autoをかけるとinnerを中央に寄せられるので忘れずに指定しましょう。

 

コンテンツ幅そのものは、制作するサイトによって各自調整してください。

 

.flexbox

ヘッダー内のFlexbox指定です。

・ロゴとナビメニュー全体の横並び

・ナビメニュー1つ1つの横並び

で2回Flexboxを使うので、flexboxというクラスを作っておきいっぺんに指定しています。

 

align-items:centerでコンテンツをinner内の上下中央に寄せています。

また、justify-content: space-betweenでロゴとナビメニューをそれぞれ両端に寄せています。

 

.logo-img img

こちらは、ロゴの位置を調整するために指定しています。

画像だとめちゃめちゃわかりにくいのですが、実はロゴがメニューよりほんの少しだけ上にずれています

vertical-align:bottom;を指定すると、このずれは解消されます。

 

画像じゃわかりにくいので、ぜひ自分で試して見比べてみてください。若干ずれがあります。

 

.nav-global li

ここはメニュー間の余白の確保です。

最後のCONTACTの右側には余白がいらないので、last-childでmargin-rightを0にしています。

(last-child:liのように複数並んだ同じ要素の最後だけを指定する)

 

.nav-global li にmargin: 0 15pxではなく、margin-left: 30px;をかければこの記述は不要になります。

この余白についてはケースバイケースなのですが、今回はlast-childの紹介もかねてこの記述にしています。

 

codepen

ヘッダーが長くてレスポンシブ対応してないので、デモを見る時は縮小するかHTML/CSSを閉じてご覧ください。

See the Pen
header
by タカキ@札幌 (@kutarosan33)
on CodePen.

 

まとめ

ヘッダーの作り方、いかがだったでしょうか?

構成として非常によくあるパターンなので、覚えてストックしておくとコードを書く時間が省略されます。

 

ちなみにレスポンシブした時は、右側のナビメニューをdisplay: noneにしてハンバーガーメニューに切り替える構成が多いですね。

 

作り方は他にも色々あるので、参考例の1つとして覚えていただければ幸いです。