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

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

新規登録して質問してみよう
ただいま回答率
85.48%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

1回答

290閲覧

.carrerのtextのfont-sizeが反映させたい

free_teku

総合スコア103

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2022/01/17 12:52

前提・実現したいこと

表題の通り、.carrer_txtの中のfont-sizeを大きくさせたい(2.0rem以上)

発生している問題・エラーメッセージ

.carrerの経歴や年生まれなどのfont-sizeが反映されない

試したこと

Googleツールで確認し、様々な原因を確認しました。(※class名や > p の使い方)
しかしながら、反映されないので、今回質問しました。

該当のソースコード

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <title></title> 5 <link rel="stylesheet" href="css/style.css"> 6</head> 7<body> 8 <section class="about" id="about"> 9 <div class="inner"> 10 <h2 class="about-ttl ttl-adjust">about</h2><!-- /.about-ttl --> 11 <div class="about-flex"> 12 <div class="about-img aos-init aos-animate" data-aos="fade-left"><img alt="について" src="./asserts/img/about/me.png"></div><!-- /.about-img --> 13 <div class="about-txt aos-init aos-animate" data-aos="fade-right"> 14 <h3>TAKE</h3> 15 <div class="about-desc"> 16 <div class="carrer"> 17 <div class="history"> 18 経歴 19 </div><!-- /history --><br> 20 <div class="carrer_txt"> 21 <p class="cmn-carrer_txt">年生まれ</p><br> 22 <p class="cmn-carrer_txt">年大学卒業</p><br> 23 <p class="cmn-carrer_txt">年~ 万利益kakutoku。</p> 24 </div><!-- /.carrer_txt --> 25 </div><!-- /.carrer --> 26 <div class="personal"> 27 <p class="desc">毎日HTML,CSS,Jsの学習をはじめ、エンジニアを目指しています。</p> 28 <p class="desc2">/////////////////////。//////////////////</p><!-- /.desc2 --><!-- 機械とのコミュニケーションは、"空気を読む"コミュニケーションはなく、動く or 動かない 29 のどちらかの解しかないため、結果の要因が存在し、模索することに楽しみを感じています。 --> 30 <p class="desc3">//////////////////////////////////////////////////////////////////////////,a,scdkchfugh7ey5</p><!-- /.desc3 --> 31 <p></p><!-- /.desc --> 32 </div><!-- /.personal --> 33 </div><!-- /.about-desc --> 34 </div><!-- /.about-txt --> 35 </div><!-- /.about-flex --> 36 </div><!-- /.container --> 37 </section><!-- /.about --> 38</body> 39</html>

CSS

1 2.about { 3 margin-top: 60px; 4} 5 6.about-ttl { 7 line-height: 3; 8 position: relative; 9 z-index: 1; 10 text-transform: capitalize; 11 font-size: 3.0rem; 12} 13 14.about-ttl::first-letter { 15 color: #c42d2d; 16} 17 18.about-ttl::after { 19 content: "について"; 20 width: 10%; 21 height: 10%; 22 font-size: 1.8rem; 23 padding-top: 20px; 24 padding-left: 20px; 25} 26 27@media screen and (min-width: 600px) and (max-width: 1024px) { 28 .about-ttl { 29 font-size: 4.5rem; 30 } 31} 32 33@media screen and (max-width: 599px) { 34 .about-ttl { 35 font-size: 3.5rem; 36 } 37} 38 39.about-flex { 40 display: -webkit-box; 41 display: -webkit-flex; 42 display: -ms-flexbox; 43 display: flex; 44 -webkit-box-pack: justify; 45 -webkit-justify-content: space-between; 46 -ms-flex-pack: justify; 47 justify-content: space-between; 48 -webkit-box-align: center; 49 -webkit-align-items: center; 50 -ms-flex-align: center; 51 align-items: center; 52} 53 54@media screen and (max-width: 1025px) { 55 .about-flex { 56 display: -webkit-box; 57 display: -webkit-flex; 58 display: -ms-flexbox; 59 display: flex; 60 -webkit-box-orient: vertical; 61 -webkit-box-direction: normal; 62 -webkit-flex-direction: column; 63 -ms-flex-direction: column; 64 flex-direction: column; 65 } 66} 67 68@media screen and (max-width: 599px) { 69 .about-flex { 70 max-width: 100%; 71 } 72} 73 74.about-txt { 75 max-width: 43%; 76 margin-left: 7%; 77} 78 79@media screen and (max-width: 1025px) { 80 .about-txt { 81 max-width: 100%; 82 } 83} 84 85@media screen and (min-width: 600px) and (max-width: 1024px) { 86 .about-txt { 87 max-width: 63%; 88 margin-top: 7%; 89 margin-left: 0; 90 max-width: 80%; 91 } 92} 93 94@media screen and (max-width: 599px) { 95 .about-txt { 96 padding-top: 10%; 97 max-width: 100%; 98 } 99} 100 101.about-txt h3 { 102 font-size: 2.3rem; 103} 104 105@media screen and (max-width: 1025px) { 106 .about-txt h3 { 107 text-align: center; 108 } 109} 110 111@media screen and (min-width: 600px) and (max-width: 1024px) { 112 .about-txt h3 { 113 font-size: 2.9rem; 114 } 115} 116 117.about-desc { 118 max-width: 80%; 119} 120 121@media screen and (min-width: 600px) and (max-width: 1024px) { 122 .about-desc { 123 max-width: 100%; 124 } 125} 126 127@media screen and (max-width: 599px) { 128 .about-desc { 129 max-width: 100%; 130 } 131} 132 133.about-desc .career .history { 134 font-size: 2.3rem; 135 font-weight: bold; 136} 137 138.about-desc .career .carrer_txt { 139 font-size: 2.0rem !important; 140} 141 142.about-desc .career .carrer_txt .cmn-carrer_txt { 143 font-size: 2.4rem; 144 font-weight: bold; 145} 146 147.about-desc .personal { 148 font-size: 2.0rem; 149 padding-top: 10%; 150} 151 152@media screen and (min-width: 600px) and (max-width: 1024px) { 153 .about-desc .personal { 154 font-size: 2.2rem; 155 } 156} 157 158.about-desc .personal .desc { 159 padding-bottom: 4%; 160} 161 162@media screen and (min-width: 600px) and (max-width: 1024px) { 163 .about-desc .personal .desc { 164 padding-bottom: 5%; 165 } 166} 167 168@media screen and (max-width: 599px) { 169 .about-desc .personal .desc { 170 padding-top: 3%; 171 } 172} 173 174.about-desc .personal .desc2 { 175 padding-bottom: 4%; 176} 177 178@media screen and (min-width: 600px) and (max-width: 1024px) { 179 .about-desc .personal .desc2 { 180 padding-bottom: 5%; 181 } 182} 183 184@media screen and (max-width: 599px) { 185 .about-desc .personal .desc2 { 186 padding-top: 3%; 187 } 188} 189 190.about-desc .personal .desc3 { 191 padding-bottom: 4%; 192} 193 194@media screen and (min-width: 600px) and (max-width: 1024px) { 195 .about-desc .personal .desc3 { 196 padding-bottom: 5%; 197 } 198} 199 200@media screen and (max-width: 599px) { 201 .about-desc .personal .desc3 { 202 padding-top: 3%; 203 } 204}

補足情報(FW/ツールのバージョンなど)

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

CSSの記述がcarrerではなくcareerになっているからですかね。

投稿2022/01/17 13:16

lifull_shimaokk

総合スコア129

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

free_teku

2022/01/17 16:15

おっしゃる通りでした。ご回答ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問