CSSのflexboxを使っていろいろなナビゲーションをレイアウトしてみる

flexboxを使ってよくあるナビゲーションのレイアウトを作ってみる。下記のHTMLをCSSでいろんなレイアウトにしてゆきます👀

<nav>
  <a href="#" class="logo">
    <img src="./logodammy.png">
  </a>
  <a href="#">about</a>
  <a href="#">service</a>
  <a href="#">products</a>
  <a href="#">news</a>
  <a href="#" class="contact">contact</a>
</nav>

💡flexboxの使い方の基本についてはこちらへ

右寄せのナビゲーション

ロゴとナビゲーションを横に並べたベーシックなナビゲーション。
flexboxを使って、横一列に並べて間隔分のmarginを設定するだけ💡

body{
   min-width:960px;
   background:#f3f3f3;
   font-size:15px;
 }
 nav{
   display:flex;
   align-items:center;
   height:140px;
   width:87.5%;
   margin:0 auto;
 }
 a{
   margin-right:40px;
   color:#000;
   text-decoration:none;
   letter-spacing:.1em;
 }
.logo{
   width:70px;
   height:20px;
   margin-right:50px;
 }
.logo img{
   width:100%;
   height:auto;
 }

Demo

ロゴだけを左に置いた右寄せのナビゲーション

ロゴは左寄せで、ナビゲーションは右寄せに配置するバージョン。
このレイアウトもよくあるナビゲーション。

こういうレイアウトの場合にはオートマージンを使う💡
LOGO部分のmargin-rightをautoにすると、ナビゲーション部分を右寄せに配置できる。ナビゲーションは右寄せなので、marginは左側につけておけば、右側が親要素の右端と揃う。

body{
    min-width:960px;
    background:#f3f3f3;
    font-size:15px;
    font-family:sans-serif;
  }
  nav{
    display:flex;
    justify-content:center;
    align-items:center;
    height:140px;
    width:87.5%;
    margin:0 auto;
  }
  a{
    height:60px;
    margin-left:40px;
    color:#000;
    text-decoration:none;
    letter-spacing:.1em;
  }
 .logo{
    width:70px;
    height:20px;
    margin-right:auto;
    margin-left:0;
  }
 .logo img{
    width:100%;
    height:auto;
  }

Demo

ロゴとお問い合わせを独立させたナビゲーション

ロゴとお問い合わせをナビゲーションから独立させたタイプ。
こちらもオートマージンを使えば簡単🙆
ロゴのmargin-rightと、contactのmargin-leftをそれぞれautoにする。

body{
    min-width:960px;
    background:#f3f3f3;
    font-size:15px;
    font-family:sans-serif;
  }
  nav{
    display:flex;
    align-items:center;
    height:140px;
    width:87.5%;
    margin:0 auto;
  }
  a{
    margin:0 20px;
    padding:1em 10px;
    color:#000;
    text-decoration:none;
    letter-spacing:.1em;
  }
 .logo{
    width:70px;
    height:20px;
    margin-right:auto;
    margin-left:0;
  }
 .logo img{
    width:100%;
    height:auto;
  }
 .contact{
   margin-left:auto;
   margin-right:0;
   padding:.5em 1.5em;
   background:#ddd;
   font-size:14px;
 }

Demo

中央寄せのナビゲーション

こちらもおなじみのレイアウト、センター揃えのナビゲーション。

ロゴ部分とナビゲーションを折り返して表示したいので、flex-wrapで折り返し可にして、justify-contentでセンター揃えにする。
センター揃えにする場合のmarginは左右均等につける。

body{
    min-width:640px;
    background:#f3f3f3;
    font-size:15px;
    font-family:sans-serif;
  }
  nav{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    height:140px;
    width:87.5%;
    margin:0 auto;
  }
  a{
    padding:1em 10px;
    margin:0 10px;
    color:#000;
    text-decoration:none;
    letter-spacing:.1em;
  }
 .logo{
    width:100%;
    height:20px;
    margin-top:20px;
    margin-left:0;
    text-align:center;
  }
 .logo img{
    width:70px;
    height:auto;
  }

Demo

ロゴ部分のリンクエリアが左右目一杯まで広がってしまうので、実際に使うときは、HTMLを少し変えるほうがよいです。
下記のようにして、flexアイテムの内側に作ってリンクエリアをロゴサイズ程度におさめておくほうが親切です。
こんな感じに👇

<nav>
  <span class="logo">
    <a href="#">
      <img src="./logodammy.png">
    </a>
  </span>
  <a href="#">about</a>
  <a href="#">service</a>
  <a href="#">products</a>
  <a href="#">news</a>
  <a href="#" class="contact">contact</a>
</nav>

ボタンタイプのナビゲーション

リンクのエリアがわかりやすいボタンっぽいタイプのナビゲーション。
ボタンのサイズがバラバラだとちょっとカッコ悪いので、テキストだけの時と違って、同じサイズのボタンを均等に配置します🙆

justify-content:space-between;でエリア内の左右目一杯で均等に配置。各ボタンのwidthを100%÷6の値からボタンとボタンの間隔を引いた値にすればOK。

もしくは、flexboxは1列に収めるので、borderやmarginでボタンとボタンの間隔を作って、100%÷6よりも大きいwidthの値にしても同じレイアウトを作ることが可能です。

body{
    min-width:640px;
    background:#f3f3f3;
    font-size:15px;
    font-family:sans-serif;
  }
  nav{
    display:flex;
    justify-content:space-between;
    align-items:center;
    height:140px;
    width:87.5%;
    margin:0 auto;
  }
  a{
    width:16.2%;
    width:calc(100% / 6 - 1px);
    height:60px;
    line-height:60px;
    text-align:center;
    color:#000;
    background:#c3c3c3;
    text-decoration:none;
    letter-spacing:.1em;
  }
 .logo{
   background:#000;
 }
 .logo img{
    width:100%;
    max-width:70px;
    height:auto;
    display:block;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    top:50%;
    transform:translateY(-50%);
  }

Demo

inline要素として配置したり、floatを使って配置してもよいのだけど、flexboxを使って色々なレイアウトにコーディングしてみました。
いろんなCSSのプロパティを知っていると、HTMLを極力シンプルに保てる🙌

.logoと.contactはCSSの擬似要素(:first-childや:last-child)を使ってもよいのだけど、後々のメンテナンス性などを考えると、クラス名で対応する方がよいかな。

CSSのflexboxを使ってボックスをタイル状に並べる

flexboxでよくあるタイル状にボックスが並んだレイアウトを作る方法と考え方まとめ💡 ベーシックなタイル状のレイアウト 同じボックスをきれいに整列させていく一番ベーシックなレイアウト。ショッピングサイトのアイテム一覧や・・・

  • 縦方向中央に配置したいとき、align-items:center;が効かないときに確認すること
  • WordPressでカスタムタクソノミー一覧ページがリダイレクトされたときのメモ
  • HTMLのpicture要素でレスポンシブに対応した画像を読み込む
  • imgのsrcsetでレスポンシブで最適な画像を設定する方法
  • 2020年のバナナ
  • 要素を中央に表示したい!CSSでtext-align:center が効かないときに確認すること
  • スマホで100vhを使うと、アドレスバーの高さ分はみでてしまう
  • flexboxでページ全体のレイアウトを作ってみる
  • CSSのflexboxを使ってボックスをタイル状に並べる
  • CSSのflexboxを使っていろいろなナビゲーションをレイアウトしてみる
© b. All rights reserved.