• ベストアンサー

【フォント】記述したCSSが反映されない

ログを検索しましたが同様の質問は無いようなので投稿させて頂きます。 先日PCを買い替えましてXPからVistaへと移行しました。 しかし新しいPCで自分のサイトを見てみると、CSSでフォントをTahomaに指定していたページの文章が何故かゴシック体で表示されています。 (サイトは旧PCでビルダー7を利用して作成したものです) 古いPCからHTMLのデータを移動し早速ソースを確認、上書き保存等してみましたがフォントはゴシック体のまま。 明朝なども試しましたが反映されてくれません。 やはりOSやブラウザの変更が原因なのでしょうか。アドバイスをよろしくお願いします。 ↓HTMLソースの一部を掲載します <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <meta name="robots" content="noindex,nofollow"> <STYLE type="text/css"> <!-- body { scrollbar-face-color: #000000; scrollbar-highlight-color: white; scrollbar-shadow-color: white; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: white; scrollbar-track-color: #000000; scrollbar-darkshadow-color: #000000; } --> </STYLE> <style type="text/css"> <!-- a{ text-decoration:none; } --> </style> <style type=text/css> <!-- body,td { margin-top : 50pt; margin-left : 90pt; margin-right : 90pt; margin-bottom : 40pt; font-size :15px; font-family :'Tahoma'; } --> </STYLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 7.0.0.0 for Windows"> <META http-equiv="Content-Style-Type" content="text/css"> <META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900"> <TITLE>(仮)</TITLE> </HEAD>

  • HTML
  • 回答数3
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
noname#56882
noname#56882
回答No.3

似たような質問が過去ログにありました。 http://oshiete1.goo.ne.jp/qa2971667.html 質問者様が文字を日本語で書かれているのか、英語で書かれているのか不明ですが 『Internet Explorer7ではTahomaなどのフォントは日本語対応していない文字』 とありました。 [Internet Explorer 7 で web サイトを参照すると以前のバージョンと比べて日本語フォント レイアウトが異なる] http://support.microsoft.com/kb/934462/ja 的外れなアドバイスでしたら申し訳ありません。

novemer
質問者

お礼

回答ありがとうございます! (似た質問あったんですね、見落としていました…) IE7でTahomaは日本語未対応とは全く知りませんでした。 細部を修正してTahomaから明朝にしてみたら問題なく反映されました。 本当に助かりましたありがとうございます。

その他の回答 (2)

  • colorbx
  • ベストアンサー率26% (4/15)
回答No.2

Vistaの中にTahomaフォントが入っていないとか・・・ 一応フォントフォルダを確認してみるといいかもしれません。 (標準で入っているようなのでその可能性は低いかもしれないです・・・) あと思いつくのはブラウザによるものですかね・・・ xpの時とVistaでブラウザの種類やバージョンは変えていますか? どちらも的確でなかったらすいません。

novemer
質問者

お礼

回答ありがとうございます。 解決できました。

  • ran_2323
  • ベストアンサー率43% (32/73)
回答No.1

font-family :'Tahoma'; を「引用符('')」で囲っているのが原因ではないでしょうか??日本語のフォント名や、フォント名に半角スペースなどが入っているものには「引用符('')」をつけますが、見たとこ必要ないのではと思いますが…。 今までどのブラウザで確認をされていたのでしょう??IE6は結構大雑把に記述を見てくれますが、IE7はIE6より正確にタグを判断しますから、正しく書かないと思い通りになってくれません。 それと、余計なお世話かもしれませんが、スタイルシート記述を一つにまとめられたほうが見やすいのではと思います。 <style type="text/css">~</style>の記述が何度も出てきてみずらいので、全部まとめてみやすくしてみてはいかがでしょうか?? あと、<style type="text/css">~</STYLE>などの小文字と大文字の混同も気になりますね。まぁ、これは参考までに。

novemer
質問者

お礼

早速の回答ありがとうございます。 引用符を取ってみましたが変化はありませんでした…。 以前はIE6を使用していました。 >スタイルシート記述を一つにまとめられたほうが見やすい そういう見方もあるんですね。ありがとうございます。 自分はずっとこの形式でやってきたので見づらいなんて欠片も思ってませんでしたw

関連するQ&A

  • スクロールバーが反映されない

    HP作成まったくの初心者です。 今つまづいているのが、スクロールバーの色が 変更できないことです。 IEは「Internet Explorer 6 Service Pack 1 (Windows XP SP1) 」です。 いちおう、タグを載せます。 初心者なのでめちゃめちゃだと思いますので お恥ずかしいのですが、よければご教授ください。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <META http-equiv="Content-Script-Type" content="text/javascript"> <META http-equiv="Content-Style-Type" content="text/css"> <title>☆</title> <script type="text/javascript"> <!-- function jikoku() { dd = new Date(); document.F1.T1.value = dd.toLocaleString(); window.setTimeout("jikoku()", 1000); } // --> </script> <STYLE type="text/css"> <!-- body,td { font-size : 12px; color : #bc8f8f; font-family : Verdana; line-height : 15pt; } --> </STYLE> <style type="text/css"> <!-- a{ text-decoration : none; } a:link{ color : #ffb9d4; } a:active { color : #69b4; } a:visited{ color : #ffd9e4; } a:hover{ color : #FFd9b4; position : relative; top : 2px;} --> </style> <STYLE type="text/css"> <!-- body { scrollbar-face-color:#ffffff; scrollbar-track-color: #ffffff; scrollbar-arrow-color:#ffb9d4; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-3dlight-color:#ffffff; scrollbar-darkshadow-color:#ffffff; } --> </STYLE> </head> <body> <BODY background=img/wall.gif> </body> </html>

    • ベストアンサー
    • HTML
  • CSSが反映されません

    勉強不足は承知ですが、もうどうにもお手上げ状態です。 質問させてください。 CSSを勉強しているのですが、反映されません (本や、サイトのサンプルとおり記述しても、です) (タグ、スペルの間違いがないかは10回以上確かめています) (CSSサイトのサンプルをクリックすると、それは表示されます) ●ヘッダー内に指定すると、反映されない ○例  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- p.ehon{ font-size:100px; color:red; } --> </HEAD> <BODY> <p.ehon> 「絵本」の色は赤色です </p> </BODY> </HTML> ・・・結果・・・ ブラウザには標準フォント(色、サイズ)で ”「絵本」の色は赤色です” と表示される 文字色は font-color:red font-color:#rbg番号 などしてみても、黒のまま 文字サイズも30px、50px、100pxとしてみているが、結果は同じ文字サイズ (標準)になる ○<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN"> <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html;charaset=shift_JIS"> <meta http-equiv="Content-Type" content="tet/css"> <style type="text/css"> <!-- body{color:#CCFFCC} h1{color:#996633} --> </HEAD> <BODY> <h1> 絵本の色は赤色です </h1> </BODY> </HTML> ・・・結果・・・ ブラウザになにも表示されない ●BODY内指定 ○例 <div style="color:red"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズ標準で、文字色赤で表示されました ○例 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ ブラウザに何も表示されませんでした ○2回目 <div style="color:red;font-size:50px;"> 絵本の色は赤色です </div> ・・・結果・・・ フォントサイズそれなりの大きさに。文字色は赤で表示されました ○3回目 全く同じタグでブラウザには何も表示されず・・・・ ///////////////////////////////////////////////////////////// いったい何が問題なのでしょうか。 こんなところで足止めされているのが悲しいです・・・

  • 外部CSSをかくには。

    HPのページひとつひとつにいちいちスタイルシートをかいていくのが 面倒になったので外部CSSでまとめてしまおうと 思ったのですが、上手くいきません。 ちなみにこうかいております↓ <STYLE TYPE="text/css"> <!-- BODY {  letter-spacing:7px;  line-height:15pt; } --> </STYLE> <style type="text/css"> <!-- body { scrollbar-face-color: #FF9900; scrollbar-highlight-color: #ffffff; scrollbar-shadow-color: #000000; scrollbar-3dlight-color: #000000; scrollbar-arrow-color: #000000; scrollbar-track-color: #ff9900; scrollbar-darkshadow-color: #ffffff; } --> </STYLE> <STYLE TYPE="text/css"><!--A{text-decoration:none;}A:hover{text-decoration:underline overline;}--></STYLE> <style type=text/css><!--a{text-decoration:none;}--></style> <style><!--BODY{font-size:8pt;}--></STYLE> どこか悪い点がありましたら教えてください。

    • ベストアンサー
    • HTML
  • CSSでフォントが適用されない

    CSSでレイアウトを作成しました。 フォントはMS Pゴシックを指定しています。 CSSを外部にしましたらフォントがMS Pゴシックではなく、明朝っぽくなっています。他のCSSは適用されているのにフォントだけが適用されていません。 ※外部CSSにする前はMS Pゴシックになっています。 html ------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link href="style/style.css" rel="stylesheet" type="text/css" media="all"> <title>無題ドキュメント</title> ------------------------------------------------- 外部CSS ------------------------------------------------- @charset "utf-8"; html { height: 100%; } body { font-family:"MS Pゴシック", "Hiragino Kaku Gothic Pro W3", "ヒラギノ角ゴ Pro W3", "Osaka"; padding: 0px; margin: 0px; font-size: 0.8em; } ------------------------------------------------- どこが間違っておりますでしょうか? 宜しくお願いします。

    • ベストアンサー
    • HTML
  • cssが反映されません・・・

    HP初心者です。現在ホームページビルダーで編集してます。 もともとあるHPを引き継いで編集しているのですが、2カラムcssに挑戦しました。http://css.uka-p.com/index_2column.shtml やってみたのですが、反映されません。プレビューにするとエラー検出になり、強制的に<body>以下に位置づけられて、ただのテキストとしてHP上にずらずら文字が出てきてしまいます。左右も反映されてません。 ちなみに、こんな感じで書き込みました。 <head> <meta name="ROBOTS" content="all" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="style.css" type="text/css" /> body {text-align:center; } outline { width:600px; text-align:left; margin:0 auto; } .outline-margin { margin:0 10px; } .contents{width:350px;float:left;} .menu{width:240px;float:right;} .c-both{clear:both;} </head> link以下のbodyからが私の書き込みです。 宜しくお願いします。

  • CSSの記述

    HTMLで普通のテキストのサイズを固定したいのですが、 うまくいきません。 何が間違っているのでしょうか。 一部のHTMLだけ、リンクの下線をはずしたいので、 HTMLに <LINK REL="stylesheet" HREF="css/style_win.css" TYPE="text/css"> <STYLE TYPE="text/css"> <!-- A { text-decoration: none; font-size: 10pt;} --> </STYLE> と記述。 こちらの方は大丈夫です。 だめなのは外部 css/style_win.css に body { font-size:10pt } と書いたほうがまったく制御していません。 初心者で、本もたくさん調べましたが わかりません。 どうかお願いいたします。

    • ベストアンサー
    • HTML
  • CSS3の記述の一部が反映されない。

    職業訓練のグループ課題で、ウェブサイトを造っているのですが、CSS3の記述が反映されない所がありまして、marginやpaddingでやっても無理でした。「.」と「#」の違いかなとも思ったのですが全然反映されませんでした。 divタグも考えられる並べ方を試したのですが実行されませんでした。 不躾な質問ですがよろしくお願いします。 問題点 HTML <div id="copyright">をmarginを使い真ん中に、fontを白文字の太文字に装飾 結果 copyrightだけ反映されない。 以下ソースコード ○HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="keywords" content="chat noir,シャノワール,神奈川,箱根,生活雑貨,雑貨,木製、布ナプキン,タオル,かご,ほうき,道具,暮らし,ナチュラル,ハンドメイド,ネットショップ,ヘアゴム,黒猫,インテリア"> <meta name="description" content=" chat noirはフランス語で黒猫の意味です。自然素材を使った布ナプキン、ヘアゴム、ポーチなどのハンドメイド雑貨や、暮らしにちょっぴり彩りを添えるシンプルナチュラルな生活雑貨を取り扱っています。"> <title>【chat noir】生活雑貨と自然素材を使ったハンドメイド雑貨のお店</title> <style>/*CSS*/</style> <script>/*JavaScript コード*/</script> <link rel="stylesheet" href="css/cahtnoir.css" type="text/css" media="all"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"></script> <style type="text/css"></style> </head> <body id="body"> <div id="footer"> <div class="inner"> <ul> <li><a href="index.html">TOPへ戻る</a></li> </ul> <div id="copyright">Copyright Chat noir 2013 All Rights Reserved.</div> </div><!--inner--> </div><!--footer--> </body> </html> ○CSS3 @charset"utf-8"; #footer{ width:1060px; padding:0; margin:0; float:left; list-style-type: none; } #footer li{ width:20%; list-style: none; text-align:center; } #footer li a{ width:auto; color:#fff; font-size:18px; font-weight:bold; padding:35px 0 35px; text-decoration:none; display:block; background:url(../img/footer-link01.png) no-repeat; } #footer a:hover{ background:url(../img/footer-link02.png) no-repeat; .copyright{ margin-left:300px; } ※HTML、CSS3の記述はこれ以外にもあります。

    • ベストアンサー
    • HTML
  • CSS今度は外部ファイル!

    前回「CSSが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない!」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル) .body{ color:#006666; font-size:30px; } ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="abc.css" type="text/css"> --> </style> </head> <body> 背景色は濃い青緑です<br> フォントサイズは30px・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○HTMLファイル <! DOCTYPE PUBLIC HTML "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type"Content="text/html;charaset=shift_jis"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- <link rel="stylesheet" href="body.css" type="text/css"> --> </style> </head> <body> <div class="hp-name"> HP名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか? それとも、外部ファイルの書き方がいけないのでしょうか? 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした

  • スタイルシート・・・この記述は正しいですか?

    メモ帳で(苦笑)HPを作っています。いままではテーブルなどのほんとに簡単なタグしか使っていなかったのですが、そろそろサイトデザインを変えたいな~と思って、スタイルシートに挑戦してみることにしました。マウスをオンにしたときリンクの背景色が変わるとか、スクロールバーの色を変えるとか、見た目は思った通りに表示できているのですが(ブラウザIE6.0/NN6.02です)、本やいろんなサイトさんのソースを参考に打ってるだけなので、本当にこれで合っているのか不安です。お時間のある方アドバイスなど頂けたらと思います。よろしくお願いします。 <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta name="robots" content="index,nofollow"> <style type="text/css"> <!-- body { background-color:#; scrollbar-face-color: #; scrollbar highlight-color: #; scrollbar-shadow-color: #; scrollbar-3dlight-color: #; scrollbar-arrow-color: #; scrollbar-track-color: #; scrollbar-darkshadow-color: # } a{text-decoration:none} a:link {color:#;background-color:#;} a:visited {color:#;background-color:#;} a:hover {color:#;background-color:#;} --> </style> </head> <body> </body> </html>

    • ベストアンサー
    • HTML
  • CSSが反映されないで困っています;;

    日本のホストの時は、CSSがHTMLにうまく反映されていたのですが、 ホストを海外の T35Hosting と Graffiti.net で同じ様に挑戦したら CSSが反映されませんでした;; index.htmlのヘッド内に下記を書いて、 top.cssの名前でCSSを書きました。 <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <link rel="stylesheet" href="top.css" type="text/css"> </head> なぜか、反映されませんでした;; 「/」(ルートディレクトリ)と何か関係あるのでしょうか。 <link rel="stylesheet" href="top.css" type="text/css">の行の href="top.css" を href="/.top.css" などに変えなくてはいけないのでしょうか。。。 お知りの方 よろしくお願いします。