プロが教える店舗＆オフィスのセキュリティ対策術

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

締切済

  • 質問者：takeharu11
  • 質問日時：
  • 回答数：6件

ブラウザによる表示の違いについて
ホームページを作成しています。今少し気になることがあり今日も朝からずっと調べていたのですが分からずここで質問させてください。

自分のホームページが最近ブラウザにより見え方が違うのに気づきました。
たとえば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">
<!--
h1 {

color:#ff0000;
font-size:240%;
}


-->
</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%に変更されていません。

原因と対処法が分かる方がいればアドバイスお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (6件)

No.6

  • 回答者： tenderfeel
  • 回答日時：

1.charsetを含むmetaをtitleタグの上に置く


2.ファイルの文字コードが記述したものと一致しているか確認
3.全角文字や余計な文字が混ざっていないか確認

自分の環境では確認していませんが、charsetがタイトルの下にある場合によく不具合がおきてたので、もしかしたら質問の現象もそれなんじゃないかなと思いました。
Webkit系でってのは初耳ですが…。
    • good
    • 0
    • 件
通報する

No.5

  • 回答者： metametamu
  • 回答日時：

外部cssに@charasetを書かれてはどうでしょう。


また、保存する時はshift_jisで保存されましたか？
    • good
    • 0
    • 件
通報する

No.4

  • 回答者： hujitomo
  • 回答日時：

あなたの提示したサンプルのソースで、webkit系のブラウザ（Chrome & Safari）両方試してみましたけど、普通に赤色で大きく表示されましたよ？



イマドキのブラウザで外部スタイルシートに対応していないなんて馬鹿な話はありません。
なにか HTML の記述を根本的に間違っているのだと思われます。
もう一度ソースの確認をしてみましょう。

http://validator.w3.org/
    • good
    • 0
    • 件
通報する

No.3

  • 回答者： twenty4
  • 回答日時：

<LINK href="style.css" rel="stylesheet" type="text/css" media="screen">


これで大丈夫だと思います。Safariはわかりませんが、ChromeなどはどちらかというとCSS,HTMLをきちんと理解するので、表示がうまくいかないということは、どこかでミスを犯しているのだと思います。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ejejking04
  • 回答日時：

それでいけるはずなんですけどね



大文字で書くとダメなのかな。

↓をコピペでやってみてください。
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" title="デフォルト" />

多分いけると思います。
    • good
    • 0
    • 件
通報する

No.1

よけて避けられない問題です。


ＨＴＭＬの参考書に、タグ毎に各ブラウザに対応するかどうか表示されていませんか。
これを頼りに作成するしかありません。
ですから、ＨＴＭＬは懲りすぎてはいけません、暫く今のところは・・・・
基本的には、ＩＥとネットスケープにターゲットをあわせてください。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報