icon-attention デザイン新しくしました。

icon-calendar 2019年4月9日

【CSS】nav-barをflexboxを使って簡単に作る

どのサイトにも大体存在するnav-bar？ヘッダーバー？
ちゃんとした名称は知らないけどこんなやつありますよね。

サイトを作ったことあるひとなら一度はこのnav-barを作るの
めんどいなーとか思ったことあるかもしれません。

今回はこれをflexboxを使って楽に作っていきます。

くどい説明いらんからコードくれ

これをロゴやメニューの親要素に入れます。

display: flex;
justify-content: space-between;
align-items: center;

適用例

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>flexboxでnav-bar</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <header>
      <nav class="nav-bar">
        <img src="logo.png" alt="ロゴ" class="logo">
        <ul class="menu">
          <li><a href="#">メニュー1</a></li>
          <li><a href="#">メニュー2</a></li>
          <li><a href="#">メニュー3</a></li>
        </ul>
      </nav>
    </header>
  </body>
</html>

以下がstyle.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
}
header {
    width: 100%;
    height: 70px;
}
.nav-bar {
    width: 100%;
    height: 100%;
    padding: 5px 10%;
    background-color: #555;
    border-bottom: 2px solid #ccc;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.nav-bar .logo {
    height: 80%;
}
.nav-bar .menu li {
    display: inline-block;
    padding: 5px 20px;
    list-style: none;
    border-right: 1px solid #ccc;
}
.nav-bar .menu li:last-child {
    border: none;
}
.nav-bar .menu li a {
    color: #fff;
    text-decoration: none;
}