ページの見出しの位置が少し下になる

前提・実現したいこと

書籍で勉強しています。
書籍通りにしたのですが、見出しの部分が少し低くなっています。（画像ではわかりにくいですが）
また、メニューを見るのボタンの部分もhtmlは<div>タグ内にあるのに.page-title（赤色）に入っていません。
なぜこのような現象が起こるのでしょうか？

該当のソースコード

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>Document</title>
7  <link rel="stylesheet" href="css/index.css">
8  <link rel="stylesheet" href="css/news.css">
9</head>
10
11<body>
12  <div id="home" class="big-bg">
13    <header class="page-header wrapper">
14      <h1><a href="index.html"><img class="logo" src="images/logo.svg" alt="WCBカフェホーム"></a></h1>
15      <nav>
16        <ul class="main-nav">
17          <li><a href="news.html">News</a></li>
18          <li><a href="menu.html">Menu</a></li>
19          <li><a href="contact.html">Contact</a></li>
20        </ul>
21      </nav>
22    </header>
23
24    <div class="home-content wrapper">
25      <h2 class="page-title">We'll Make Your Day</h2>
26      <p>おしゃれなカフェで癒やされてみませんか？無添加の食材で体の中からリフレッシュ。</p>
27      <a class="button" href="menu.html">メニューを見る</a>
28    </div><!-- /.home-content -->
29  </div><!-- /#home -->
30</body>
31
32</html>
33

css
1@charset "UTF-8";
2
3/* 共通部分
4------------------------------- */
5html {
6  font-size: 100%;
7}
8
9body {
10  font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
11  line-height: 1.7;
12  color: #432;
13}
14
15a {
16  text-decoration: none;
17}
18
19img {
20  max-width: 100%;
21}
22
23.wrapper {
24  max-width: 1100px;
25  margin: 0 auto;
26  padding: 0 4%;
27}
28
29#home {
30  background-image: url(../images/main-bg.jpg);
31  min-height: 100vh;
32}
33
34#home .page-title {
35  text-transform: none;
36}
37
38/* 大きな背景画像 */
39.big-bg {
40  background-size: cover;
41  background-position: center top;
42  background-repeat: no-repeat;
43}
44
45/* HEADER
46------------------------------- */
47.logo {
48  width: 210px;
49  margin-top: 14px;
50}
51
52.main-nav {
53  display: flex;
54  font-size: 1.25rem;
55  text-transform: uppercase;
56  margin-top: 34px;
57  list-style: none;
58}
59
60.main-nav li {
61  margin-left: 36px;
62}
63
64.main-nav a {
65  color: #432;
66}
67
68.main-nav a:hover {
69  color: #0bd;
70}
71
72.page-header {
73  display: flex;
74  justify-content: space-between;
75}
76
77/* HOME
78------------------------------- */
79.home-content {
80  text-align: center;
81  background-color: red;
82}
83
84.home-content p {
85  font-size: 1.125rem;
86  margin: 10px 0 42px;
87}
88
89/* 見出し */
90.page-title {
91  font-size: 5rem;
92  /* margin: 0px 10px 0; */
93  font-family: 'Philosopher', serif;
94  text-transform: uppercase;
95  font-weight: normal;
96  /* background-color: red; */
97}
98
99/* ボタン */
100.button {
101  font-size: 1.375rem;
102  background: #0bd;
103  color: #fff;
104  border-radius: 5px;
105  padding: 18px 32px;
106}
107
108.button:hover {
109  background: #0090aa;
110}
111

m.ts10806

2020/07/01 13:05

「書籍の通りにした」と書いている人で本当にそうなっている人は本当にごくわずかしかいないので、それぞれの意味をきちんと考えたうえで「コード」を書いてください。そういう観点で見直してください。プログラムは書いたようにしか動かないのでlとIは別物ですし、0とOは別物です。

kei344

2020/07/01 20:15

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。

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

回答2件

この部分でしょうか?

###この位置で<h1>と<nav>の位置を揃えるには

css
1.page-header {
2  display: flex;
3  justify-content: space-between;
4  align-items: center; /* 追加 - これで横中央揃えにします */
5  padding-top: 14px; /* 追加 - logoで指定していた上余白分をここに */
6  margin-bottom: ●●px; /* 追加 - 下の赤枠との間隔を設定 お好きな数値にして下さい */ 
7}
8.page-header h1 {
9  margin: 0;
10} /* h1規定で設定されているmarginを無くす */
11.logo {
12  width: 210px;
13/* これを削除 margin-top: 14px; */
14}
15.main-nav {
16  display: flex;
17  font-size: 1.25rem;
18  text-transform: uppercase;
19/* これを削除 margin-top: 34px; */
20  list-style: none;
21  margin: 0;  /* ul規定で設定されているmarginを無くす */
22}

flexは、align-items: center;で横中央揃えになりますので
中の要素上下のmarginは不要です。

上端からの距離、次の要素(.home-content)への距離は
.page-header で指定するようにすると
間隔の設定が変えやすいと思います^^

###ボタンの位置
Daregadaさんの通りですね^^

或いはbuttonの方を変えて

css
1.button {
2  display: inline-block; /* 追加 */ 
3  margin: 0 auto ●●px; /* 追加 ●●px=赤枠との下側の距離を数値で指定します */
4  font-size: 1.375rem;
5  background: #0bd;
6  color: #fff;
7  border-radius: 5px;
8  padding: 18px 32px;
9}

投稿2020/07/01 14:19

-millmill-

総合スコア674

ベストアンサー

CSSの.page-titleの設定で、コメントにしているマージン設定を元に戻して、

CSS
1.page-title {
2  margin: 0 10px;
3  (以下略)
4}

とすれば書籍の例に近くなるんじゃないですか。

ボタンがはみ出すのは、ボタンのパディング領域(下には18px)まで.home-contentが見てないからなので、

CSS
1.home-content {
2  padding-bottom: 18px;
3  (以下略)
4}

とでもすればいいんじゃ。

投稿2020/07/01 13:17

Daregada

総合スコア11990

tetsuya7724

2020/07/01 13:43

できました。ありがとうございます。

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！