ようこそ ゲスト さん、新規登録（無料）して気になる疑問を解決しませんか？
はじめての方へ｜ヘルプ｜FAQ
スポンサーサイト（詳細）

質問
質問者：sakuran99 CSSでのフォントの種類指定
困り度：
  • すぐに回答を！
 質問させて下さい。

とある数ページにわたるWebサイトを作成しました。
完成した後で、フォントの種類を指定する必要がでてきたので
CSSを以下のように入れていきました。

・↓CSSファイルを作成
div{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}

・各ページでCSSを呼び出し<body>の後ろに<div>と</body>の前に
　</div>を入れ、全体をくくりました。

ほとんどのページではうまく機能したのですが、トップページだけ
なぜか機能しません。。。
何かページ中にあると駄目なタグなどがあるのでしょうか。
分かりづらい質問かと思いますが、ご回答よろしくお願いします。
質問投稿日時：08/03/28 19:54
質問番号：3902763
この質問に対する回答は締め切られました。
最新から表示｜回答順に表示｜良回答のみ表示

回答

良回答10pt
回答者：abril > 文字コードの指定がトップページだけ違っていました。
> euc-jpからshift-jisにすると解決しました。
>
> 文字コードも関係あるんですね。

あの…CSSで日本語でフォント名を定義していたら、それは勿論関係ありますよ…。
CSSファイルのエンコーディングはShift_JISになっていたのだと思いますが、仮にfont-familyの指定が
{
font: 100% sans-serif;
}
と英語のフォント・グループ名だけになっていれば左右されないと思いますが、本件の様に
{
font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;
}
ダブル・コーテーションでくくった個別フォント名が「日本語」で表記されていたら、CSSとHTMLのエンコーディングが合ってなければそれは無効となってしまいます。
日本語はやっかいなので、文字コード／エンコーディングという事は十分注意して下さい。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/03/29 03:45
回答番号：No.6
この回答へのお礼なるほど・・・勉強になりました！
ありがとうございます。

回答

良回答20pt
回答者：goldfox ＞明朝をデフォルト表示（Webページで指定したフォント優先設定）にしているブラウザでプレビューを見ましたが、トップページ以外は全て指定フォントで表示されておりました。
そうでしたか。

