ブラウザによる表示の違いについて
ホームページを作成しています。今少し気になることがあり今日も朝からずっと調べていたのですが分からずここで質問させてください。
自分のホームページが最近ブラウザにより見え方が違うのに気づきました。
たとえば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
- 回答日時:
1.charsetを含むmetaをtitleタグの上に置く
2.ファイルの文字コードが記述したものと一致しているか確認
3.全角文字や余計な文字が混ざっていないか確認
自分の環境では確認していませんが、charsetがタイトルの下にある場合によく不具合がおきてたので、もしかしたら質問の現象もそれなんじゃないかなと思いました。
Webkit系でってのは初耳ですが…。
No.4
- 回答日時:
あなたの提示したサンプルのソースで、webkit系のブラウザ(Chrome & Safari)両方試してみましたけど、普通に赤色で大きく表示されましたよ?
イマドキのブラウザで外部スタイルシートに対応していないなんて馬鹿な話はありません。
なにか HTML の記述を根本的に間違っているのだと思われます。
もう一度ソースの確認をしてみましょう。
http://validator.w3.org/
No.3
- 回答日時:
<LINK href="style.css" rel="stylesheet" type="text/css" media="screen">
これで大丈夫だと思います。Safariはわかりませんが、ChromeなどはどちらかというとCSS,HTMLをきちんと理解するので、表示がうまくいかないということは、どこかでミスを犯しているのだと思います。
No.2
- 回答日時:
それでいけるはずなんですけどね
大文字で書くとダメなのかな。
↓をコピペでやってみてください。
<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" title="デフォルト" />
多分いけると思います。
No.1
- 回答日時:
よけて避けられない問題です。
HTMLの参考書に、タグ毎に各ブラウザに対応するかどうか表示されていませんか。
これを頼りに作成するしかありません。
ですから、HTMLは懲りすぎてはいけません、暫く今のところは・・・・
基本的には、IEとネットスケープにターゲットをあわせてください。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- HTML・CSS html cssのmargin 5 2022/12/03 11:04
- HTML・CSS アコーディオンメニューが思うように動作しません。 1 2023/08/20 16:48
- HTML・CSS CSSが上手く反映されないみたいです 2 2022/11/21 16:19
- HTML・CSS htmltとcssのコードで 1 2022/11/26 13:37
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
- PHP PHPでCookieを使った訪問回数について 1 2023/05/28 14:10
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- CGI perlで書いたcgiでsqliteの使い方を教えてください 2 2023/05/08 21:29
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
複数のhtmlで同じcssファイルを...
-
スタイルシートが適用されない
-
範囲指定印刷での位置(css)
-
ブラウザでプレビューでCSSが反...
-
テーブルが二つ横に並んでしまう
-
エクセルファイルにCSSを読み込...
-
<LINK> の ID の属性値
-
定数の定義とかはできますか?
-
HTMLの CSSのファイルというの...
-
拡張子 .cssに続く暗号みたいな...
-
outlook 文字を揃えたい。tab...
-
マイクロ(μ)の文字を半角で出...
-
教えてください。
-
入力規則のリストの文字の大き...
-
EXCEL VBA 印刷プレビューダイ...
-
テーブル内の文字サイズを変更...
-
16x16のスプライトフォント
-
特定の文字のみcssを適用するに...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
cssファイルの名称付け
-
jspにcssを反映させるには
-
ディレクトリ構成【「common」...
-
サイトを作る時のcssファイルは...
-
HTMLの CSSのファイルというの...
-
cssで、ボタンのテキスト部分を...
-
複数のhtmlで同じcssファイルを...
-
cssファイルを階層の異なるHTML...
-
WindowsとMacで違うCSSを読み込...
-
cssが反映されません
-
一部のページにデフォルトCSSを...
-
エクセルファイルにCSSを読み込...
-
定数の定義とかはできますか?
-
ブラウザでプレビューでCSSが反...
-
範囲指定印刷での位置(css)
-
スタイルシート(CSSスタイル)...
-
ドキュメントルートより上の階...
-
Dreamweaver のテンプレートで...
-
【CSS】スタイルやクラスがどの...
-
cssは複数作る?
おすすめ情報