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

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

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

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

HTML5

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

619閲覧

html フォントを変えたい

syosinsya_html

総合スコア1

CSS3

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

HTML5

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/10/27 08:10

html

1<div class="rd-navbar-brand"><a class="d-inline-block" href="index.php"> 2 <div class="unit align-items-sm-center unit-xl flex-column flex-xxl-row unit-spacing-custom"> 3 <div class="unit-left"><img width='170' height='160' src='images/apple-touch-icon.png' alt=''/> 4 </div> 5 <div class="unit-body text-xxl-start"> 6 <div class="rd-navbar-brand-title">この字体を変えたい</div> 7 </div> 8 </div> 9</a></div>

この字体を変えたいと書いてあるところの字体を変えたいのですが
以下の関係がありそうなcssのどこを変えたら良いか分かりません
(rd-navbar-brand-title)
助けて頂けると幸いです

css

1.rd-navbar-default.rd-navbar-static .rd-navbar-brand-title { 2 font-size: 18px; 3 line-height: 1.2; 4 font-family: "Merriweather", "Times New Roman", Times, serif; 5 font-weight: 700; 6} 7 8@media (min-width: 1800px) { 9 .rd-navbar-default.rd-navbar-static .rd-navbar-brand { 10 float: left; 11 } 12 .rd-navbar-default.rd-navbar-static .rd-navbar-brand-title { 13 font-size: 24px; 14 } 15 .rd-navbar-default.rd-navbar-static .rd-navbar-brand-slogan { 16 font-size: 14px; 17 } 18} 19 20.rd-navbar-transparent.rd-navbar-static .rd-navbar-brand-title { 21 font-size: 20px; 22 line-height: 1.2; 23 font-family: "Merriweather", "Times New Roman", Times, serif; 24} 25 26@media (min-width: 1800px) { 27 .rd-navbar-transparent.rd-navbar-static .rd-navbar-brand-title { 28 font-size: 24px; 29 font-weight: 700; 30 } 31 .rd-navbar-transparent.rd-navbar-static .rd-navbar-brand-slogan { 32 font-size: 14px; 33 } 34} 35 36.rd-navbar-center.rd-navbar-static .rd-navbar-top-panel .rd-navbar-brand-title { 37 font-size: 24px; 38 line-height: 1.2; 39 font-family: "Merriweather", "Times New Roman", Times, serif; 40 font-weight: 700; 41} 42 43.rd-navbar-minimal.rd-navbar-static .rd-navbar-brand-title { 44 font-size: 18px; 45 line-height: 1.2; 46 font-family: "Merriweather", "Times New Roman", Times, serif; 47 font-weight: 700; 48} 49 50@media (min-width: 1800px) { 51 .rd-navbar-minimal.rd-navbar-static .rd-navbar-brand { 52 float: left; 53 } 54 .rd-navbar-minimal.rd-navbar-static .rd-navbar-brand-title { 55 font-size: 24px; 56 } 57 .rd-navbar-minimal.rd-navbar-static .rd-navbar-brand-slogan { 58 font-size: 14px; 59 } 60}

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

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

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

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

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

m.ts10806

2022/10/27 08:14

提示のCSSは試した状態のものですか?試す前(変更する前)のものですか?
m.ts10806

2022/10/27 08:15

あと同様の記述(フォントに関するもの)が@media で散らばっていますが、どのときのどこを何にというのはありますか?
syosinsya_html

2022/10/27 08:15

色々試した後に変化がなかったので全て元に戻した状態です
syosinsya_html

2022/10/27 08:15

visual code studioでrd-navbar-brand-titleと検索したらヒットしたところを記入してます
m.ts10806

2022/10/27 08:28

今指定されているフォントを何に変更したいのですか? このコードを「変更前」として、「変更後」のコード(つまり試したコード)を提示してください。 修正個所ではなく、修正内容に間違いがある(記述ミス、存在しないフォント、設定ミス)可能性の方が高いです。
m.ts10806

2022/10/27 08:47

このコードを「変更前」として、「変更後」のコード(つまり試したコード)を提示してください。
syosinsya_html

2022/10/27 08:50

全てのfont-familyを"Century"のみにに置換しました
m.ts10806

2022/10/27 09:00

実際のコードを提示してください。 ただ、Centuryって日本語とか全角文字に対応してたかな
guest

回答2

0

とりあえず「.rd-navbar-brand-title 」だけに指示してはいけないのでしょうか?
HTMLの構造がおかしく上位のセレクタが合致しなさそうです

CSS

1.rd-navbar-brand-title 2 font-family: XXXX; 3}

たとえば以下のみHTMLにコピペして表示してみてください

CSS

1<style> 2.rd-navbar-brand-title { 3 font-family: monospace; 4} 5</style> 6<div class="rd-navbar-brand"> 7<a class="d-inline-block" href="index.php"> 8<div class="rd-navbar-brand-title">この字体を変えたい</div> 9<div>ここはそのまま</div> 10</a> 11</div>

投稿2022/10/27 08:43

編集2022/10/27 09:06
yambejp

総合スコア114583

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

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

syosinsya_html

2022/10/27 08:46

やってみましたが、変化ありませんでした
guest

0

前提としてCSSの基本確認が必要です。

半角スペースで区切ると「配下」
例:.a .bはaクラスの配下のbクラス

HTML

1<div class="a"> 2 <div class="b"> 3 </div> 4</div>

スペースなしだと並列
.a.bはaクラスとbクラスが同じ要素に指定されている

HTML

1<div class="a b"> 2</div>

で、提示されたHTMLから見た感じでしかないですが、
font-familyが指定されている要素は以下

.rd-navbar-default.rd-navbar-static .rd-navbar-brand-title
.rd-navbar-transparent.rd-navbar-static .rd-navbar-brand-title
.rd-navbar-center.rd-navbar-static .rd-navbar-top-panel .rd-navbar-brand-title
.rd-navbar-minimal.rd-navbar-static .rd-navbar-brand-title

.rd-navbar-brand-titleの親クラスとされているクラスはいずれもHTML内にありません。
つまり、現状のコードだけだとほぼすべてのスタイルが適用されてない状態です。

HTMLを直すか、CSSを直すかは要件次第なので仕様からご検討ください。

追記:
書くとしたら
font-family: Century Gothic, sans-serif;ですかね。(参考
ただこれって、環境によっては未指定とほぼ同じかもしれません。
※少なくとも手元では元のものとは変わりました
構文的なところはMDNも参考に。

日本語に対応してないフォントだったり、逆も然りなので、
フォントの動作確認をする際は様々な文字種を入れるようにしてください。
例えば
あ亜アアァ123123①②③ⅠⅡⅢabcabc♪()()%%##@@&copy;

投稿2022/10/27 08:39

編集2022/10/27 10:29
m.ts10806

総合スコア80765

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

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

m.ts10806

2022/10/27 10:28

>情報が古くなった回答」 具体的にご指摘ください。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問