締切済み

ブラウザによる表示の違いについて

2010/07/20 10:46

ブラウザによる表示の違いについてホームページを作成しています。今少し気になることがあり今日も朝からずっと調べていたのですが分からずここで質問させてください。自分のホームページが最近ブラウザにより見え方が違うのに気づきました。たとえばInternet ExplorerやFirefoxなら問題なくきれいに表示されていますがSafariやGoogleChromeだとスタイルシートで書いた部分がおかしくなっています。私のほうで色々調べたのですがたとえば見出しタグH1にスタイルを適応する場合に直接 <html> <head><title></title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_jis"> <style type="text/css">  </style> </head> <body> <h1>テスト</h1> </body> </html> のように記述すれば問題なくブラウザSafariにもスタイルシートが適応されるみたいなのですがこれを外部からスタイルシートをリンクを貼ると適応されないみたいです。つまり <html> <head><title></title> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_jis"> <LINK REL="stylesheet" HREF="style.css" TYPE="text/css"> </head> <body> <h1>テスト</h1> </body> </html> として style.cssファイルに h1 { color:#ff0000; font-size:240%; } と記述した場合にSafariで開くと見出しの色も赤で指定したにもかかわらず紺色になっているしフォントサイズも240%に変更されていません。原因と対処法が分かる方がいればアドバイスお願いします。

takeharu11
お礼率39% (153/388)

HTML
回答数6
ありがとう数2

みんなの回答 （6）
専門家の回答

みんなの回答

tenderfeel
ベストアンサー率56% (215/379)

2010/07/27 17:09 回答No.6

1.charsetを含むmetaをtitleタグの上に置く 2.ファイルの文字コードが記述したものと一致しているか確認 3.全角文字や余計な文字が混ざっていないか確認自分の環境では確認していませんが、charsetがタイトルの下にある場合によく不具合がおきてたので、もしかしたら質問の現象もそれなんじゃないかなと思いました。 Webkit系でってのは初耳ですが…。

metametamu
ベストアンサー率51% (153/295)

2010/07/20 16:13 回答No.5

外部cssに@charasetを書かれてはどうでしょう。また、保存する時はshift_jisで保存されましたか？

藤田朋郎（@hujitomo）
ベストアンサー率54% (39/71)

2010/07/20 15:31 回答No.4

あなたの提示したサンプルのソースで、webkit系のブラウザ（Chrome & Safari）両方試してみましたけど、普通に赤色で大きく表示されましたよ？イマドキのブラウザで外部スタイルシートに対応していないなんて馬鹿な話はありません。なにか HTML の記述を根本的に間違っているのだと思われます。もう一度ソースの確認をしてみましょう。 http://validator.w3.org/

twenty4
ベストアンサー率100% (1/1)

2010/07/20 11:42 回答No.3

<LINK href="style.css" rel="stylesheet" type="text/css" media="screen"> これで大丈夫だと思います。Safariはわかりませんが、ChromeなどはどちらかというとCSS,HTMLをきちんと理解するので、表示がうまくいかないということは、どこかでミスを犯しているのだと思います。

ejejking04
ベストアンサー率36% (7/19)

2010/07/20 11:12 回答No.2

それでいけるはずなんですけどね大文字で書くとダメなのかな。 ↓をコピペでやってみてください。 <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" title="デフォルト" /> 多分いけると思います。