ヘッダーの背景画像と見出しの文字が重なりません。

「一冊で身につくHTML&CSSとWEB」デザインという本で、
２カラムのWEBサイトを制作しています。

そこで質問なのですが、ヘッダーの背景画像にNEWSの見出し文字が重ならず、
positionなどを使うと画像ごと縮小されてしまいます。
コードチェッカーなどではエラーは見当たりませんでした。

以下がコードです。拙い質問で申し訳よろありませんが、
よろしくお願い致します。
足りない点などがあれば補足させていただきます。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4      <meta charset="utf-8">
5      <title>WCB Cafe - NEWS"</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/css2?family=Philosopher:ital,wght@0,700;1,400;1,700&display=swap" rel="stylesheet">
11
12       <link href="css/style.css" rel="stylesheet">
13       <link rel="icon" type="image/png" href="images/favicon.png">
14
15    </head>
16
17    <body>
18     <div id="news" class="big-bg">
19       <header class="page-header wrapper">
20          <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
21             <nav>
22               <ul class="main-nav">
23                 <li><a href="news.html">News</a></li>
24                 <li><a href="menu.html">Menu</a></li>
25                 <li><a href="contact.html">Contact</a></li>
26               </ul>
27             </nav>
28        </header>
29      </div>
30    <div class="wrapper">
31       <h2 class="page-title">news</h2>
32    </div>
33    </body>
34    </html>

CSS
1@charset "UTF-8";
2/*共通部分*/
3
4html {
5      font-size: 100%;
6}
7body{
8      font-family: 'Open Sans', sans-serif;
9      line-height: 1.7;
10      color: #432;
11}
12a{
13      text-decoration: none;
14}
15img{
16      max-width: 100%
17}
18.wrapper{
19      max-width: 1100px;
20      margin: 0 auto;
21      padding: 0 4%;
22}
23.big-bg {
24    background-size: cover;
25    background-position: center top;
26    background-repeat: no-repeat;
27}
28
29/*header*/
30.page-header{
31     display: flex;
32     justify-content: space-between;
33}
34.logo{
35      width: 210px;
36      margin-top: 14px;
37}
38.main-nav{
39      display: flex;
40      font-size: 1.25rem;
41      text-transform: uppercase;
42      margin-top: 34px;
43      list-style: none;
44}
45.main-nav li{
46      margin-left: 36px;
47}
48.main-nav a{
49       color: #432;
50}
51.main-nav a:hover{
52    color: #0bd;
53}
54.home-content{
55      text-align: center;
56      margin-top: 10%;
57}
58.home-content p {
59      font-size: 1.125rem;
60      margin: 10px 0 42px;
61}
62/*見出し*/
63.page-title{
64     font-size: 5rem;
65     font-family: 'plilosopher',serif;
66     text-transform: uppercase;
67     font-weight: normal;
68}
69
70/*ボタン*/
71.button{
72     font-size: 1.375rem;
73     background: #0bd;
74     color: #fff;
75     border-radius: 5px;
76     padding: 18px 32px;
77}
78.button:hover{
79     background:#0090aa;
80}
81
82#home{
83    background-image: url(../images/main-bg.jpg);
84    background-color: #0bd;
85    background-blend-mode: hard-light;
86
87    min-height: 100vh;
88}
89#home .page-title{
90    text-transform: none;
91}
92
93/*２カラム NEWS*/
94#news {
95    height: 270px;
96    margin-bottom: 40px;
97      background-image: url(../images/news-bg.jpg);
98}
99#news, .page-title {
100    text-align: center;
101}

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

回答1件

ベストアンサー

<div id="news" class="big-bg">
       <header class="page-header wrapper">
          <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
<h2 class="page-title">news</h2>

             <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を入れたいならこの<div>要素の中に入れないとダメです。

あとこれも。

h1, h2{
  width:100%;
}

いきなり写経するよりもまずは
figmaやAdobe XDで元のデザイン（プロトタイプ）などのツールでプロトタイプ作った方が
解決しやすいですし、時間無駄にしなくて済みます。

まずはdiv要素を
http://kuralab.jugem.jp/?eid=11
を何度も見て勉強するのをオススメします。

投稿2020/08/17 09:51

編集2020/08/17 10:05

sunglass

総合スコア303

Yushinn

2020/08/17 12:01

解決しました。ありがとうございます。問題解決に加え、今後の指導やおすすめのサイトまで教えて頂いて本当に助かりました。 1から勉強するために本を買ったのですが、そもそもの知識が足りなかった様です。。教えて頂いたことと教科書を並行して勉強していきたいと思います。また質問した際も回答していただければ幸いです。本当にありがとうございます。