FirefoxでCSSが読み込めない

このQ&Aのポイント
  • FirefoxでCSSが読み込まれていないとの問題が発生しています。IEやSleipnirでは正常に表示されるが、Firefoxではスタイルシートが反映されていないようです。
  • HTMLの冒頭部分のソースコードを示しました。DOCTYPE宣言やmetaタグが正しく設定されていることを確認し、スタイルシートのリンクが正しいことも確認してください。
  • 問題の原因としては、FirefoxがCSSファイルを正しく読み込んでいない可能性があります。他のブラウザでは正常に読み込まれるため、ブラウザ側の問題と考えられます。
回答を見る
  • ベストアンサー

FirefoxでCSSが読み込めない。

HPを作成中です。IEやSleipnirでは思った通りに表示されるのですが、Firefoxではスタイルシートが読み込まれていないようです。 どの部分が悪いのでしょうか。ご教示のほどをよろしくお願いいたします。 以下冒頭部分のソースです。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <meta http-equiv="Content-Style-type" content="text/css"> <link rel="stylesheet" href="index.css" type="text/css"> <title></title> </head> <body>

  • HTML
  • 回答数2
  • ありがとう数3

質問者が選んだベストアンサー

  • ベストアンサー
  • abril
  • ベストアンサー率69% (388/560)
回答No.1

