Q&A
ソースを画像（だけ）で載せるのは不親切です
header-textにfont-family: "Zen Antique", "serif";を適用すると
header-text-2のfont-family: "Zen Antique", "serif";やheader-text-3のfont-family: "Yu Mincho", "YuMincho";が効かなくて困ってます。何か見逃してますでしょうか。アドバイスいただけますと幸いです。
]
回答2件
0
ベストアンサー
試したことが書いてないのでとりあえず書いてみます。
CSSの.header-textの中身をコピー、.header-text-2と.header-text-3の中にペーストしそれぞれの値（font-sizeなど）に変更する。
投稿2021/11/02 05:31
総合スコア28
やってみましたが今度はheader-text-2だけfont-sizeがきかなくなってしまいました。header-text-3の方は問題ないので多分同じフォントをheader-textとheader-text-2に適用してるからだと思いますが、何かわかりませんでしょうか？
どこが原因なのかを探してみましょう。
・.header-text2のfontを、.header-textと.header-text3とは違うfontを当ててみてください。
[動かない場合] 同じfontが原因ではなさそうです。
[動く場合] 同じfontが原因ぽいので、.header-fontみたいなクラスを作ってそこでfontを指定して見てください。
※コメントでコードを載せていますが、.header-text2のfont-sizeとcolorの後ろに不自然な空白があります。これを消してみてください。
ありがとうございます。解決しました。おっしゃる通りそこの余白が原因だったようです。
awsのfind機能ではパッと見わからなかったのですが、コードをコピペしてどこかに張り付けると空白が見つけやすくなるんですね。
0
DevToolsの Styles タブに表示されている警告マーク ⚠ の上にマウスカーソルを乗せてください。原因が表示されます。
(「何が原因なのか」「どうやって直すのか」はコードの画像だけでは判らなかったので割愛)
追記:
フォント名の区切りのカンマや引用符が全角になってたりしませんか?
投稿2021/11/02 04:23
編集2021/11/02 21:45
総合スコア21756
invalid property valueとでます。コードの方見直しましたがちょっとわからなかったです。
スタイルシートのコードを画像ではなく文字で書いてもらえれば何かわかると思います。
少しいじったので変わってますがこちらです
html
<header class="container-header">
<div class="header-flex">
<div class="header-text-container">
<p class="header-text">AGA</p>
<p class="header-text-2">クリニック</p>
<p class="header-text-3">薄毛・抜け毛の対策はお早めに</p>
</div>
<div class="button-container">
<div class="button">
<div class="button-text">無料カウンセリング ></div>
</div>
</div>
</div>
</header>
css
.header-text-container{
display: flex;
width: 100%;
align-items: center;
margin: 0;
padding: 0;
font-family: "Zen Antique", "serif";
}
.header-text{
font-size: 30px;
color: rgb(0, 0, 0);
font-weight: 700;
}
.header-text-2{
font-size: 20px;
color: rgb(0, 0, 0);
font-weight: 700;
padding-right: 1%;
}
.header-text-3{
font-family: "Yu Mincho", "YuMincho";
font-size: 15px;
color: rgb(0, 0, 0);
}
このコードだともうDevToolsでの⚠マークも消えているのでは。
ありがとうございます。解決しました。
あなたの回答
tips
プレビュー
