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

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

ただいまの
回答率

87.36%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 0
  • VIEW 682

score 3

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

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

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

<!DOCTYPE html>
<html lang="ja">
    <head>
      <meta charset="utf-8">
      <title>WCB Cafe - NEWS"</title>
      <meta name="description" content="独自のブレンドコーヒーと素材の味を活かした
      ケーキを提供するカフェ">
    <!--css-->
       <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress/min.css"
       <link href="https://fonts.googleapis.com/css2?family=Philosopher:ital,wght@0,700;1,400;1,700&display=swap" rel="stylesheet">

       <link href="css/style.css" rel="stylesheet">
       <link rel="icon" type="image/png" href="images/favicon.png">

    </head>

    <body>
     <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>
             <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>
    <div class="wrapper">
       <h2 class="page-title">NEWS</h2>
    </div>
    </body>
    </html>
@charset "UTF-8";
/*共通部分*/

html {
      font-size: 100%;
}
body{
      font-family: 'Open Sans', sans-serif;
      line-height: 1.7;
      color: #432;
}
a{
      text-decoration: none;
}
img{
      max-width: 100%
}
.wrapper{
      max-width: 1100px;
      margin: 0 auto;
      padding: 0 4%;
}
.big-bg {
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/*header*/
.page-header{
     display: flex;
     justify-content: space-between;
}
.logo{
      width: 210px;
      margin-top: 14px;
}
.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;
}
.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: 'plilosopher',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;
}

#home{
    background-image: url(../images/main-bg.jpg);
    background-color: #0bd;
    background-blend-mode: hard-light;

    min-height: 100vh;
}
#home .page-title{
    text-transform: none;
}

/*2カラム NEWS*/
#news {
    background-image: url(../images/news-bg.jpg);
    height: 270px;
    margin-bottom: 40px;
}
#news .page-title {
    text-align: center;
}
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi_takatsuk

    2020/08/14 18:32

    > <div>はインライン要素であり

    そんなことどこに書いていたのでしょうか?
    記事のURLを教えて下さい。
    嘘っぱちもいいとこなので、
    記事投稿者に文句言いたいですね。

    キャンセル

  • Yushinn

    2020/08/17 01:53

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

    キャンセル

回答 2

checkベストアンサー

+4

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

#news .page-title


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

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

<div id="news">
  <header>
    <!-- -->
  </header>
</div>
<div class="wrapper">
  <h2 class="page-title">NEWS</h2>
</div>

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

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

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

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


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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/08/17 03:15 編集

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

    キャンセル

  • 2020/08/17 07:46

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

    キャンセル

  • 2020/08/17 18:04

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

    キャンセル

+2

/*修正前*/
#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/17 03:49 編集

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

    キャンセル

  • 2020/08/17 12:53

    解決した場合はベストアンサーを選んで一度完了状態にしてください。
    その方が回答を得やすいです。(経験談)

    また新しい質問の内容も『デベロッパーツール 』を使う事で早期に原因がわかると思います。

    まずは『デベロッパーツール 』の使い方を覚えてください。
    (もしくは新規でその質問を投稿してください。)

    キャンセル

  • 2020/08/17 18:08

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

    キャンセル

  • 2020/08/17 19:07

    >そこでも回答していただけるとありがたいです。

    とりあえずの回答をしておきました。
    あとは添付のURLをご確認ください

    キャンセル

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

  • ただいまの回答率 87.36%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る