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

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

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

以下コードです。

 <nav>
    <div class="inner flex">
      <div class="logo">
        <a>FRUITS!</a>
      </div>
      <div class="menu">
        <ul class="flex">
          <li><a href="">apple</a></li>
          <li><a href="">grape</a></li>
          <li><a href="">orange</a></li>
        </ul>
      </div>
    </div>
  </nav>

 

*{
 border: 0;
 margin: 0;
 padding: 0;
}


nav{
 background-color:#FFBD4C;
 height:50px;
}

.inner{
 max-width:100%;
 margin:0 auto;
 width:980px;
}
nav>.flex{
  align-items: center;
  height:50px; 
}
.flex {
  display: flex;
  justify-content: space-between;
}

.flex li{
  margin-left:30px;
  list-style:none;
}
.logo a{
 color:white;
 font-size:20px;
 font-weight:bold;
} 
li a{
  color:white;
  text-decoration:none;
}

 

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

 

htmlを作る

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

 <navr>
    <div class="inner flex">
      <div class="logo">
       <a>FRUITS!</a>
      </div>
      <div class="menu">
        <ul>
          <li><a href="">apple</a></li>
          <li><a href="">grape</a></li>
          <li><a href="">orange</a></li>
        </ul>
      </div>
    </div>
  </nav>

 

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

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

 

cssを作る

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

innerクラスに幅を指定、

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

をつけます。

*{
  margin: 0;
  padding: 0;
  border: 0;
}

nav{
background-color:#FFBD4C;
}

.inner{
width:980px;
max-width:100%;
margin:0 auto;
}
.flex {
display: flex;
justify-content: space-between;
}

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

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

 

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

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

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

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

 <div class="menu">
        <ul class="flex">
          <li><a href="">apple</a></li>
          <li><a href="">grape</a></li>
          <li><a href="">orange</a></li>
        </ul>
      </div>

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

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

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

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

 

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

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

 

nav>.flex{
  height:50px; 
}

この時点で今こんな感じ

 

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

nav>.flex{
  height:50px; 
 align-items: center;/*追加分*/
}

 

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

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

.logo a{
  font-size:20px;
  font-weight:bold;
  color:white;
} 
li a{
  color:white;
  text-decoration:none;
}

 

以上です!

 

【受講料無料あり】2019年最新プログラミングスクールおすすめ4選

2019年5月15日