完全初心者なのです。MANAさんの本を読みながら進めていましたが、本を何回か読み返しても解決しない為質問しました。
場所がごっちゃになってしまい(重なってしまう)どうしたらいいでしょうか。お力を貸してください。
@charset "UTF-8";
.logo{
width: 210px;
margin-top: 14px;
}
html {
font-size: 100%;
}
body {
font-family: "Yu Gothic Medium","游ゴシック Medium",YuGothic,"游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;line-height: 1.7;color: #432;
}
a{
text-decoration: none;
}
img{
max-width: 100%;
}
.main-nav{
display: flex;
font-size: 1.25rem;
text-transform: uppercase;
margin-top: 34px;
list-style: none;
}
.main-nav li{
margin-left: 36px;
}
.main-nav a{
color: #432;
}
.main-nav a:hover{
color: #0bd;
}
.page-header{
display: flex;
justify-content: space-between;
}
.wrapper{
max-width: 1100px;
margin: 0 auto;
padding: 0 4%;
}
.home-content{
text-align: center;
margin-top: 10%;
}
.home-content p{
font-size: 1.125rem;
margin: 10px 0 42px;
}
/* 見出し*/
.page-title{
font-size: 5rem;
font-family: 'Philosopher', serif;
text-transform: uppercase;
font-weight: normal;
}
/*ボタン*/
.button{
font-size: 1.375rem;
background: #0bd;
color: #fff;
border-radius: 5px;
padding: 18px 32px;
}
.button:hover{
background: #0090aa;
}
/*大きな背景画像*/
.big-bg{
background-size: cover;
background-position: center top;
background-repeat: no-repeat;
}
#home{
background-image: url("/Users/nao/VSCode/Study/images/main-bg.jpg");
min-height: 100vh;
}
#home .page-title{
text-transform: none;
}
/* NEWS*/
#news{
background-image: url(/Users/nao/VSCode/Study/images/news-bg.jpg);
height: 270px;
margin-bottom: 40px;
}
#news .page-title{
text-align: center;
}
/*フッター*/
footer{
background: #432;
text-align: center;
padding: 26px 0;
}
footer p{
color: #fff;
font-size: 0.875rem;
}
/*記事部分*/
article{
width: 74%;
}
/*サイドバー*/
aside{
width: 22%;
}
.news-contents{
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.news-contents{
display: flex;
justify-content: space-between;
margin-bottom: 50px;
}
.post-info{
position: relative;
padding-top: 4px;
margin-bottom: 40px;
}
.post-date{
background: #0bd;
border-radius: 50%;
color: #fff;
width: 100px;
height: 100px;
font-size: 1.625rem;
text-align: center;
position: absolute;
top: 0;
padding-top: 10px;
}
.post-date span{
font-size: 1rem;
border-top: 1px rgba(255, 255, 255, .5) solid;
padding-top: 6px;
display: block;
width: 60%;
margin: 0 auto;
}
.post-title{
font-family: "Yu Mincho","YuMincho", serif;
font-size: 2rem;
font-weight: normal;
}
.podt-title,
.post-cat{
margin-left: 120px;
}
article img{
margin-bottom: 20px;
}
article p{
margin-bottom: 1rem;
}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="uft-8">
<title>WCB Cafe - NEWS</title>
<meta name="description" content="ブレンドコーヒーとヘルシーなオーガニックフードを提供するカフェ">
<link rel="stylesheet" href="http://unpkg.com/ress/dist/ress.min.css">
<link href="http://fonts.googleapis.com/css?famly=Philosopher" rel="stylesheet">
<link href="/Users/nao/VSCode/Study/Users/nao/VSCode/Study/style.css" rel="stylesheet">
<link rel="icon" type="image/png" href="/Users/nao/VSCode/Study/images/favicon.png">
<body>
<div id="news" class="big-bg">
<div class="news-contents wrapper">
<article>
<header class="post-info">
<h2 class="post-title">店内ギャラリーの絵が新しくなりました</h2>
<p class="post-date">3/30 <span>2020</span></p>
<p class="post-cat">カテゴリー:お店の紹介</p>
</header>
<img src="/Users/nao/VSCode/Study/images/wall.jpg" alt=店内の様子>
<p>
体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
美味しいブランドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください。
体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
美味しいブランドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください
</p>
<p>
体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
美味しいブランドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください
体に優しい自然食を提供する、WCB CAFE。無添加の食材を利用したメニューが特徴です。
美味しいブランドコーヒーとヘルシーなオーガニックフードで体の内側から癒されてください
</p>
<p>体に優しい自然食を提供する、WCB CAFE。</p>
</article>
<aside>
</aside>
</div><!-- /.news-contents -->
<header class="page-header wrapper">
<div class="wrapper">
<h2 class="page-title">News</h2>
</div><!-- /.wrapper -->
<h1><a href="index.html"><img class="logo" src="/Users/nao/VSCode/Study/images/logo.svg" alt="WCB カフェホーム"></a></h1>
<nav>
<ul class="main-nav">
<li><a href="news.html">news</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</nav>
</header>
</div><!-- news -->
<footer>
<div class="wrapper">
<p><small>© 2020 NaoBox</small></p>
</div>
</footer>
</body>
</head>
</html>
</head>
が終了直前にある(<body>
の前に無い)のが変ですね。あと使われている画像データの縦横ドット数とか、画面上のどの辺にどんな内容を配置したいか等の情報があると、データや参考書籍を持っていない人でも確認出来るかもしれません。 – kunif 20年3月17日 11:20.css
で、#news
のheight: 270px;
と、.post-date
のposition: absolute;
を削除すると、何かそれらしきレイアウトになるようです。それが望ましい方向なのかは不明なのでコメントにしておきます。 – kunif 20年3月17日 12:05