- ベストアンサー
CSSでのフォントの種類指定
質問させて下さい。 とある数ページにわたるWebサイトを作成しました。 完成した後で、フォントの種類を指定する必要がでてきたので CSSを以下のように入れていきました。 ・↓CSSファイルを作成 div{ font: 100% "ＭＳ Ｐゴシック", "Osaka", sans-serif;} ・各ページでCSSを呼び出し<body>の後ろに<div>と</body>の前に </div>を入れ、全体をくくりました。 ほとんどのページではうまく機能したのですが、トップページだけ なぜか機能しません。。。 何かページ中にあると駄目なタグなどがあるのでしょうか。 分かりづらい質問かと思いますが、ご回答よろしくお願いします。
- sakuran99
- お礼率41% (59/143)
- CSS
- 回答数6
- ありがとう数2
- みんなの回答 （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>直下に直接書いた テキストにすらフォントが反映されてないんです。。。。 ソースは私の物ではないので控えさせてください。
関連するQ&A
- CSSでbodyに入ってるこの意味は何でしょうか？
あるサイトのCSSのbodyのfont sizeに 12px/1.22 "Osaka", "ＭＳ Ｐゴシック", Arial, sans-serif と、記述していましたが /1.22とは何を意味してるのでしょうか？
- ベストアンサー
- HTML
- cssの指定の横幅よりテキストがはみ出てしまう
cssの指定の横幅よりテキストがはみ出てしまう 下記のとおり指定したのですが、winIE6.0だとwidthに収まるのに、FirefoxやNetscape 7.0 だと外にはみ出てしまい、横幅内に改行してくれません。 すみませんが、教えて下さい。 tate.css--------------------- #question { margin: 10px; padding: 3px; width: 560px; } #question dl{ margin: 10px; } #question dt{ color: #90B77F; font: 0.8em "MS ゴシック", Osaka, sans-serif; } #question dd{ font: 0.8em "MS ゴシック", Osaka, sans-serif; margin-left: 30px; } #question p { margin-bottom: 1em; font: 0.8em "MS ゴシック", Osaka, sans-serif; } --------------------------------- test.htm--------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis" /> <title>試し</title> <link href="tate.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="question"> <dl> <dt>質問：○○○○○○○○○○○○○○○○○○○○</dt> <dd>回答：○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○ ○○○○○○○○○○○○○○○○○○</dd> </dl> </div> </body> </html>
- ベストアンサー
- HTML
- 外部CSSでフォントの指定
自分のサイトの一部のページでは外部CSSで文字の色やフォントなどを設定しているのですが、 FireFoxでは反映されません。IEでは思い通りです。 調べてみて外部CSS、style.cssの改行をなくしたり先頭に@charset "shift_jis";を記述してみました。 そしたらなんとうまく文字色は変わりました。 しかしフォントは英字が"Verdana"にならないのです。 すべて"ＭＳ ゴシック"になってしまいます……IE、FireFox両方です。 私はＭＳ ゴシックの英字が好きではないので、Verdanaなってくれればうれしいのですが……。 ちなみに、フォントの部分は font-family: "Verdana", "Arial", "sans-serif", "ＭＳ ゴシック"; こんなふうに記述しています。 @charset "shift_jis";の記述を消して、 .htaccessが使えるサーバーなのでAddType text/css .cssを記述してみましたが変わりません。 どなたか大抵のブラウザで日本語をＭＳ ゴシック、英字をVerdanaにする外部CSSの書き方を教えてください。
- ベストアンサー
- CSS
- CSSのフォント指定
現在bodyに以下の設定をしています。 font-family: verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",Sans-Serif; 実際にヒラギノ角ゴ Pro W3をインストールしてサイトを見るとアンチエイリアスが 掛かっていないようで非常に文字が見づらいです。 ※環境はWinXPでIE8 上記の設定をしたのも以前に調べてみた際に定番のような指定に見受けられたので このような設定にしたのですが今の定番ってありますか？ また、こんな設定にしているなどというアドバイスもいただけます嬉しいです！ 宜しくお願いします。
- 締切済み
- HTML
- livedoorblog css フォント
cssの一部不適応についての対策を教えて下さい。 初めに申しておきますとかなりの素人です。 cssをみて、body….font….とは？どこ？と試しに変更してみてなんとかやっている状態です。 表題にあるとおりlivedoorにてblogをしており、この度ブログ内の全フォントをメイリオに変更致しましたが記事の本文のみ反映されません。 他のブログ名・記事名・サイドバー・ページ数・次へ・コメント等には反映致しました。 やったことといえばcssから”font-family”を探し出し、すべての頭にmeiryo,"メイリオ"を追加しました。 追加した部分は body { line-height: 1.3; background: #fff; color: #333333; font-size: 80%;/*サイドバー？全体？*/ font-family: meiryo,"メイリオ","Arial","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif; } h1,h2,h3,h4,h5,h6 { font-family: "meiryo","メイリオ", "Hiragino Mincho Pro","ヒラギノ明朝 Pro W3","ヒラギノ角ゴ Pro W3","ＭＳ Ｐ明朝",serif; } div#introductionOuter h1 a:link, div#introductionOuter h1 a:active, div#introductionOuter h1 a:visited { color: #333; font-weight: normal; font-size: 100%;/*ブログタイトル*/ font-family: "meiryo","メイリオ","Arial","Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif; text-decoration: none; } div.archiveTitleOuter h2 { margin-bottom: 50px; padding: 15px 0; border-top: dotted 1px #666; border-bottom: dotted 1px #666; font-family: "meiryo","メイリオ"," Arial","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif; font-weight: normal; text-align: center; } div#article-options h3 { font-family: "meiryo","メイリオ","Arial","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","ＭＳ Ｐゴシック",sans-serif; font-weight: normal; } の5箇所です。 スタイルはExtensible Gallery (プレーン) CSSを使用しております。 本文はMS Pゴシックが適応されています。 過去の質問等調べたところ文字コードの指定？@charset "utf-8";をcssの最後に追加は反映せず。 body a による全体？の指定をcssの最後に追加はやってみましたが反映せず。 普段はクローム（シークレットモード）を使用しておりますが、サイドバーなどは反映されていることよりブラウザ側の設定ではないですよね？念のため設定のフォントカスタマイズよりメイリオに変更してみましたがコレも反映せず。 IEでの表示もクロームと同様。 上記が試してみたことです。 原因、対策がお解かりの方がおられましたらご教授下さい。 また、提示情報に不足があれば追加致しますので宜しくお願い致します。
- ベストアンサー
- ブログ
- font-familyの使い方
font-familyに正しい使い方ってあるんでしょうか？ 私、ブログとサイト（共にFC2)やってるんですけど2種類（3種類？）のfont-familyを使ってるんです。 これって閲覧者にとっては見づらいものなのでしょうか。 ブログの方では、bodyに font-family : "ヒラギノ角ゴ Pro W3","Hiragino Kaku GothicPro","Osaka","verdana","arial", sans-serif; を使い、記事の本文にだけ font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif; を使ってます。 サイトでは、bodyに font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',Osaka,sans-serif; を使い、メニュー部（英語）には font-family: Georgia,Helvetica,Arial; を使い、小説部分では説明（感想）部分はbodyのままですが本文では font-family: 'ＭＳ Ｐゴシック', sans-serif; を使ってます。 フォントサイズについては、基本11pxですが本文だけ12pxにしてます。 日本語の部分はsans-serifだしいいかぁと思ってるんですが、やはり見にくいものなのでしょうか？ こちらの意図としては本文だけ見やすかったらいい、と思っています。 ふと疑問に思ったことなので、暇な時に回答して頂ければ幸いです。
- ベストアンサー
- HTML
- CSSで14px/1.4の部分の記述は正しい？
とあるサイトのCSSを見ていたら次のような記述がありました。 font:normal normal normal 14px/1.4 "ＭＳ Ｐゴシック", "Osaka", "sans-serif"; normalが3つ続くのも謎ですが、フォントのサイズと思える部分で分数のようにして使われています。 14px/1.4で10pxのこと？ このような記述はできるのでしょうか？ そのサイトはCSSを使いこなせるような人が作っているようでデザインや文字などはとても読みやすくできています。
- ベストアンサー
- HTML
- CSSでエラーが出ました
CSS初心者です、宜しくお願いします。 CSS Validatorで検証した結果 文法解析エラーが発生しましたtext04 p・・・ @layout-grid-line : 1.8; text04 p・・・Parse error - Unrecognized } と結果が出ました、 以下CSS記述 .text04{ font-size : 16px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; width : 662px; padding-left : 10px; } .text04 p{ font-size : 14px; font-family: Arial,"ＭＳ Ｐゴシック","MS UI Gothic",Osaka,Sans-Serif; line-height : 1.8; color : #666666; background-color : #ffffff; margin-left : 0px; layout-grid-line : 1.8; } どなたかご指導ください、お願いします。
- ベストアンサー
- HTML
- CSSでのフォントの指定。
ホームページを作成しているのですが フォントに関して困っています。 フォントの指定をCSSでしているのですが、 VerdanaとMS Pゴシックを指定すると、 ブラウザによっては、英数の文字がVerdanaのフォントで表示されません。 どのように指定すれば日本語はMS Pゴシック。 英数はVerdanaという風に表示されるのでしょうか。 日本語のフォントを変えれば出来るのでしょうか。
- ベストアンサー
- HTML
- tableの位置がIEとその他ブラウザでずれる
http://allergy.6.ql.bz/tokusyu.html 上記サイトのtableの位置がIEとその他ブラウザでずれてしまいます。 http://css-happylife.com/archives/2007/1025_1325.php 上記のような情報があるのですが、このページの場合どのCSSに入れればよいのでしょうか？ またこれはいったいどんな原理なのでしょうか？ また下記のようにすればIEのバグの問題を解決できると聞いたのですが、これを入れれば解決できるのでしょうか？ *{ margin:0; padding:0; font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; border:none;} font:normal normal normal 100%/1.3 "ＭＳ Ｐゴシック","Osaka",sans-serif; この記述の意味は何なのでしょうね？
- ベストアンサー
- CSS
お礼
ああ・・・・ 色だけ変わりました。。。。これはおかしいって事でよく見ると 文字コードの指定がトップページだけ違っていました。 euc-jpからshift-jisにすると解決しました。 文字コードも関係あるんですね。あとテーブルを使っていても body{ font:～; color:#ff0000;}で全部反映されるようです。 このあたりはよく分かりませんが、とりあえず解決・・・かな？ もう少しページチェックして寝ます！ 皆様、ありがとうございました！！！！！！！！！