HTML/CSS初心者です。
画像のようにメニューのボタンと文章が重なってしまいます。
ちょっとしたことで変えられると思うのですが調べてもよくわかんなかったため質問しました。
よろしくお願いします。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charsset="utf-8"> 5 <title>WCB Cafe</title> 6 <meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ"> 7 8 <!-- CSS --> 9 <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css"> 10 <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet"> 11 <link href="css/style.css" rel="stylesheet"> 12 </head> 13 14 <body> 15 <div id="home" class="big-bg"> 16 <header class="page-header wrapper"> 17 <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1> 18 <nav> 19 <ul class="main-nav"> 20 <li><a href="news.html">News</a></li> 21 <li><a href="menu.html">Menw</a></li> 22 <li><a href="contact.html">Contact</a></li> 23 </ul> 24 </nav> 25 </header> 26 27 <div class="home-content wrapper"> 28 <h2 class="page-title">We'll Make Your Day</h2> 29 <p>おしゃれなカフェで癒されてみませんか?無添加の食材で体の中からリフレッシュ。</p> 30 <a class = "button" href="menu.html">メニューを見る</a> 31 </div><!-- /.home-content --> 32 </div><!-- /#home --> 33 </body> 34</html> 35
CSS
1@charset "UTF-8"; 2 3/* 共通部分 4--------------------*/ 5 6html { 7 font-size: 100%; 8} 9body{ 10 font-family:"Yu Gothic Medium", "游ゴシック Medium" YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3", sans-serif; 11 line-height:1.7; 12 color: #432; 13} 14a { 15 text-decoration:none; 16} 17img { 18 max-width: 100%; 19} 20 21/* HEADER 22----------------*/ 23 24.logo { 25 width: 210px; 26 margin-top:14px; 27} 28 29.main-nav { 30 display: flex; 31 font-size: 1.25rem; 32 text-transform: uppercase; 33 margin-top: 34px; 34 list-style: none; 35} 36.main-nav li { 37 margin-left: 36px; 38} 39.main-nav a { 40 color: #432; 41} 42.main-nav a:hover { 43 color: #0bd; 44} 45 46.page-header { 47 display: flex; 48 justify-content: space-between; 49} 50 51.wrapper { 52 max-width: 1100px; 53 margin: 0 auto; 54 padding: 0 4%; 55} 56 57/* HOME 58------------------------*/ 59 60.home-content { 61 text-align: center; 62 margin-top: 10%; 63} 64.home-content p { 65 font-size: 1.125rem; 66 magin: 10px 0 42px; 67} 68 69/* 見出し */ 70.page-title { 71 font-size: 5rem; 72 font-family: "Philosopher", serif; 73 text-transform: uppercase; 74 font-weight: normal; 75} 76 77/* ボタン */ 78.button { 79 top: 100px; 80 font-size: 1.375rem; 81 background: #0bd; 82 color: #fff; 83 border-radius: 5px; 84 padding: 18px 32px; 85} 86.button:hover { 87 background: #0090aa; 88} 89 90/* 大きな画像背景 */ 91.big-bg { 92 background-size: cover; 93 background-position: center top; 94} 95 96#home { 97 background-image: url(../images/main-bg.jpg); 98 min-height: 100vh; 99} 100#home .page-title { 101 text-transform: none; 102} 103
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/12/21 09:54