098ra【html.css】flex-boxで左にサイト名、右にメニューのナビゲーションバーの作り方を解説するよ今回はこういうオレンジのナビゲーションバーを作っていきます。左側に社名やロゴ、右側に下層ページへのメニューがある時ですね!よくメニューの横並びだけの記事はあるのですが、実際社名とかのロゴとメニューが一列のサイトが需要あるので、備忘録かね書きました。_)m)htmlを作るまずはhtmlのマークアップです。href="">orange</a></li></ul></div></div></nav>現段階ではこの状態です。2つのかたまりを一列にするところからやります。cssを作る今回は横並びはフレックスボックスで作っていきます。innerクラスに幅を指定、flexクラスにdisplay:flex;、さらに両端に揃えるためのjusfity-content:space-betweenをつけます。space-between;}現時点でこうなりました!ひとまず、2つのブロックが横並びになりました!メニューのリストを横並びにする次にこの部分を横並びにする必要があります。ここの横並びもflex-boxで作ります。liを囲むulにもflexのクラスを付与します。href="">orange</a></li></ul></div>flexのcssはさきほどつけたので割愛です。これでメニューのリストも横並びになりました!これでは高さが細すぎるので少し高さをつけ、文字が上下中心にくるようにします。高さを作り、文字を上下中心にするナビ全体に高さを指定します。今回は50pxにします。文字を上下中心にしたいのでflex-boxで作ります。文字を囲んでいるnavの直下のflexに高さをつけます。}123nav>.flex{height:50px;}この時点で今こんな感じ上下中心の指示をします。align-item:center;です。50pxの上下中心にしてねと指示するので、高さと一緒にします。center;/*追加分*/}これで中心揃えになりました。最後に装飾をしていきます。a{color:white;text-decoration:none;}以上です!【受講料無料あり】2019年最新プログラミングスクールおすすめ4選2019.05.15コードサイト制作ツイートシェアはてブGoogle+Pocketfeedlywebサイトコーダーなら最低限知っておきたいスマホレスポンシブデザインwordpressで子テーマから子テーマ内の画像のパスを作るRECOMMENDこちらの記事も人気です。@098ra0209会社員→小学校の先生→フリーランス国内外を旅しながらホームページ屋をやっている人です。現在は日本各地や東南アジアを転々としながら生活しています。ノマドの働き方や、フリーランスのあれこれについて発信しています。