- ベストアンサー
CSSでのフォントの種類指定
質問させて下さい。 とある数ページにわたるWebサイトを作成しました。 完成した後で、フォントの種類を指定する必要がでてきたので CSSを以下のように入れていきました。 ・↓CSSファイルを作成 div{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;} ・各ページでCSSを呼び出し<body>の後ろに<div>と</body>の前に </div>を入れ、全体をくくりました。 ほとんどのページではうまく機能したのですが、トップページだけ なぜか機能しません。。。 何かページ中にあると駄目なタグなどがあるのでしょうか。 分かりづらい質問かと思いますが、ご回答よろしくお願いします。
- みんなの回答 （6）
- 専門家の回答
質問者が選んだベストアンサー
＞明朝をデフォルト表示（Webページで指定したフォント優先設定）にしているブラウザでプレビューを見ましたが、トップページ以外は全て指定フォントで表示されておりました。 そうでしたか。 ＞やはりこの情報量ではムリでしょうか。 そうですね。 問題のトップページの一番上から一番下まで、全部提示するのが一番かもしれません。 body,th,td{ font:～; color:#ff0000;} を付け足しても変わりません？
その他の回答 (5)
- abril
- ベストアンサー率69% (388/560)
> 文字コードの指定がトップページだけ違っていました。 > euc-jpからshift-jisにすると解決しました。 > > 文字コードも関係あるんですね。 あの…CSSで日本語でフォント名を定義していたら、それは勿論関係ありますよ…。 CSSファイルのエンコーディングはShift_JISになっていたのだと思いますが、仮にfont-familyの指定が { font: 100% sans-serif; } と英語のフォント・グループ名だけになっていれば左右されないと思いますが、本件の様に { font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif; } ダブル・コーテーションでくくった個別フォント名が「日本語」で表記されていたら、CSSとHTMLのエンコーディングが合ってなければそれは無効となってしまいます。 日本語はやっかいなので、文字コード／エンコーディングという事は十分注意して下さい。
お礼
なるほど・・・勉強になりました！ ありがとうございます。
- goldfox
- ベストアンサー率49% (123/249)
divにフォント指定したら、body直下に書いたテキストにフォント指定が反映されないのは、当たり前では？ さらに、補足で書かれたソースには、bodyセレクタにフォント指定がしてあるものの、tableを使っていながら、tdに対するフォント指定がされていません。 divを使わず、body直下にテキスト＋tableも利用されるなら、 body{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;} ではなく body,th,td{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;} としなければいけないのですが、これでもだめですか？ > 気になるのは、下記の○○の部分のテキストでさえ反映されない事です。 とのことですが、何を基準に反映されないと解釈しましたか？ css指定が上記body{}しかないなら、デフォルト的に、さほど変わらない表示になるはずですが。
補足
>body,th,td{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;} としなければいけないのですが、これでもだめですか？ No2様にご指摘頂いたときに試してみました。 >> 気になるのは、下記の○○の部分のテキストでさえ反映されない事です。 >とのことですが、何を基準に反映されないと解釈しましたか？ 明朝をデフォルト表示（Webページで指定したフォント優先設定）にしているブラウザでプレビューを見ましたが、トップページ以外は全て指定フォントで表示されておりました。 トップページ以外のページ内の使用ソースも、トップページとほぼ同じだと認識しています。なので混乱しています。 やはりこの情報量ではムリでしょうか。
- abril
- ベストアンサー率69% (388/560)
> 試してみましたが、やはりトップページのみムリでした。 > 気になるのは、下記の○○の部分のテキストでさえ反映されない事です。 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"> となります。
補足
>ANo.2の回答者様の定義をCSSに追加しても、ですね？ はい、全て試してみました。 CSSファイルとページの階層は全て同じです。 せっかく丁寧な図まで頂いたのにすみません。
- goldfox
- ベストアンサー率49% (123/249)
body{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;} で、divは不要になるのでは。 tableなどには継承されませんので、 反映されない要素にも指定してやるといいです。 div,th,td{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;}
補足
>反映されない要素にも指定してやるといいです 試してみましたが、やはりトップページのみムリでした。 気になるのは、下記の○○の部分のテキストでさえ反映されない事です。 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
- ベストアンサー率69% (388/560)
> div{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;} CSSで定義したのは、上記だけですか？ > ・各ページでCSSを呼び出し<body>の後ろに<div>と</body>の前に</div>を入れ、全体をくくりました。 判断素材が少なすぎますが、<div>の子要素に、fontのプロパティが継承されていない要素があるのではないかと思います。「なぜか機能し」ない「トップページ」のソースを提供して下さい。
補足
>CSSで定義したのは、上記だけですか？ はい <div>の子要素に、fontのプロパティが継承されていない要素があるのではないかと思います。「なぜか機能し」ない「トップページ」のソースを提供して下さい。 継承されていない要素があるというか、<body>直下に直接書いた テキストにすらフォントが反映されてないんです。。。。 ソースは私の物ではないので控えさせてください。
お礼
ああ・・・・ 色だけ変わりました。。。。これはおかしいって事でよく見ると 文字コードの指定がトップページだけ違っていました。 euc-jpからshift-jisにすると解決しました。 文字コードも関係あるんですね。あとテーブルを使っていても body{ font:～; color:#ff0000;}で全部反映されるようです。 このあたりはよく分かりませんが、とりあえず解決・・・かな？ もう少しページチェックして寝ます！ 皆様、ありがとうございました！！！！！！！！！