実現したいこと
左にロゴ、やや右にメニューがあるヘッダーを作成したい。(画像で黒く塗りつぶしているのがロゴです)
発生している問題・エラーメッセージ
出来る限り、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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2023/05/25 14:09