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

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

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

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

HTML5

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

解決済

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

free_teku
free_teku

総合スコア82

CSS3

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

HTML5

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

1回答

0評価

0クリップ

151閲覧

投稿2022/01/17 12:52

前提・実現したいこと

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

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

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

試したこと

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

該当のソースコード

HTML

<!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" href="css/style.css"> </head> <body> <section class="about" id="about"> <div class="inner"> <h2 class="about-ttl ttl-adjust">about</h2><!-- /.about-ttl --> <div class="about-flex"> <div class="about-img aos-init aos-animate" data-aos="fade-left"><img alt="について" src="./asserts/img/about/me.png"></div><!-- /.about-img --> <div class="about-txt aos-init aos-animate" data-aos="fade-right"> <h3>TAKE</h3> <div class="about-desc"> <div class="carrer"> <div class="history"> 経歴 </div><!-- /history --><br> <div class="carrer_txt"> <p class="cmn-carrer_txt">年生まれ</p><br> <p class="cmn-carrer_txt">年大学卒業</p><br> <p class="cmn-carrer_txt">年~ 万利益kakutoku。</p> </div><!-- /.carrer_txt --> </div><!-- /.carrer --> <div class="personal"> <p class="desc">毎日HTML,CSS,Jsの学習をはじめ、エンジニアを目指しています。</p> <p class="desc2">/////////////////////。//////////////////</p><!-- /.desc2 --><!-- 機械とのコミュニケーションは、"空気を読む"コミュニケーションはなく、動く or 動かない のどちらかの解しかないため、結果の要因が存在し、模索することに楽しみを感じています。 --> <p class="desc3">//////////////////////////////////////////////////////////////////////////,a,scdkchfugh7ey5</p><!-- /.desc3 --> <p></p><!-- /.desc --> </div><!-- /.personal --> </div><!-- /.about-desc --> </div><!-- /.about-txt --> </div><!-- /.about-flex --> </div><!-- /.container --> </section><!-- /.about --> </body> </html>

CSS

.about { margin-top: 60px; } .about-ttl { line-height: 3; position: relative; z-index: 1; text-transform: capitalize; font-size: 3.0rem; } .about-ttl::first-letter { color: #c42d2d; } .about-ttl::after { content: "について"; width: 10%; height: 10%; font-size: 1.8rem; padding-top: 20px; padding-left: 20px; } @media screen and (min-width: 600px) and (max-width: 1024px) { .about-ttl { font-size: 4.5rem; } } @media screen and (max-width: 599px) { .about-ttl { font-size: 3.5rem; } } .about-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1025px) { .about-flex { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 599px) { .about-flex { max-width: 100%; } } .about-txt { max-width: 43%; margin-left: 7%; } @media screen and (max-width: 1025px) { .about-txt { max-width: 100%; } } @media screen and (min-width: 600px) and (max-width: 1024px) { .about-txt { max-width: 63%; margin-top: 7%; margin-left: 0; max-width: 80%; } } @media screen and (max-width: 599px) { .about-txt { padding-top: 10%; max-width: 100%; } } .about-txt h3 { font-size: 2.3rem; } @media screen and (max-width: 1025px) { .about-txt h3 { text-align: center; } } @media screen and (min-width: 600px) and (max-width: 1024px) { .about-txt h3 { font-size: 2.9rem; } } .about-desc { max-width: 80%; } @media screen and (min-width: 600px) and (max-width: 1024px) { .about-desc { max-width: 100%; } } @media screen and (max-width: 599px) { .about-desc { max-width: 100%; } } .about-desc .career .history { font-size: 2.3rem; font-weight: bold; } .about-desc .career .carrer_txt { font-size: 2.0rem !important; } .about-desc .career .carrer_txt .cmn-carrer_txt { font-size: 2.4rem; font-weight: bold; } .about-desc .personal { font-size: 2.0rem; padding-top: 10%; } @media screen and (min-width: 600px) and (max-width: 1024px) { .about-desc .personal { font-size: 2.2rem; } } .about-desc .personal .desc { padding-bottom: 4%; } @media screen and (min-width: 600px) and (max-width: 1024px) { .about-desc .personal .desc { padding-bottom: 5%; } } @media screen and (max-width: 599px) { .about-desc .personal .desc { padding-top: 3%; } } .about-desc .personal .desc2 { padding-bottom: 4%; } @media screen and (min-width: 600px) and (max-width: 1024px) { .about-desc .personal .desc2 { padding-bottom: 5%; } } @media screen and (max-width: 599px) { .about-desc .personal .desc2 { padding-top: 3%; } } .about-desc .personal .desc3 { padding-bottom: 4%; } @media screen and (min-width: 600px) and (max-width: 1024px) { .about-desc .personal .desc3 { padding-bottom: 5%; } } @media screen and (max-width: 599px) { .about-desc .personal .desc3 { padding-top: 3%; } }

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

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

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

HTML5

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