子要素に指定したいフォントサイズが、反映されません

divの子要素のｐタグのfont-sizeを20pxに指定するために親要素のdivにclass="txtm"としましたが、指定が反映されません。pに直接書けばいいのですが、毎回書かなければいけないので困っています。なぜ反映されないのでしょうか？
現状は、cssの上の方に書いたpタグの指定の14pxが生きたままになっています。
問題のコードの部分は、****で囲んでいます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <title>Document</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
  <div class="header">
    <div class="header-left">
      <img class="logo" src="img/isaralogo.png" alt="isaraロゴ画像">
      <p>バンコクのノマドエンジニア育成講座</p>
    </div>
    <div class="right">
      <a href="#form" class="btn btn-secondary">お問い合わせ / 資料請求はこちら</a>
    </div>
  </div>
</header>

<!-- top -->
<div class="container-fluid mv-top">
  <div class="row top-caption">
    <div class="col-12">
      <h1 class="caption-heading">プログラミングで<br>人生の安定を手にいれよう</h1>
    </div>
    <div class="col-12">
      <img class="logo-lg" src="img/isaralogolarge.png" alt="">
    </div>
    <div class="col-12">
      <h2 class="caption-heading2">バンコクのノマドエンジニア育成講座<br>iSara[イサラ]</h2>
    </div>
  </div>
</div>

<!-- jumbotron contact-->
<section class="contact">
  <div class="jumbotron padding">
    <div class="text-center">
****************************************************************************************************************************
      <div class="text txtm">
        <p>まずは２０日間で、<br>月１０万円稼げるスキルを手にいれよう。</p>
        <p><span>※受講料金は実質０円です。詳しくは資料請求をどうぞ。</span></p>
        <a href="#form" class="btn btn-primary">
          お問い合わせ＆資料請求はこちら
        </a>
       </div>
      <div class="students">
        <p>第６期生：2019年11月25日 ~ 2019年12月14日<br>＊締め切りました</p>
        <p>第７期生：2020年2月17日 ~ 2019年3月7日<br>＊締め切りました</p>
        <p>第8期生：2020年4月〜5月ごろを予定<br>＊資料請求受付中です</p>
        <div class="btn-wrap">
          <ul>
            <li>
              <a href="#" class="btn btn-primary"><i class="fab fa-twitter">ツイート</i></a>
            </li>
            <li>
              <a href="" class="btn btn-primary"><i class="fas fa-thumbs-up">いいね！</i></a>
            </li>
            <li>
              <a href="#" class="btn btn-primary">シェア</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>
***************************************************************************************************************************

  <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

html{
  font-size: 10px;
}

body, p, h1, h2, h3, h4, h5, h6 {
  color: #333333;
  font-size: 14px;
  line-height: 1.6;
  font-family: "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
  letter-spacing: 1.5px;
}


header{
  position: fixed;
  top: 0;
  z-index: 100;
  background: #fff;
  width: 100%;
}

.header{
  display: flex;
  width: 1170px;
  margin: 0 auto;
  padding: 2rem 0;
  justify-content: space-between;
}

.header-left .logo{
  width: 128px;
}

.header-left p{
  display: inline-block;
  margin-bottom: 0;
  vertical-align: bottom;
  font-weight: 600;
}

.right{
  background: #da6b64;
  padding: 11px 40px;
  border-radius: 3rem;
}
.btn{
  font-size: 14px;
  font-weight: 300;
  color: #fff;
  text-decoration: none;
  width: 100%;
  height: 100%;
}

/* main */
.mv-top{
  background: url(img/main.jpg) 0 0 no-repeat;
  background-size: contain;
  height: 0;
  padding-top: 41.08%;
  position: relative;
}

.top-caption{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  text-align: center;
}

.caption-heading{
  font-size: 28px;
  font-weight: 600;
}

.logo-lg{
  width: 317px;
  margin-bottom: 20px;
}

.caption-heading2{
  font-size: 20px;
  font-weight: 600;
  line-height: 22px;
}

.padding{
  padding: 30px 0;
}
***************************************************************************************************************************
.txtm {
  font-size: 20px;
  font-weight: 600;
}
***************************************************************************************************************************
.txtm span{
  font-size: 90%;
  background: #fff;
  color: #c7254e;
}

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

回答2件

10pxを指定したいHTML要素と、14pxを指定したいHTML要素を比較したとき、
10pxを指定したいHTML要素は稀だと思います。

なので、その稀な10pxにしたい要素には都度CSSを指定するか、
.text-sm { font-size: 10px; }などのクラスを作っておくか
すると楽だと思います。

CSS
1html{
2  /* font-size: 10px; */
3  font-size: 14px; /* 一番標準的な文字サイズ ≒ pタグに指定したいサイズ */
4}
5
6body, p, h1, h2, h3, h4, h5, h6 {
7  color: #333333;
8  /* 標準的な文字サイズは、各タグには指定しない */
9  /* font-size: 14px; */
10  line-height: 1.6;
11  font-family: "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "MS PGothic", sans-serif;
12  letter-spacing: 1.5px;
13}
14
1510pxを指定したい要素 {
16  font-size: 10px;
17}

投稿2020/03/27 13:46

new1ro

総合スコア4528

Nodoame0716

2020/03/28 05:48

回答ありがとうございます。10pxを指定したいのではなく20pxです。使用頻度の多いサイズを標準的なサイズに指定して、使用頻度の少ないサイズをその都度指定していくということですか？

new1ro

2020/03/28 07:28

そのほうが楽なのでおすすめです！

Nodoame0716

2020/03/28 08:04

確かに何度も使用するフォントサイズを一々指定してたら効率悪いですよね！このやり方を実践していこうと思います。ありがとうございました。

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

ベストアンサー

下記でどうですか。

css
1.txtm p {
2  font-size: 20px;
3  font-weight: 600;
4}

投稿2020/03/27 11:51

hatena19

総合スコア33715

Nodoame0716

2020/03/28 05:53 編集

回答ありがとうございます。アドバイス通りにしたらできましたが、なぜdivにフォントサイズを指定したのにその子要素全てに一括反映されなかったのでしょうか？divに指定して一括指定すること自体が出来ないのでしょうか？

hatena19

2020/03/28 06:02 編集

子要素にフォントサイズ設定がなかったら親要素の設定を継承しますが、子要素自体に設定があればそれが優先されます。もし、子要素の設定が無視されて、親要素の設定が優先されたら困りますよね。

Nodoame0716

2020/03/28 08:01

なるほど！！とても分かりやすかったです。昨日1時間くらい悩んでいろいろ検索して探してましたが、完全に見当違いの検索してたみたいです(´;ω;｀) もっと複雑なことが原因だと思ってたらこんな単純なことだったとは... 大変助かりましたありがとうございます。

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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

子要素に指定したいフォントサイズが、反映されません

関連した質問