Q&A
補足願います。
「ロゴtitleとnavバーが重なってしまい」とのことですが、どのように配置される想定だったのですか？
「navのリストが中央に配置してくれません」とのことですが、具体的には「何に対して」「何を」「水平垂直どちらの方向で」中央配置したいのでしょうか？
htmlをcssでコーディングしているのですが、ロゴtitleとnavバーが重なってしまい、尚且つnavのリストが中央に配置してくれません。。
検証ツールなどをみて、.h-navに下記のコードを書いたりしたのですが、重なりが取れませんで、リストも中央に配置できませんでした。。
添付のように左上にtitleロゴ、navを横並びにさせたいと思っております。
説明が不足しており失礼いたしました。。
96224feab391d1dd644c1fd81c1d2668.jpeg)
display: block;
list-style-type: disc;
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
恐れ入ります。あまりにも初心者で大変恐縮なのですが、根本的にどこが誤っているのかご教示いただけたら幸いです。
どうぞよろしくお願いいたします。
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>TEST2</title> 7 <link rel="stylesheet" href="style.css"> 8 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css"> 9 10</head> 11<body> 12 <div class="container"> 13 <header class="header"> 14 <div class="h-title"> 15 <img class="h-logo" src="images/logo.png" alt="title"> 16 <nav class="h-nav"> 17 <ul class="h-menu"> 18 <li class="h-list"> 19 <div class="h-1-box"> 20 <div class="h-1-top"> 21 ホーム 22 </div> 23 <div class="h-1-bottom"> 24 HOME 25 </div> 26 </div> 27 </li> 28 <li class="h-list"> 29 <div class="h-1-box"> 30 <div class="h-1-top"> 31 カンパニー 32 </div> 33 <div class="h-1-bottom"> 34 COMPANY 35 </div> 36 </div> 37 </li> 38 <li class="h-list"> 39 <div class="h-1-box"> 40 <div class="h-1-top"> 41 サービス 42 </div> 43 <div class="h-1-bottom"> 44 SERVICE 45 </div> 46 </div> 47 </li> 48 <li class="h-list"> 49 <div class="h-1-box"> 50 <div class="h-1-top"> 51 採用情報 52 </div> 53 <div class="h-1-bottom"> 54 RECRIT 55 </div> 56 </div> 57 </li> 58 <li class="h-list"> 59 <div class="h-1-box"> 60 <div class="h-1-top"> 61 リンク 62 </div> 63 <div class="h-1-bottom"> 64 LINK 65 </div> 66 </div> 67 </li> 68 <li class="h-list"> 69 <div class="h-1-box"> 70 <div class="h-1-top"> 71 お問い合わせ 72 </div> 73 <div class="h-1-bottom"> 74 CONTACT 75 </div> 76 </div> 77 </li> 78 79 </ul> 80 </nav> 81 <div class="h-imagebox"> 82 <img src="images/1.jpg" alt="ヘッダーの画像"> 83 </div> 84 </div> 85 </header> 86 <main class="main"> 87 main 88 </main> 89 <aside class="side"> 90 side 91 </aside> 92 <footer class="footer"> 93 footer 94 </footer> 95 </div> 96</body> 97</html>
css
1 2 3html,body{ 4 height: 100%; 5 background: #a8a6a6; 6} 7 8 9/*コンテナー 10---------------------------------------------------------------------------*/ 11.container { 12 width: 1200px; 13 height: 100%; 14 min-height: 100%; 15 background: white; 16 margin: 0 auto; 17} 18 19/*ヘッダー 20---------------------------------------------------------------------------*/ 21 22/*ロゴ画像設定*/ 23.h-title { 24 height: 100px; 25 border-top: 5px solid blue; 26 position: relative; 27} 28 29.h-title .h-logo{ 30 width: 300px; 31 position: absolute; 32 top: 50%; 33 left: 4%; 34 transform: translateY(-50%) 35} 36 37 38 39.h-menu{ 40 letter-spacing: -.4em; 41} 42 43 44.h-list{ 45 display: inline-block; 46 width: 16.6%; 47 position: relative; 48 letter-spacing: normal; 49 height: 84px; 50 border-right: 1px solid #d2d2d2; 51 box-sizing: border-box; 52} 53.h-1-box{ 54 position: absolute; 55 top: 50%; 56 left: 50%; 57 transform: translate(-50% -50%); 58} 59 60 61 62.main{ 63 background: blue; 64 float: left; 65 width: 70%; 66} 67 68.side{ 69 background: green; 70} 71 72.footer{ 73 background:pink; 74}
年末年始でpcがイジれずご返信が遅れまして恐縮です。
再度、質問に添付を付けまして更新させていただきました。
もし今からでもご教示いただけたらありがたいです。
でも自分でも解決の道を探ってみます。
ありがとうございます。
回答2件
0
自己解決
すみません。。解決できました。
htmlのcodeのh-titleクラスの閉じタグ（</div>）を、h-logoクラスのimgタグの直後に持ってきたら解決できました。。
一つ一つ落ち着いて見ていきます。
ありがとうございました。
投稿2021/01/04 05:31
総合スコア1
0
とりあえず、明らかな間違いは下記です。
css
1.h-1-box{ 2 position: absolute; 3 top: 50%; 4 left: 50%; 5/* transform: translate(-50% -50%); ここ */ 6 transform: translate(-50%, -50%); /* カンマが必要 */ 7}
あと、「ロゴtitleとnavバーが重な」る原因は、ロゴ画像に position: absolute; を設定しているからです。とりあえず、下記のように削除すれば重ならなくなります。
css
1.h-title .h-logo{ 2 width: 300px; 3/* 削除 ここから 4 position: absolute; 5 top: 50%; 6 left: 4%; 7 transform: translateY(-50%) 8ここまで */ 9}
あとは、position: absolute; に頼らないレイアウトの勉強をしましょう。
いまなら、CSS Flexbox と CSS Grid をマスターすると自由にレイアウトできるようになると思います。
投稿2020/12/28 14:07
総合スコア34073
ありがとうございます！
お正月でpcがイジれず返信が遅くなり恐縮です。。
カンマという初歩的なミスを。。恐れ入ります。。
またそうですね、Flexbox、Grid確かにかなり自由度が高くて便利だと少し勉強しました。
ありがとうございます！
あなたの回答
tips
プレビュー
