ヘッダーでロゴを左にメニューを右にするCSS

2021-02-21

タイトル通りだが、上記のようなレイアウトで配置したいとする。

同じ行にてロゴは左寄せ、メニューは右寄せというもの。

div要素は当然だけど縦にスタックしていく。ヘッダー内でロゴとメニューを横並びにする必要がある。

コード

html

<header>
  <div class="logo">LOGO</div>
  <div class="menu">
    <nav>
      <ul>
        <li>MENU1</li>
        <li>MENU2</li>
        <li>MENU3</li>
      </ul>
    </nav>
  </div>
</header>

css

header {
  background-color: yellow;
  display: flex;
}

.logo {
  margin: 5px;
}
.menu {
  margin:0 0 0 auto;
}

ul {
  display: flex;
  list-style: none;
 
  margin: 5px;
}

今回は横並びは全てflexを採用した。

なお、navメニューの要素は上下に余白が出来てしまうので、ロゴとメニューにmarginを指定して調整した。