- 締切済み
ブラウザによる表示の違いについて
ブラウザによる表示の違いについて ホームページを作成しています。今少し気になることがあり今日も朝からずっと調べていたのですが分からずここで質問させてください。 自分のホームページが最近ブラウザにより見え方が違うのに気づきました。 たとえば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%に変更されていません。 原因と対処法が分かる方がいればアドバイスお願いします。
- takeharu11
- お礼率39% (153/386)
- HTML
- 回答数6
- ありがとう数2
- みんなの回答 （6）
- 専門家の回答
みんなの回答
- tenderfeel
- ベストアンサー率56% (215/379)
1.charsetを含むmetaをtitleタグの上に置く 2.ファイルの文字コードが記述したものと一致しているか確認 3.全角文字や余計な文字が混ざっていないか確認 自分の環境では確認していませんが、charsetがタイトルの下にある場合によく不具合がおきてたので、もしかしたら質問の現象もそれなんじゃないかなと思いました。 Webkit系でってのは初耳ですが…。
- metametamu
- ベストアンサー率51% (153/295)
外部cssに@charasetを書かれてはどうでしょう。 また、保存する時はshift_jisで保存されましたか？
- 藤田 朋郎（@hujitomo）
- ベストアンサー率54% (39/71)
あなたの提示したサンプルのソースで、webkit系のブラウザ（Chrome & Safari）両方試してみましたけど、普通に赤色で大きく表示されましたよ？ イマドキのブラウザで外部スタイルシートに対応していないなんて馬鹿な話はありません。 なにか HTML の記述を根本的に間違っているのだと思われます。 もう一度ソースの確認をしてみましょう。 http://validator.w3.org/
- twenty4
- ベストアンサー率100% (1/1)
<LINK href="style.css" rel="stylesheet" type="text/css" media="screen"> これで大丈夫だと思います。Safariはわかりませんが、ChromeなどはどちらかというとCSS,HTMLをきちんと理解するので、表示がうまくいかないということは、どこかでミスを犯しているのだと思います。
- ejejking04
- ベストアンサー率36% (7/19)
それでいけるはずなんですけどね 大文字で書くとダメなのかな。 ↓をコピペでやってみてください。 <link href="css/style.css" rel="stylesheet" type="text/css" media="screen" title="デフォルト" /> 多分いけると思います。
- miracle3535
- ベストアンサー率20% (306/1469)
よけて避けられない問題です。 ＨＴＭＬの参考書に、タグ毎に各ブラウザに対応するかどうか表示されていませんか。 これを頼りに作成するしかありません。 ですから、ＨＴＭＬは懲りすぎてはいけません、暫く今のところは・・・・ 基本的には、ＩＥとネットスケープにターゲットをあわせてください。
関連するQ&A
- CSSが反映されない… 初心者です。
<html> <head> <title>タイトル</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> <!-- .f1{ font-family: "book antique"; font-size: 10px; } --> </head> <body> <span class="f1">本文</span> </body> </html> という簡単な指定をしてみたのですが、実際には何も書かれていない真っ白な画面になり、スタイルシートが反映されないです。 ブラウザが悪いのかと思いFirefoxとIEで試したのですが、やはり真っ白な画面になってしまいます…。 他のサイトのCSSを含んだソースをコピーして試したところ、問題なく反映できるのでブラウザのせいではないと思うのですが、自分で書いた書き方では反映されないので、やはり書き方に問題があるのでしょうか？ geocitiesを利用しております。 よろしくお願いします。
- ベストアンサー
- HTML
- 表示すると文字化けします
下記のファイルが表示されると文字化けしてエンコードを修正しないとみれませんなぜでしょうか？ 日本語EUCになってしまします。 <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=EUC-JP"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> </HEAD> <BODY> <TABLE border="1"> <TBODY> <TR> <TD bgcolor="#ffff00" width="699"><B><FONT size="+2">登録ありがとうございました</FONT></B></TD> </TR> <TR> <TD height="99" width="699"><B>■<A href="http*************************">使いこなすために</A>手順に沿って進んでください</B>→<A href="http**************************">次へ進む</A></TD> </TR> </TBODY> </TABLE> </BODY> </HTML>
- ベストアンサー
- HTML
- フレームページに文字が表示されなくて困ってます＞＜
フレームページに文字が表示されなくて困ってます＞＜ フレームページは表示されるのですがmenu.html.htmlやcontents.html.htmlに書いた文字が表示されません どこが間違っているのでしょうか？ ーーフレームページーー <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タトル</TITLE> </HEAD> <FRAMESET cols="100,*"> <FRAME name="menu.html.html" src="file:///D:/happystyle/menu.html.html"> <FRAME name="contents.html.html" src="file:///D:/happystyle/contents.html.html"> <NOFRAMES> <BODY> <P>このページを表示するには、フレームをサポートしているブラウザが必要です。</P> </BODY> </NOFRAMES> </FRAMESET> </HTML> ーーmenu.html.htmlーー <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD> <BODY> 画像置き場 </BODY> </HTML> ーーcontents.html.htmlーー <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE>タイトル</TITLE> </HEAD> <BODY> 画像表示 </BODY> </HTML> というHTMLを書きました！ フレームに表示させたいページのHTMLはフレームと同じフォルダに入っているのですがこれと関係ありますか？ どこがおかしいのかまったくわからないです 教えてください！
- ベストアンサー
- その他([技術者向] コンピューター)
- これは何を意味しますか？
<HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <TITLE></TITLE> </HEAD> <BODY> <img src="./image/2151.jpg"> </BODY> </HTML>
- ベストアンサー
- HTML
- ModalBoxのIEでの表示について
質問です。 javascriptの「ModalBox」についてなのですがModalBox内で指定したhtmlファイルがIE7では表示されません。Firefoxでは表示されるのですが・・・なぜでしょう？ 一応javascriptは表示され上からウィンドウは表示されるのですが中身の内容がでてきません(Firefoxなら表示されます) ソースですが 表示するボタンがある側↓----------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>ModalBox サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="modalbox.css" type="text/css" media="all"> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="lib/prototype.js"></script> <script type="text/javascript" src="lib/scriptaculous.js"></script> <script type="text/javascript" src="modalbox.js"></script> </head> <body> <h1>ModalBoxサンプル</h1> <a href="sample.html" title="Sample 1" onclick="Modalbox.show(this.href, this.title); return false;">ダイアログを表示</a> </body> </html> --------------------------- 表示されるhtml側↓ <html> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> </head> <body> サンプル </body> </html> ----------------------------- となっています。 調べたところIE7にも対応しているとの事なのですが何故でしょうか？
- 締切済み
- JavaScript
- font-familyで書式が指定しても変化しない
cssでfont-familyを指定しているのですが、 デフォルト書式のまま変化しません。 原因が分からないのですが、可能性として どんなことが考えられますか？ ちなみにエディタはTeraPadです。 html <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css; charset=utf-8" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <head> <body> <p>テスト</p> </body> </head> css p{ font-family:ＭＳ明朝; }
- ベストアンサー
- CSS
- SafariでPHPソースがそのまま表示される
Safariでindex.phpを開くとソースコードがそのまま表示されてしまいます。 拡張子をphpとしているだけでソース内にはphpスクリプトは記述しておりません。 なぜでしょうか？ ※ファイル名をindex.htmlに変えると正しく表示されます。 Windows 7 Home Premium 64bit Safari5.1.5 ソースコードのエンコーディング：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" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <title>テストtitle> </head> <body> <h1>テストページ</h1> </body> </html>
- ベストアンサー
- ブラウザ
- ＣＳＳ今度は外部ファイル！
前回「ＣＳＳが反映されない」で質問させていただきました。 おかげさまで、ヘッダー内で記述したものが、反映されるようになりました。 ところで、今度は外部ファイルの読み込みで「できない！」となっています。 自分ではどこがいけないのか、発見できなかったので、また皆さんのお力をいただきたいと 思います。 ○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サービス）
- 使用環境：WINVISTA、IE8
使用環境：WINVISTA、IE8 ホームページ作成にあたり、CSSを使用しています。 使用フォントをメイリオにしたいので下記のように指定しています。 body { font-family: "メイリオ", Osaka, "ＭＳ Ｐゴシック", sans-serif; } また、HTMLファイルのheadタグには下記のように指定しています。 <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="design/style.css" rel="stylesheet" type="text/css" /> </head> 指定方法は間違ってはないと思うのですが、フォントが変わってくれません。 試しにfont-weight:bold; を指定すると太字にはなるのでパスの指定などは問題ないと思います。 何か考えられる原因・対処法はございますでしょうか。 よろしくお願い致します。
- ベストアンサー
- HTML
- IE以外のブラウザでも表示したい
文字をウィンドウ底面に合わせて動くレイアウトにした所、 Netscape・FireFox・Operaでは文字が消えて見れませんでした。IEでは普通に希望レイアウト通り見れています。 IE以外のブラウザ（最低限上記）でも見れるようにするにはどうしたらよいのでしょうか？ タグは以下のようになっていますがどこか間違っていたらご指摘お願い致します。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <title>menu</title> <style type="text/css"> <!-- BODY{ scrollbar-3dlight-color:#ffffff; scrollbar-arrow-color:black; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ffffff; scrollbar-track-color:#ffffff; background-color : black; background-image : url(logo.gif); background-repeat : no-repeat; background-attachment : fixed; position : fixed; } P{ font-family : Arial; font-weight : bold; color:#dcdcdc; position:absolute; bottom:0px; margin-left : 30px; } FONT{ font-size : 8pt; font-family :"ＭＳ ゴシック"; font-weight : normal; } --> </STYLE> </head> <body> <p align="center"> <a href="**.html" target="**">1</a><br> <br> <a href="**.html" target="**">2</a><br> <br> </p> </body> </html>
- ベストアンサー
- HTML
