【html.css】flex-boxで左にサイト名、右にメニューのナビゲーションバーの作り方を解説するよ

今回はこういうオレンジのナビゲーションバーを作っていきます。左側に社名やロゴ、右側に下層ページへのメニューがある時ですね!

よくメニューの横並びだけの記事はあるのですが、実際社名とかのロゴとメニューが一列のサイトが需要あるので、備忘録かね書きました。

以下コードです。

 

 

(一応、アスタリスクでreset.cssもどきも入れています、、この辺はご自身の設定したコードに合わせてください、、、あとベンダープレフィックスもm(_ _)m)

 

htmlを作る

まずはhtmlのマークアップです。

 

現段階ではこの状態です。

ひとまず2つのかたまりを一列にするところからやります。

 

cssを作る

今回は横並びはフレックスボックスで作っていきます。

innerクラスに幅を指定、

flexクラスにdisplay:flex;、さらに両端に揃えるためのjusfity-content:space-between

をつけます。

現時点でこうなりました!

ひとまず、2つのブロックが横並びになりました!

 

メニューのリストを横並びにする

次にこの部分を横並びにする必要があります。

ここの横並びもflex-boxで作ります。

liを囲むulにもflexのクラスを付与します。

flexのcssはさきほどつけたので割愛です。

これでメニューのリストも横並びになりました!

これでは高さが細すぎるので少し高さをつけ、文字が上下中心にくるようにします。

高さを作り、文字を上下中心にする

 

ナビ全体に高さを指定します。今回は50pxにします。

文字を上下中心にしたいのでflex-boxで作ります。まずは文字を囲んでいるnavの直下のflexに高さをつけます。

 

この時点で今こんな感じ

 

上下中心の指示をします。align-item:center;です。50pxの上下中心にしてねと指示するので、高さと一緒にします。

 

これで中心揃えになりました。

最後に装飾をしていきます。

 

以上です!