凍結
0 Anonymous iPad
お世話になります。

サイト全体のフォントをCSSで以下のようにゴシック設定しています。
* {
font-family: sans-serif;
}

小説のテキストだけ明朝体にしたいのですが、以下のように設定して#text#を<div>でくくると、小説は明朝体になるのですが、<ruby>や<span>で囲まれた文字だけゴシック体で残ってしまいます。
.mincho {
font-family: serif;
}


#text#のスタイルは、#txtのidにJavascriptで.minchoをつけたり外したりしてユーザーがフォントを選べるようにしたいので、できればあちこちにclass設定をしないで済む解決方法があると助かるのですが…。

お分かりになる方いたら教えていただけますでしょうか。
よろしくお願いします。
09/18 13:02
返信
コメント投稿 検索
6 Anonymous iPhone
>>5
できました…。ありがとうございます。
原因もわかりました。
どうやら、Chromeでキャッシュ削除したあと、アプリキルしてなかったのが原因だったようです。
タブを閉じてるから大丈夫だろうと一度もアプリ再起動しておらず、ご指摘を受けてもう一度削除し、アプリキルもしたところ、すべて明朝体になりました。
こんな初歩的なミスだったとは、お恥ずかしい限りです。

しち様、ご丁寧にご教示いただきありがとうございます。教えていただいたクラスセレクタの技も今後活用させていただきます。

>>3様も助けていただきありがとうございます。最初のご指摘の時にすぐにアプリ再起動まで試さずに失礼しました。

ありがとうございます。
09/19 13:13
返信
5 しち SOG03
>>4
念のためなのですが、キャッシュクリアはChromeアプリ内で行っていますか?
▼参考
キャッシュと Cookie の消去 - iPhone と iPad - Google アカウント ヘルプ

キャッシュと Cookie の消去 - iPhone と iPad - Google アカウント ヘルプ

Chrome などのブラウザを使用すると、ウェブサイトの情報がキャッシュや Cookie に保存されます。こうしたキャッシュや Cookie を消去すると、サイトの読み込みや表示形式に関する問題の一部が解決します。 キャッシュと Cookie を削除する前に キャッシュと Cookie を削除すると、ブラウザで Google アカウントからログアウトすることがあります。再度ログインで

support.google.com

自分はAndroidなのですが、以前「クリーナーアプリ等でスマホのキャッシュクリアを行ったのに、Chromeだけキャッシュが削除されなかったらしく、古いCSSが読み込まれてしまう」ということがありました。
そのときは上記のようにChromeアプリ内でキャッシュ削除の操作をしたところ、新しいCSSが無事読み込まれました。

お話を聞く限りでは、「古いCSSが読み込まれてしまっている」以外の原因がどうにも思い当たらないので念のため……。


上記の方法でも解決してないとしたら、
今お使いのクラスセレクタ「.mincho」を活用して、そのゴシック体になってしまう部分にも明朝体を指定してみるのも手かと……。

一部だけゴシック体のまま、というのは<ruby>・<span>要素ですか?

それでしたら親要素に「mincho」のクラスセレクタがついている<ruby><span>だけにフォント指定をするなどどうでしょうか?
例)━━━━

.mincho ruby,
.mincho span{
font-family:serif;
}

━━━━━━
▼参考
CSSでセレクタを自由に操る!便利な指定方法をわかりやすく解説! | ZeroPlus Media

CSSでセレクタを自由に操る!便利な指定方法をわかりやすく解説! | ZeroPlus Media

CSSのセレクタは、さまざまな指定方法があります。 セレクタの指定方法をマスターすると、具体的に「あの要素だけに指定する」ことが容易にできるようになります。 多くのパターンがありますが、一度覚えてしまえばとても便利です。 一緒に学習していきましょう! きっとあなたもCSSの理解が深まることでしょう。

zero-plus.io


この指定の仕方なら、「親要素に『mincho』クラスが付与されているときのみ子要素の<ruby><span>を明朝体にする」ことができます。
09/19 12:31
返信
4 Anonymous iPhone
>>3
はい。念のため今もう一度削除してみまして、アプリバージョンアップもしましたが、やはりiPhoneの Chromeで見ると明朝体の中にゴシック体が残ってしまいました。
09/18 23:42
返信
3 Anonymous iPhone
>>2
変更後に1度、キャッシュの削除はされましたか?
09/18 23:08
返信
2 Anonymous iPad
>>1
トピ主です。記事の修正ができず、何度も投稿して申し訳ありません。

font-familyを * からbody に移動させて直ったと思いましたが、デバイスによっては直っておらず、一部だけゴシック体が残ったままとなっていました。
確認ができた動作は以下の通りです。
メジャーな媒体で差異をなくす方法はありますでしょうか。

iPad / Safari : OK
iPad / Chrome : OK
iPhone / Safari : OK
iPhone / Chrome : NG
09/18 13:44
返信
1 Anonymous iPad
>>0
すみません… ゴシック体の設定を * ではなく body に移動させたらアッサリ解決しました…。
* にはフォントを設定するのは非推奨なのでしょうか…知りませんでした…
お騒がせしました。
09/18 13:20
返信