• ベストアンサー
  • 困ってます

外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまう

Win IE6にて、外部から読み込んだCSSとヘッダに書いたCSSでフォントサイズの表示が変わってしまいます。 下のようにヘッダに書いた場合のフォントサイズが、 外部CSSにのみ同じように書いた場合に比べて小さくなります。 --------------------------------------------------------------- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>テスト</title> <link href="test.css" rel="stylesheet" type="text/css" media="all" /> <style type="text/css" media="all"> <!-- #a .b { font: 70% "MS Pゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか? また、小さくなる原因はわかりましたらご教授願います。

共感・応援の気持ちを伝えよう!

  • 回答数3
  • 閲覧数154
  • ありがとう数2

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

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

#1です > @charsetで「shift_jis」または「euc-jp」で反映することができました。 > UTF-8だとだめでした。 html内に記述しているcharsetや、外部cssに記述する@charsetは 「このファイルは charset に記述されている文字コードで書いているよ」 と、ブラウザに教えてあげているだけです おそらく質問者さんの外部cssはShift_Jisあたりで記述しているので、 @charset "UTF-8"; と一行目に記述したとしても、 実際の文字コードと違うため反映されないのだと思います (eucで可能なのはブラウザが勝手に相互解釈してくれているだけだと思います) UTF-8で認識させたいのならば、@charsetでは全く意味がないので、 css自体をUTF-8で記述しましょう メモ帳ならば、名前を付けて保存で文字コードの指定保存ができます オーサリングソフトや専用エディタ等でも変更項目が何かしらあると思います > 質問とずれてしまうのですが > htmlと違う文字コードでも問題ないのでしょうか? そのままだと問題があるので、前途@charsetでブラウザに教えてあげるというわけです

共感・感謝の気持ちを伝えよう!

質問者からのお礼

ありがとうございました。 完璧に理解できました。

関連するQ&A

  • 作成したホームページがIEでは表示されない

    xhtmlとcssでページを作成しました。 FireFoxではローカルでもネットにアップした状態でも見ることが出来るのですが、 IEを使用すると、ローカルでは見れるのですが、ネットに上げたものは指定した背景の色しか表示されません。 何が原因なんでしょうか。 よろしくお願いします。 <?xml version="1.0" encoding="Shift_JIS"?> <!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"xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS" /> <title></title> <link rel="stylesheet" href="style.css" type="text/css"> </head>

  • CSSの質問です。

    親子枠の関係です。 親を縦横300px x 300pxと指定した場合、子に縦横300px x 300pxと指定すると親枠からはみ出るんでしょうか? <!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=utf-8" /> <title>親子関係</title> <style type="text/css"> <!-- #oya { background-color: #006666; height: 300px; width: 300px; } #kodomo { background-color: #006699; height: 300px; width: 300px; } --> </style> </head> <body> <div id="oya"> <div id="kodomo"> </div> </div> </body> </html> 経験者若しくはプロの方のアドバイスを願います。

    • ベストアンサー
    • HTML
  • XHTML のタイトルが表示されません ご教授おね

    タイトル通りなのですがHTML のタイトルが上手く表示されず、本文の中に入ってしまっています。(cf,添付画像)   一番最初の所で躓いてしまいました、解説書の通り何度もやり直したのですが、原因が分からないのです・・・かなり初歩的なこととは思われますがよろしくお願いいたします! ソースは以下のとおりです。 <!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=utf-8" /> <titile>a</title> <style type="text/css"> </style> </head> <body> </body> </html> *ちなみにサンプルでは以下のとおりになっています。(サンプルをインストールすればしっかりと表示されるのです、同じなはずなのに僕が入力しますと上手くいきません) <!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=utf-8" /> <title>a</title> <style type="text/css"> </style> </head> <body> </body> </html>

    • ベストアンサー
    • CSS

その他の回答 (2)

  • 回答No.2

