2019年4月25日Web制作ツイートシェアはてブ送るPocketコーディングのサイト制作をやっている時に、以下のようなパターンのヘッダー構成が非常によくあります。ロゴが左側、ナビメニューが右側に寄っている構成ですね。今回はこれをFlexboxを用いて簡単に組めるコードをご紹介します。IE11でも問題なく組めるようになっていますので、困っている方はご参考にしてください。ここにタイトル※2019年4月25日追記コードをcodepenに公開しました。ページ下部に貼り付けておくので、合わせてご参照ください。以下、記事に入ります。先ほどもお見せしたように、最終的な目標は以下のようなヘッダー構成です。・固定ヘッダーでは、次からコードを見ていきましょう。Flexboxを用いたヘッダーの作り方まずは、HTMLのコードをご紹介します。囲って横並びにする形です。ulにもFlexboxを用いることで、中のliも横並びにさせています。次に、CSSは以下のようになります。none;}これだけではわかりにくいので、CSSについて一つづつ解説していきます。fixed;}headerにもdisplay:flexを設定します。これは横並びのためではなく、中のinner要素を上下中央に持ってくるためです。autoを指定すると以下画像のように子要素が中央に並びます。(青がinnerで、オレンジがmargin:auto)一つ注意なのですが、IEだけはこれだけじゃ中央に持ってこれません。以下のように上に寄ってしまいます。centerをヘッダーに指定します。これでIE11でも子要素が中央に寄ってくれます。heightはヘッダーの高さ、backgroundとbox-shadowは単なる装飾ですね。fixedを指定しておきましょう。1020px;}ヘッダー内のコンテンツ幅指定です。autoをかけるとinnerを中央に寄せられるので忘れずに指定しましょう。コンテンツ幅そのものは、制作するサイトによって各自調整してください。space-between;}ヘッダー内のFlexbox指定です。・ロゴとナビメニュー全体の横並び・ナビメニュー1つ1つの横並びで2回Flexboxを使うので、flexboxというクラスを作っておきいっぺんに指定しています。align-items:centerでコンテンツをinner内の上下中央に寄せています。space-betweenでロゴとナビメニューをそれぞれ両端に寄せています。bottom;}こちらは、ロゴの位置を調整するために指定しています。画像だとめちゃめちゃわかりにくいのですが、実はロゴがメニューよりほんの少しだけ上にずれています。vertical-align:bottom;を指定すると、このずれは解消されます。画像じゃわかりにくいので、ぜひ自分で試して見比べてみてください。0;}ここはメニュー間の余白の確保です。最後のCONTACTの右側には余白がいらないので、last-childでmargin-rightを0にしています。30px;をかければこの記述は不要になります。この余白についてはケースバイケースなのですが、今回はlast-childの紹介もかねてこの記述にしています。codepenヘッダーが長くてレスポンシブ対応してないので、デモを見る時は縮小するかHTML/CSSを閉じてご覧ください。CodePen.まとめヘッダーの作り方、いかがだったでしょうか?構成として非常によくあるパターンなので、覚えてストックしておくとコードを書く時間が省略されます。noneにしてハンバーガーメニューに切り替える構成が多いですね。作り方は他にも色々あるので、参考例の1つとして覚えていただければ幸いです。・ロゴメニューの位置のズレをvertical-align:bottom;で調整しています。コメントをキャンセルメールアドレスが公開されることはありません。東京都内でWebコーダーとして活動中。ブログではプログラミングやガジェット、お役立ちツールなんかを発信していくつもりです。Web制作のご依頼はお問い合わせから承っております。