text-align:centerが適応されません。

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

タイトルのNEWSを中央に持っていきたいのですが、うまくいきません。

<div>はインライン要素であり、text-align: centerが適応するとネットには書いてあったのですが反映されず、コーティングチェックなども行いましたが、どこも異常はありませんでした。足りない点などがあれば補足させていただきます。

以下がコードです。初心者ですが、ご教授をお願い致します。

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    background-image: url(../images/news-bg.jpg);
96    height: 270px;
97    margin-bottom: 40px;
98}
99#news .page-title {
100    text-align: center;
101}

miyabi_pudding

2020/08/14 09:32

> <div>はインライン要素でありそんなことどこに書いていたのでしょうか？記事のURLを教えて下さい。嘘っぱちもいいとこなので、記事投稿者に文句言いたいですね。

Yushinn

2020/08/16 16:53

ご返答ありがとうございます。このサイトにはこの様に書いてありましたが、また別の話なのでしょうか。。（https://code-schools.com/css-text-align-center/）

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

回答2件

ベストアンサー

すでに回答がある方法でできるかと思うのでセレクターの解説を簡単に行おうと思います。

CSS
1#news .page-title

この様に記述した場合は空白結合子ともいい、第1の要素の子孫にあたるノードつまり要素を指します。
上記の例で言うと、newsのidがついた要素の中にあるクラス名page-titleを指します。

下記コードはご提示のコードで要素関係をわかりやすく一部削除を行ったものです。
こうしてみると、page-titleがnewsの子孫関係ではないことがわかるかと思います。

HTML
1<div id="news">
2  <header>
3    <!-- -->
4  </header>
5</div>
6<div class="wrapper">
7  <h2 class="page-title">NEWS</h2>
8</div>

では,でセレクターをつなげていくとどうなるのか

こちらに関してはグループ化セレクターというものになります。

, はグループ化の手段であり、一致するすべてのノードを選択します。

こちらに関してはセレクターを複数指定したい場合に,カンマ区切りで指定することができます。

今回説明したセレクターですが、他にもたくさんの種類があります。これらに関しては必ず使う場面は来ると言ってもおかしくはないのでMDNという仕様が書かれているドキュメントがありますのでぜひ確認してみてください。(他の記法等も記載されています。)

今回参照したCSSセレクター

投稿2020/08/14 05:24

kai0310

総合スコア2070

Yushinn

2020/08/16 18:51 編集

返信が遅れてしまい、申し訳ありませんでした。説明に加え、解説までして頂き、本当にありがとうございます。追加で質問なのですが、背景画像にNEWSの文字が重ならず、 positionなどを使うと画像ごと縮小されてしまいます。度々質問してしまい申し訳ありませんが、よろしくお願い致します。

kai0310

2020/08/16 22:46

現状どこまでできているのでしょうか？また別の質問かとも思いますので、投稿を分けた方が良いかと思います。

Yushinn

2020/08/17 09:04

返信ありがとうございます。別で質問を投稿しますので、そちらも回答していただけるとありがたいです。

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

/*修正前*/
#news .page-title {
    text-align: center;
}

/*修正後*/
#news, .page-title {
    text-align: center;
}

デベロッパーツールを使うと『なぜ反映されないか』確認できるのでおすすめです。
https://www.sakurasaku-labo.jp/blogs/developer-tools

今回の件は画像1枚目のようにそもそもtext-align: center;が反映されていません。

またcssの書き方として

#news .page-title {
    text-align: center;
}

もありえません。

#news, .page-title {
    text-align: center;
}

が正しい書き方です。
,(カンマ)で区切らないとダメです。
#news と .page-titleは別々の要素で
まとめて書きたい場合は,（カンマ）で区切ります。

投稿2020/08/14 04:31

sunglass

総合スコア303

Yushinn

2020/08/16 18:52 編集

返信が遅れてしまい、申し訳ありません。丁寧に回答していただき、ありがとうございます。文字を中央に持ってくることができました。デベロッパーツールは今後もしっかりと理解しながら使いたいと思います。追加で質問なのですが、背景画像にNEWSの文字が重ならず、 positionなどを使うと画像ごと縮小されてしまいます。度々質問してしまい申し訳ありませんが、よろしくお願い致します。

sunglass

2020/08/17 03:53

解決した場合はベストアンサーを選んで一度完了状態にしてください。その方が回答を得やすいです。（経験談）また新しい質問の内容も『デベロッパーツール』を使う事で早期に原因がわかると思います。まずは『デベロッパーツール』の使い方を覚えてください。（もしくは新規でその質問を投稿してください。）

Yushinn

2020/08/17 09:08

返答ありがとうございます。デベロッパーツールで確認ししたが、理解が浅く、問題点がわかりませんでした。別で質問を設けますので、そこでも回答していただけるとありがたいです。

sunglass

2020/08/17 10:07

>そこでも回答していただけるとありがたいです。とりあえずの回答をしておきました。あとは添付のURLをご確認ください

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

あなたの回答