> htmlと違う文字コードでも問題ないのでしょうか? > 調べてみても出てきませんでしたので > もしご存知でしたら教えていただけると幸いです。 別に差し支えないかと思います。でなければ何のために文字コードを指定しているのでしょうか? ちなみにさらに関係ないけどJavaScriptファイルはページのエンコードとファイルのエンコードが異なり、尚且つスクリプトに全角文字が含まれているときIEなどでエラーを起こす場合があります。 この場合の対処法は文字コードを変えるか全角文字を排除することです。 特殊文字の記述により全角文字を使わずに全角文字を出力させることが出来るようになっています。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

回答ありがとうございます。 JSの文字コードも重要なんですね。 勉強になりました。

  • 回答No.1

考えられる原因としては、文字コードの違いですかね XHTMLのほうはUTF-8ですが、cssは別コードで記述しているとかはありませんか?

共感・感謝の気持ちを伝えよう!

質問者からの補足

回答ありがとうございます。 @charsetで「shift_jis」または「euc-jp」で反映することができました。 UTF-8だとだめでした。 質問とずれてしまうのですが htmlと違う文字コードでも問題ないのでしょうか? 調べてみても出てきませんでしたので もしご存知でしたら教えていただけると幸いです。

関連するQ&A

  • firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。

    初めて書き込みで質問する段階の者です。 ヤフーオークション用ページをhtml内にcssを書いて作成しておりましたが、firefox3.5.7,で表示確認済みのcssがsafari4.0.4,で無効状態です。(ファイルはローカルでデスクトッップに置いてあります。) 調べながらの作業で解決出来ず困っております。 書き方に問題があるはずですが、わかりませんでした。 (未チェックですが、恐らくIE関係も全滅だとは思います。) ひとまずsafariをクリアーできたらと思っておりますので ご存知の方、ご教授お願いします。 <?xml version="1.0" encoding="UTF-8"?> <!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" xml:lang="ja" lang="ja"> <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" /> <title>ヤフーオークションページ</title> <meta name="description" content="" /> <meta name="keywords" content="" /> <link rel="stylesheet" type="text/css" href="css/import.css" media="all" /> <style type=" text/css"> </style> </head>

    • ベストアンサー
    • Mac
  • FirefoxでCSSが読み込めない。

    HPを作成中です。IEやSleipnirでは思った通りに表示されるのですが、Firefoxではスタイルシートが読み込まれていないようです。 どの部分が悪いのでしょうか。ご教示のほどをよろしくお願いいたします。 以下冒頭部分のソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "&#8203;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&#8203; <html> <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="index.css" type="text/css"> <title></title> </head> <body>

    • ベストアンサー
    • HTML
  • CSSでのセンタリング

    いつもすみません。 下記のラインをimg(gif)で格好のいい縦ラインにしたいんですが、どのようにしたらいいでしょうか? よろしくお願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "&#8203;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">&#8203; <html xmlns="&#8203;http://www.w3.org/1999/xhtml">&#8203; <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- body{ margin-top: 0px; } #box { height: 500px; width: 700px; margin-right: auto; margin-left: auto; border-right: 1px solid #000000; border-left: 1px solid #000000; } --> </style> </head> <body> <div id="box">←この縦の黒線をimgで表現したいです。</div> </body> </html> ※回答の際には上記タグを改良してお答え願います。

    • ベストアンサー
    • HTML
  • CSSのチェックをお願いします。

    <?xml version="1.0" encoding="Shift_JIS"?> <!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" lang="ja" xml:lang="ja"> <head> <meta name="robots" content="noindex,nofollow,noarchive" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133;} .t { color : #454580;} p { color : #222222;} body { background-color:#e0ffe0;} a:link { color : #0000ff;} a:visited { color : #003333;} a:hover { color : #660000;} a:active { color:#660066;} 1.改行に何か意味はあるのでしょうか? 2.記述の順番や付け足し、削除すべき項目がありましたら、お願いいたします。

    • ベストアンサー
    • HTML
  • xhtmlでの画像サイズ指定について質問です。

    xhtmlでの画像サイズ指定について質問です。 htmlでは、例えば800×800の画像でも、スタイルシートのクラス指定(下記は外部にcssを記述)などで (中略) <link rel="stylesheet" href="size.css" type="text/css" media="screen" /> (中略) <img src="cat.jpg" class="wid180he50" alt="猫" /> 外部ファイルで・・・ .wid180he50 {width=180px ; height=50px ;} とすれば180×50で表示されますが、 <!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" xml:lang="ja" lang="ja"> のxhtmlでは無効となっているようで、そのままの800×800で表示されてしまいます。 どのように記述すれば180×50で表示されますでしょうか?

  • XHTMLで外部JSファイルを読み込むには?

    XHTMLで外部JSファイルを読み込むには? よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!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"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか?? アドバイス頂ければ幸いです。よろしくお願いいたします。

  • html+cssでHPを組んでますが

    言葉ではうまく説明できないので、html+cssコードを下のほうに貼り付けました。 すいませんが、まずはそちらを参考してほしいです。 続いて質問ですが、「ulも#tate」のほうも縦横300pxで指定してるのに、ulのリスト側はなぜか幅が大きくなってしまいます。この改善点と説明を教えて頂けないでしょうか。 それと「ilの点」の位置を左ツラに合わせるのはどうやるのでしょうか。 疑問点が解決できず、とても困ってます。 *************html+css****************** <!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=utf-8" /> <title>無題ドキュメント</title> <style type="text/css"> <!-- ul { background-color: #C0F; height: 300px; width: 300px; } #tate { height: 300px; width: 300px; background-color: #F9F; } ul li { } --> </style> </head> <body> <ul> <li>あ</li> <li>い</li> <li>う</li> <li>え</li> <li>お</li> </ul> <div id="tate"> s </div> </body> </html> ********************************************************** よろしくお願いします。

    • ベストアンサー
    • HTML
  • cssがIE6で適用されない理由は

    教則本を見てcss/xhtmlでサイトを作ったのですが、 (教則本がIE7以降対応だった為) safari firefoxd IE7では表示がうまくいくのですが、 IE6では全くcssが適用されないです。 少し調べたところこの辺の記述に問題があるのかなと思っています。 誰か教えて下さい。 ............................................................................... <!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" xml:lang="jap" lang="jap" dir="ltr"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> ....................................................................

    • ベストアンサー
    • HTML
  • 下記のタグの中で必要ないのはありますか?

    (1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • 多言語ページのエンコード記述が分かりません

    友人に頼まれてサイトの挨拶文のようなページを、英語バージョンと中国語バージョンで作っています。 ナビゲーションなどは日本語のままで、メインのコンテンツエリアのみ英語や中国語を書くので2つの言語が交じるページとなります。 文字化けを防ぐためのエンコードがいまいち分かりません… 分からないなりに書いては見たものの、これであっているのかも分かりません。 (確認する方法はあるのでしょうか) コードを書いてみました。 添削やアドバイスをお願いします。 ───────────────────────── 【英語と日本語のページ】 ※エンコードをUTF-8にしただけです。 <!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=UTF-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>△△△</title> <link href="◯◯◯.css" rel="stylesheet" type="text/css" media="all" /> </head> ───────────────────────── 【中国語と日本語のページ】 ※ネットで検索してcharset=bg2312、 lang="ja,zh" xml:lang="ja,zh"を書きましたがこれでいいんでしょうか? <!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" lang="ja,zh" xml:lang="ja,zh"> <head> <meta http-equiv="Content-Type" content="text/html; charset=bg2312" /> <meta http-equiv="Content-Style-Type" content="text/css"> <title>△△△</title> <link href="◯◯◯.css" rel="stylesheet" type="text/css" media="all" /> </head> ───────────────────────── また、友人のサイトを見てみるとその他すべてのページはShift_JISで作られています。 これは海外の人が開くと文字化けしてしまうということなのでしょうか? 日本語の表示のままでいいのですが、UTF-8にしたほうがいいのでしょうか? わからない事だらけでスミマセン(;_;) よろしくお願いします。。