このDOCTYPE宣言(自体にゴミが入っちゃってますが、これは投稿の際に変換されてしまったスペース等かと)下では推奨されない記述が何箇所かありますが、別に質問のソースをそのままコピペして適当なCSSを参照したらFirefoxでもとりあえず表示されている様ですが? ちなみに、今回のトラブルとは無関係ですが、単純に記述としてよろしくない点は: ・<html>にxmlns 属性、lang 属性、xml:lang 属性が指定されていない。 ・空要素タグ <meta><link>が<meta~ /><link~ />という様に閉じていない。 ・XML宣言をしていない&XML宣言中でencoding指定をしていない です。この際、正しい記述に修正しておいて損はないでしょう。ただし、最後については「(IEのCSS解釈の不具合を考慮して)意図的に」外す制作者及びサンプルやテンプレートも多いので、XML宣言を付けた状態でのCSSの解釈違いに対処できるスキルがなければ手を加えない方が宜しいかも。 > Firefoxではスタイルシートが読み込まれていないようです。 というのは、具体的にどの様な症状から気付きましたか? 例えば、index.cssの中味を一時的に body { color: #f00; background: #cff; } だけとでもし、htmlファイルの方も<body>~</body>の中を「テスト」という文字列だけにしてみても、Firefoxでは「文字色が赤、背景が水色」という表示にならず、ブラウザのディフォルトの色が適用されていますか?もしそうであれば、確かにFirefoxからはindex.cssが正しく参照されていない、という事になります。もしそうでなく、上記のスタイルが適用されているのであれば、Firefoxからもindex.css自体の参照はできているという事です。後者であれば、おそらくindex.cssの中の一部だけのスタイルが何らかの正しくない記述等により無効になっている可能性が強いかと思います。その場合は改めて具体的な箇所を示して下さい。 > IEやSleipnir Sleipnirは一般的にはIEコンポーネントブラウザに属するもの(IEと元を同じくする兄弟の様なものだとでも思っておいて下さい)ですから同じ様な挙動になりますね。Safari、Opera、Google Chrome等ではご覧になってみましたか?そちらもFirefoxで閲覧した際と同様の不具合が起きていますか?

mieka-1
質問者

お礼

丁寧にありがとうございました。 サンプルプログラムを表示してみると、ちゃんと表示されました。簡単な例でテストすると言うことに考えがまわりませんでした。 問題はCSSの中のようなので、改めて調べてみます。記述やブラウザについても、勉強になりました。また何かあったら、改めて質問させ低だだきます。

その他の回答 (1)

  • abril
  • ベストアンサー率69% (388/560)
回答No.2

ANo.1です。 まさか…とは思いますが、念の為。 Firefoxの「表示」オプションで”スタイルシートを使用しない”が選択された状態になってはいないですよね?

mieka-1
質問者

お礼

ありがとうございました。 一瞬どきっとしましたが、「標準のスタイルシート」になっていました。(#^.^#)

関連するQ&A

  • ファイヤーフォックスでCSSが読み込まれません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • ファイヤーフォックスでCSSが機能しません

    会社のホームページを担当していて困っています。 IEでは、きちんと表示されるのですが ファイヤーフォックスですとCSSを認識してくれないようです。 下記が自分会社のソースです。 何が悪いのでしょうか? よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html lang="ja"> <head> <title></title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/JavaScript"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <SCRIPT language=javascript src="js/libs.js" type=text/javascript></SCRIPT> <meta name="ROBOTS" content="ALL"> <<link href="css/stylesheet.css" rel="stylesheet" type="text/css" media="all"> </head>

  • 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
  • firefoxでcssが無視されます

    css初心者です、会社の海外向けのサイトを制作してます、 IEでは表示されるのですが、FireFoxではCSSが無視されてしまいます。 どなたか間違いをご指摘、ご指導ください。よろしくお願いします。 以下HTML記述 <?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 profile="http://purl.org/net/uriprofile/"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="Author" content="carsite" /> <meta name="Description" content="Japanese Used Car Exporter;Universal Trade. Find the best car to meet your special request." /> <meta name="Keywords" content="used car,cars,second hand,vehicle,japan,japanese" /> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="style.css" type="text/css" /> <link rel="shortcut icon" href="favicon.ico" /> <style type="text/css"></style> <title>Japanese Car Export car.com</title> </head> ちなみにCSSの記述頭 @charset "Shift_utf-8"; 3WC CSS検証チェックではエラーは発見されませんでしたが 原因がわかりません。

    • ベストアンサー
    • HTML
  • 下記のタグの中で必要ないのはありますか?

    (1) <?xml version="1.0" encoding="UTF-8"?> (2) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> (3) <html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja"> (4) <head> (5) <title>●●●●●●●●</title> (6) <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> (7) <meta http-equiv="Content-Style-Type" content="text/css" /> (8) <meta name="robots" content="INDEX,FOLLOW"> (9) <meta name="description" content="●●●●●●●●"> (10) <meta name="keywords" content="●●●●●●●●"> (11) <meta name="content="●●●●●●●●" /> (12) <meta http-equiv="Content-Script-Type" content="text/javascript"> (13) <meta http-equiv="Content-Style-Type" content="text/css"> (14) <link href="css/A1.css" rel="stylesheet" type="text/css" /> (15) <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

  • ファイヤーフォックスでの文字化け

    <?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" /> <title></title> <meta name="keywords" content="" /> <meta name="description" content="" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <link rel="stylesheet" href="css/import.css" type="text/css" /> </head> </head>までの部分をコピーペーストしてみましたが、昨日、<body>~<body>部分で更新をしようと思い、予定情報の終了した分の文字を削除して、ローカルで確認したところ、そのページすべてが文字化けしていました。アップロードしても文字化けはなおりませんでした。 因みに文字コードはUTF-8に設定して(いるつもり?)作成しており、これまでIEもグーグルクロームもファイヤーフォックスもしばらく使ってそのようなことはありませんでしたので、何が原因なのかわかりません。(現在、ファイヤーフォックスです。) 詳しい方教えて下さい!!

    • ベストアンサー
    • HTML
  • 作成したCSSがfirefoxでは見れますがIEでは反映されません

    私が今作成しているCSSのサイトなのですが。。 firefoxでチェックしながらはちゃんとみれていたのですが、最終チェックでIEでみるとCSSが反映されずに表記されてどうにも困っています。 原因なんなのでしょうか? お詳しい方お教えくださいませ。 -------------------------------------------------------------- <?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> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <meta http-equiv="content-style-type" content="text/css" /> <title>museo international</title> <link rel="stylesheet" type="text/css " href="css/index.css" media="screen.print" /> -------------------------------------------------------------- なにか違う所がありますか?どなたかお教えください。 困っています。

  • XHTMLで外部JSファイルを読み込むには?

    XHTMLで外部JSファイルを読み込むには? よろしくおねがいします。 初歩的ですみません 当方 XHTML+CSSでページを作成し JSファイルを読み込みページのTOPへ移動するスクリプトを 作ったのですがXHTML上では上手くうごいてくれません。。。。 ソースはこちらです。 -------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- 上記のソースは普通に動作するのですがDOCTYPEの宣言を ------------------------------------------------------------- <!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"> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>てすと</title> <link href="style/stylesheet.css" rel="stylesheet" type="text/css"> <script src="script/top.js" type="text/JavaScript"></script> --省略-- にすると・・・動いてくれません。下段のソースを利用したいのですが 何かJSファイルを読み込む方法はありますでしょうか?? アドバイス頂ければ幸いです。よろしくお願いいたします。

  • headerの添削お願いします。

    自分なりに書いてみたのですがおかしいところがあったら教えてください。 また、採点してくれるサイトがあったと思うのですがご存知の方教えてください。 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/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="javascript" /> <meta name="keywords" content="content" /> <link rel="shortcut icon" href="/favicon.ico" /> <link rel="stylesheet" href="/css/main.css" type="text/css" /> <title>0725</title> </head>

  • ホームページのヘッダ部分について

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <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"> <TITLE>○○○○</TITLE> <LINK REL="STYLESHEET" TYPE="text/css" HREF="css1.css"> <meta name="keywords" content="△,△,△,△,,△,△,"> <meta name="description" content="●●●●●"> </HEAD> <BODY> … となっているのですが、無駄な部分はありますか? 順番などは合ってますか? また、こうしたほうがいい、などとアドバイスがあればぜひよろしくお願いいたします。

専門家に質問してみよう