ヘッダーメニューの作成

実現したいこと

左にロゴ、やや右にメニューがあるヘッダーを作成したい。(画像で黒く塗りつぶしているのがロゴです)

発生している問題・エラーメッセージ

出来る限り、CSSでFlexboxを使い画像の様なレイアウトにしたいが、メニューの部分が動かなくなっている。

該当のソースコード

HTML

<!DOCTYPE html>
  <html>
    <head>
      <meta charset="utf-8">
      <title>ADVANCE</title>
      <link rel="stylesheet" href="decoration.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=Shippori+Antique&display=swap" rel="stylesheet">
    </head>
      <body>
        <div class="header">
          <div class="logo">
             <img src="ロゴ.jpg" alt="会社" title="ロゴ">
             <p>ADVANCE</p>
          </div>
          <div class="nav">
            <ul class="navlist">
              <li><a href="https:aaaaa.com">トップ</a></li>
              <li><a href="https:aaaaa.com">会社案内</a></li>
              <li><a href="https:aaaaa.com">事業内容</a></li>
              <li><a href="https:aaaaa.com">採用情報</a></li>
              <li><a href="https:aaaaa.com">お問い合わせ</a></li>
            </ul>
          </div>

CSS

* {
    box-sizing: border-box;

.header {
  padding: 0 40px;
  display: flex;
  height: 200px;
  width: 100%;
  flex-direction: column;
  justify-content: center;
}

.logo {
  font-family: 'Shippori Antique', sans-serif;
  display: flex;
  align-items: center;
}


.logo img {
  height: 130px;
  width: 180px;
  margin-right: 25px;
}

.logo p {
  margin: 0;
  padding: 0;
  font-size: 40px;
  font-weight: 600;
}

.navlist {
  display: flex;
}

.navlist li{
  margin: 0 25px;
  list-style: none;
}

自分自身、HTML・CSSの理解度がそこまでないため、質問の内容が分かりにくいかもしれませんがご了承ください。

行動規範の内容に同意します

回答1件

ベストアンサー

『やや右に』というのがあいまいですが、ロゴを左、メニューを右に配置したいということなら、下記でどうでしょう。

css
1.header {
2  padding: 0 40px;
3  display: flex;
4  height: 200px;
5  width: 100%;
6 /*  flex-direction: column; 削除 縦並びではないですよね */
7  justify-content: space-between; /* 修正　左右両端揃え */
8  align-items: center;  /* 追加　上下中央寄せ */
9}