- ベストアンサー
外部から読み込んだ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% "ＭＳ Ｐゴシック", Osaka; color: #333333; } --> </style> </head> <body> <div id="a"> <div class="b">表示のテストです</div> </div> </body> </html> ----------------------------------------------------- 外部CSSに書いた場合でも小さく表示させるようにするには どうしたらいいでしょうか？ また、小さくなる原因はわかりましたらご教授願います。
- ryotatronica
- お礼率78% (11/14)
- HTML
- 回答数3
- ありがとう数2
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
＃１です > @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でブラウザに教えてあげるというわけです
その他の回答 (2)
- MAN_MA_RUI
- ベストアンサー率41% (426/1024)
> htmlと違う文字コードでも問題ないのでしょうか？ > 調べてみても出てきませんでしたので > もしご存知でしたら教えていただけると幸いです。 別に差し支えないかと思います。でなければ何のために文字コードを指定しているのでしょうか？ ちなみにさらに関係ないけどJavaScriptファイルはページのエンコードとファイルのエンコードが異なり、尚且つスクリプトに全角文字が含まれているときIEなどでエラーを起こす場合があります。 この場合の対処法は文字コードを変えるか全角文字を排除することです。 特殊文字の記述により全角文字を使わずに全角文字を出力させることが出来るようになっています。
お礼
回答ありがとうございます。 JSの文字コードも重要なんですね。 勉強になりました。
- suzuki-_-
- ベストアンサー率77% (152/195)
考えられる原因としては、文字コードの違いですかね XHTMLのほうはUTF-8ですが、cssは別コードで記述しているとかはありませんか？
補足
回答ありがとうございます。 @charsetで「shift_jis」または「euc-jp」で反映することができました。 UTF-8だとだめでした。 質問とずれてしまうのですが htmlと違う文字コードでも問題ないのでしょうか？ 調べてみても出てきませんでしたので もしご存知でしたら教えていただけると幸いです。
関連するQ&A
- ＣＳＳ今度は外部ファイル！
前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○abc.css(外部ファイル） .body{ color:#006666; font-size:30px; } ○ＨＴＭＬファイル <! 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> フォントサイズは３０ｐｘ・・・<br> <br> になるはずです・・・ </body> </html> ・・・結果・・・ 真っ白な画面に標準フォントで表示。 ○外部ファイル .hp-name{ font-size:55px; color:#006666; text-align:center; } ⇒ファイル名 hp-name.css ○ＨＴＭＬファイル <! 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"> ＨＰ名は「○○△△◇◇」です </div> ////////////////////////////////////////////////////////////////////////////////////// 今度はどこがいけないのでしょう。 <link rel・・・・・・・・ で、外部ファイルを読み込むだけではいけないのでしょうか？ それとも、外部ファイルの書き方がいけないのでしょうか？ 外部ファイルには「スタイルシートの部分だけ」記述すればいいと思っていたのですが・・・ ○外部ファイルを <style type="text/css"> <!-- --> </style> をつけてみたのですが、ダメでした
- ベストアンサー
- その他（インターネット・Webサービス）
- html,css初心者です。ヘッダーの余白について
ヘッダーの余白について教えて下さい。 どうしてもヘッダーの上部分に余白ができてしまいます。 HTMLとCSSをはります。 bodyに色をつけるとヘッダー上部分の余白の色も色がついてしまうので困っています・・・ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <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="font.css" type="text/css"> </head> <body> <div id="header"><!--/ #header --> あいうえお </div> </body> <html> CSS #header{ width: 980px; margin: 0 auto; background: #fff; text-align: left; } 宜しくお願いします。
- ベストアンサー
- 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;} １．改行に何か意味はあるのでしょうか？ ２．記述の順番や付け足し、削除すべき項目がありましたら、お願いいたします。
- ベストアンサー
- HTML
- xhtml,css cssの取り込み
xhtml,cssの解説書を購入し、二段にインポートする方法で「css」の取り込みをしたのですが、初心者ゆえどうもうまくいきません。下記にそのコードを載せますので、間違いをご指摘ください。 『index.html』 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://WWW.W3.org/TR/xhtml1/DTD/xhtml1-strict.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>test</title> <link rel="stylesheet" type="text/css" href="a.css" media="all" /> <body> <h1>秋</h1> <p> test test test </p> </body> </html> 『a.css』 @charset "Shift_JIS; @import"b.css"; 『b.css』 @charset "Shift_JIS"; h1{ text-align: center; font-size: x-large; font-family: "MS P明朝",serif; }
- 締切済み
- その他([技術者向] コンピューター)
- 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
- 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
- CSSの外部参照について。
XHTMLの内部にCSSを記述すると認識されますが、CSSを外部参照で指定すると、認識されずここでいうindex.htmlに記述した構文しか表示されません。 初心者です。 いくらXHTML,CSSの本や検索をしても中々理解がはかどらず、思うようにいきません。初歩的な間違いだと思いますが、どうぞよろしくお願い致します。ｍ（＿ ＿）ｍ index.html,works.htmlとCSSの記述場所を外部参照にし、HPをつくろうとしています。 XHTMLファイルはindex.html,works.htmlで （biography.htmlやaccess.htmlは後でつくります。）、 CSSはcssというファイルに、中にはstyle.cssがあります。画像はimgのフォルダにあります。 この回答にある４つの方法も参考にしてみたのですが、外部参照CSSは認識されませんでした。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1120846271 (次にCSSが置いてあるディレクトリ内に新規フォルダを作りその中にHTMLがある場合 <link href="../○○.css" rel="stylesheet" type="text/css">とあったので、今はこう記述しています。<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />） *XHTMLソース <?xml version="1.0" encoding"utf=8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org./1999/xhtml" xml:lang="ja" lang="ja"> <?xml version="1.0" encoding"utf=8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1"/DTD/xhtml1-strict.dtd"> <html xmlns=http://www.w3.org./1999/xhtml" xml:lang="ja" lang="ja"> <head profile=""> <title>***</title> <meta http-equiv="content-language" content="ja" /> <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 rel="stylesheet" type="text/css" href="css/style.css" media="all" /> </head> <div id="wrapper"> <div id="header"> <h1>***</h1> </div> <div id="main"> <ul> <li class="biography"><a href="#">>> Biography</a></li> <li class="works"><a href="works.html#works">>> Works</a></li> <li class="access"><a href="#">>> Access</a></li> </ul> </div><div id="footer"> <ul> <li><a href="#">sitemap</a></li> </ul> </div> </div> *CSS body,div,ul,ol,li,h1,p{margin:0; padding:0;} body{ text-align:center; min-width:780px; background:#f5f5f1; coler:#666666; fontfamily:Tahoma,"Lucida Geande", Arial,sans-serif; font-size;62.5%; } h1{display:none;}h1 #wrapper{width:740px; margin:0 auto; text-align:left;} #main a {height:100px; color:#ffffff; font-size:1.8em; text-tramsform: uppercase; text-decoration: none; display: block;} #main a:hover,a:active{color: #cccccc;} #main ul{list-style:none;} #main ul li{padding:5px 0px 5px 0px;} #header{height:115px; margin:15% 0 0 0; background:url(.img/image/blue.gif) no-repeat left center;} .biography{background:url("blue.gif") no-repeat left center;} .works{background-image:url(./img/works.gif) no-repeat left center;} .access{background-image:url(./img/access.gif) no-repeat left center;} #footer ul li {padding:10px; display:inline;} #footer ul {text-align:right;} #footer p {text-align:center;} どうぞよろしくお願い致します。
- ベストアンサー
- その他（インターネット・Webサービス）
- 作成したホームページがＩＥでは表示されない
xhtmlとcssでページを作成しました。 FireFoxではローカルでもネットにアップした状態でも見ることが出来るのですが、 ＩＥを使用すると、ローカルでは見れるのですが、ネットに上げたものは指定した背景の色しか表示されません。 何が原因なんでしょうか。 よろしくお願いします。 <?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>
- 締切済み
- 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-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <style type="text/css"> .r { color : #407133; } .k { color : #336070; } .t { color : #454580; } .s { color : olive; } p { color : #222222; } body { background-color:#e0ffe0; } a:link { color : #0000ff; } a:visited { color : #003333; } a:hover { color : #660000; } a:active { color:#660066; </style> <meta http-equiv="Content-Script-Type" content="text/javascript" />の１行を加えてみました。 この場合の記述の是非。 また記述すべき個所は合っているのでしょうか。
- ベストアンサー
- HTML
- i-modeでxhtmlをみるには、、
Perlからxhtmlをはきだして、i-modeで見れるようにしたいのですが、 表示がうまくいきません。 ヘッダーは Content-type: text/html; charset=Shift_JIS <?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"> こんな感じです。 「Content-type: text/html; charset=Shift_JIS」の部分を 「Content-Type: application/xhtml+xml」や 「Content-Type: application/xhtml」等でやっても表示されませんでした。 もし分かる方がいましたら教えてください。 宜しくお願いします。
- 締切済み
- XML
お礼
ありがとうございました。 完璧に理解できました。