＞やはりこの情報量ではムリでしょうか。
そうですね。
問題のトップページの一番上から一番下まで、全部提示するのが一番かもしれません。
body,th,td{ font:〜; color:#ff0000;}
を付け足しても変わりません？
種類：補足要求
どんな人：一般人
自信：参考意見
回答日時：08/03/29 02:49
回答番号：No.5
この回答へのお礼ああ・・・・

色だけ変わりました。。。。これはおかしいって事でよく見ると
文字コードの指定がトップページだけ違っていました。
euc-jpからshift-jisにすると解決しました。

文字コードも関係あるんですね。あとテーブルを使っていても
body{ font:〜; color:#ff0000;}で全部反映されるようです。
このあたりはよく分かりませんが、とりあえず解決・・・かな？

もう少しページチェックして寝ます！
皆様、ありがとうございました！！！！！！！！！

回答

 
回答者：goldfox divにフォント指定したら、body直下に書いたテキストにフォント指定が反映されないのは、当たり前では？
さらに、補足で書かれたソースには、bodyセレクタにフォント指定がしてあるものの、tableを使っていながら、tdに対するフォント指定がされていません。
divを使わず、body直下にテキスト＋tableも利用されるなら、
body{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}
ではなく
body,th,td{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}
としなければいけないのですが、これでもだめですか？

> 気になるのは、下記の○○の部分のテキストでさえ反映されない事です。
とのことですが、何を基準に反映されないと解釈しましたか？
css指定が上記body{}しかないなら、デフォルト的に、さほど変わらない表示になるはずですが。
種類：補足要求
どんな人：一般人
自信：参考意見
回答日時：08/03/29 02:21
回答番号：No.4
この回答への補足>body,th,td{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}
としなければいけないのですが、これでもだめですか？

No2様にご指摘頂いたときに試してみました。


>> 気になるのは、下記の○○の部分のテキストでさえ反映されない事です。
>とのことですが、何を基準に反映されないと解釈しましたか？

明朝をデフォルト表示（Webページで指定したフォント優先設定）にしているブラウザでプレビューを見ましたが、トップページ以外は全て指定フォントで表示されておりました。
トップページ以外のページ内の使用ソースも、トップページとほぼ同じだと認識しています。なので混乱しています。

やはりこの情報量ではムリでしょうか。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：abril > 試してみましたが、やはりトップページのみムリでした。
> 気になるのは、下記の○○の部分のテキストでさえ反映されない事です。

ANo.2の回答者様の定義をCSSに追加しても、ですね？
ソースが開示できない、ということですのでこうなると想像するしかありませんが、もしかしてトップページの<head>内で参照しているCSSのパスが間違っていたりしませんか？
仮に、ディレクトリ構造が以下の様に（トップページ以外のコンテンツは、全て第2階層にある）なっているとします。
----------------------------------------------------------------------
|--index.html
|--css
|　　|--hogehoge.css
|--2nd_level_folder-1
|　　|--2nd_leve_contents-1.html
|--2nd_level_folder-2
|　　|--2nd_leve_contents-2.html
（以下同様）
----------------------------------------------------------------------
その場合、第2階層にあるHTMLファイルから参照する場合は：
<link rel="stylesheet" href="../css/hogehoge.css" type="text/css" media="all">
となりますが、index.htmlは階層が1つ上になるので：
<link rel="stylesheet" href="./css/hogehoge.css" type="text/css" media="all">
又は
<link rel="stylesheet" href="css/hogehoge.css" type="text/css" media="all">
となります。
種類：アドバイス
どんな人：専門家
自信：参考意見
回答日時：08/03/29 02:13
回答番号：No.3
この回答への補足>ANo.2の回答者様の定義をCSSに追加しても、ですね？

はい、全て試してみました。
CSSファイルとページの階層は全て同じです。
せっかく丁寧な図まで頂いたのにすみません。
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：goldfox body{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}
で、divは不要になるのでは。

tableなどには継承されませんので、
反映されない要素にも指定してやるといいです。
div,th,td{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}
種類：アドバイス
どんな人：一般人
自信：参考意見
回答日時：08/03/28 22:41
回答番号：No.2
この回答への補足>反映されない要素にも指定してやるといいです

試してみましたが、やはりトップページのみムリでした。
気になるのは、下記の○○の部分のテキストでさえ反映されない事です。

CSS部分↓
body{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}


HTML部分↓
<body>
○○○○○
<img src=******************>
<br>
<table width="200" border="0">
<tr>
<td align="left" valign="top" bgcolor="#FFFFFF">
　　　　　　<font color="#006600">テストテストテスト<br />
こんにちは。こんにちは。こんにちは。</font>　
<a href="​http://www.test.html">​詳細はこっち</a>
</td>
</tr>
</table>
</body>
この回答へのお礼この回答にお礼をつける(質問者のみ)

回答

 
回答者：abril > div{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}
CSSで定義したのは、上記だけですか？

> ・各ページでCSSを呼び出し<body>の後ろに<div>と</body>の前に</div>を入れ、全体をくくりました。

判断素材が少なすぎますが、<div>の子要素に、fontのプロパティが継承されていない要素があるのではないかと思います。「なぜか機能し」ない「トップページ」のソースを提供して下さい。
種類：補足要求
どんな人：専門家
自信：参考意見
回答日時：08/03/28 20:14
回答番号：No.1
この回答への補足>CSSで定義したのは、上記だけですか？
はい

<div>の子要素に、fontのプロパティが継承されていない要素があるのではないかと思います。「なぜか機能し」ない「トップページ」のソースを提供して下さい。

継承されていない要素があるというか、<body>直下に直接書いた
テキストにすらフォントが反映されてないんです。。。。
ソースは私の物ではないので控えさせてください。
この回答へのお礼この回答にお礼をつける(質問者のみ)
最新から表示｜回答順に表示｜良回答のみ表示
スポンサーサイト（詳細）
このページのトップへ