外部CSSがFireFoxで反映されません

Question

外部スタイルシートを使用しています。
ローカルでは、IE・FireFoxともCSSが反映されていますが、
サーバーにアップすると、firefoxでは全く反映されません。
一部が反映されない。という状況ではなく、全く読み込まれていない
状況です。

非常に疑問なのが、同じファイルをあるサーバーにアップしたデータはFireFoxで問題なくCSSが反映されていますが、本来アップすべきサーバーにアップすると反映されない状況です。
同じファイルをアップしていてもこのような事があるのでしょうか？

色々検索はしてみたもののサッパリ原因がつかめず困っています。
どなたか教えてください。
よろしくお願い致します。

ORUKA1951 · Accepted Answer

先のHTMLと同じ階層にCSS2と言うフォルダーを作成してこれらのファイルを指定されたファイル名で置き、アップロードする。

★タブは全角スペースに置換してあるので、元に戻すこと。

ブラウザのHEAD内のスタイル(h1{color:red;})も適用されないなら、スタイルシートを利用しない設定になっている。
　Shift_JISだと表示されるなら、charsetの指定と文字コードを見直す。またBOMコードのないことをチェック

優先スタイルシート(ファイル名 default.css)
@charset "Shift_JIS";
html,body{padding:0;margin:0;}
p{text-indent:1em;margin:0.5ex 1em;}
dl{margin: 1ex 2em 1ex 2em;padding:0}
dt{font-weight:bold;}
dd{margin-left:1em;text-indent:1em;}
dl dl{font-size:0.9em;}
hr{visibility:hidden;}
pre{border:solid 1px black;margin:1ex 5em;padding:1ex 1em;background-color:white;}
div#Document_Information{text-align:center;}

標準スタイルシート(ファイル名 std.css)
@charset "Shift_JIS";
body{background-color:gray;}
h1,h2{text-align:center;}
p{margin:0.5ex 1em;}
div.section{margin-left:160px;margin-right:160px;width:auto;background-color:rgb(220,220,220);padding-bottom:2ex;}
div.section div.abstract{margin-left:60px;margin-right:60px;width:auto;border:dotted 1px gray;padding:0em 1em;}
div.section div.section{margin-left:20px;margin-right:10px;width:auto;}
pre{border:solid 1px black;margin:1ex 5em;padding:1ex 1em;background-color:white;}
pre:before{content: "サンプル\A";}
hr{visibility:hidden;}
div#Document_Information{text-align:center;}
div.W3C_Valid{position:absolute;width:150px;top:5px;right:0px;}

代替スタイルシート(ファイル名 rev.css)
@charset "Shift_JIS";
body{background-color:black;color:rgb(255,255,255);}
h1,h2{text-align:center;}
div.section{margin-left:200px;margin-right:auto;width:600px;background-color:rgb(0,0,100);}
div.section div.abstract{margin-left:10px;margin-right:10px;width:auto;border:inset 3px gray;background-color:rgb(0,0,60);padding:0em 1em;}
div.section div.section{margin-left:20px;margin-right:20px;width:auto;}
pre{color:black;}
pre:after{content: "\Aサンプル";}
hr{visibility:hidden;}
div.W3C_Valid{position:absolute;width:150px;top:5px;left:0px;text-align:right;}

印刷用スタイルシート(ファイル名 print.css)
@charset "Shift_JIS";
body{font-size:10pt;}
h1,h2{text-align:center;}
p{margin:0.2ex 0.5em;}
div.section{width:185mm;margin-left:auto;margin-right:auto;}
div.W3C_Valid{text-align:left;}
div.W3C_Valid a{color:black;text-decoration:none;font-style:italic;}
div.W3C_Valid a:before{content:attr(title);}
div.W3C_Valid a:after{ content: "　　　　" attr(href); }
div.W3C_Valid img{display:none;}

ORUKA1951 · Answer

サンプルです。チェックポイントは下記 ★HTML,CSSともにテキストモードでアップロードする。 ★文字コードはShift_JIS ★firefoxで表示→スタイルシートで「スタイルシートを使用しない」になっていないか ★文字コードをUTF-8に変えてアップロード　そのときHTML/CSSの文字コード指定部分も必ず変更すること　UTF-8にBOMコードはつけない(HTML/CSSとも) ★下記のソースはタブインデントが全角スペースに置換してある。必ずタブに置換しなおすこと。 ★httpはｈｔｔｐに変換してある。これも半角に戻すこと。 ★CSSは次回 HTML 　　サンプル　　　　　　　　　　　

サンプル

CSS2.1

　　　　スタイルシートの確認用、数枚のスタイルシートを用途によって切り替えてみる。表示→スタイルシートで代替スタイルシートを選択する。また印刷、もしくは印刷プレビューで印刷時のスタイルを確認する。　　　

スタイルシートの色々

HTML4では、HEAD内のMETA要素のが必須です。そのうえで

外部スタイルシート: LINK要素のの記述で参照します。CSSには必ず@charset ""を正確に記述します。文字コードはできるだけ本体のHTMLと合わせましょう。文字コードが異なる場合はLINKの属性値でも指定しておきましょう。; 　　　　　
　　　　　　
固定スタイルシート
　　　　　　
titleのないもの。mediaもない場合すべての端末に対して有効になる
　　　　　　
　　　　　　
優先スタイルシート
　　　　　　
title属性のあるもの--代替スタイルシートが選択されたときには使われない
　　　　　　
title="標準">
　　　　　　
代替スタイルシート
　　　　　　
Alternate Stylesheetとtitleのあるもの。ユーザーの選択肢となる
　　　　　　
title="反転"
　　　　　　
メディアタイプ
　　　　　　
印刷が想定されるページには必ず指定しておきましょう。
　　　　　　

　　　　　
　　　　
HEAD内に記述: 　　　　; STYLE要素に対応していないブラウザではそのまま表示されることがあるので前後をでエスケープしておく。; 同じ対象に対して詳細度が同じだとこちらが優先される。; その他　　　　　
　　　　　　
印刷用スタイルシート
　　　　　　
印刷が想定されるページには必ず指定しておきましょう。全体を@media print{}で囲む。
　　　　　　
　　　　　　　
@media print{ body{ color:black; } }


　　
　　　HTML/CSSをユニコードで作成した場合、ファイルの最初にBOM(Byte Order Mark)コードが付加されることがあります。これはない状態で保存、アップロードします。


　　
　
　　
　　　First Published
　　　2011-05-10

ORUKA1951 · Answer

補足：この場合、CSSのURLじゃなくてHTMLのURLを入れないとだめです。

ORUKA1951 · Answer

CSSが参照できていない理由はいくつかありますが、ひとつは参照できているものと比較すると良いのですが・・

サンプルを探して書いておきますが、ちょっと時間が必要なのでとりあえず
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_uri )
でURLを入力してテストしてみること。

yasubee2 · Answer

キャッシュの削除は試されたでしょうか。
ブラウザのキャッシュを使用しているため、反映されないのかもしれません。
Firefoxの最近の履歴の消去から、キャッシュを削除してみてはどうでしょうか。

外部CSSがFireFoxで反映されません

先のHTMLと同じ階層にCSS2と言うフォルダーを作成してこれらのファイルを指定されたファイル名で置き、アップロードする。

サンプルです。

補足：この場合、CSSのURLじゃなくてHTMLのURLを入れないとだめです。

CSSが参照できていない理由はいくつかありますが、ひとつは参照できているものと比較すると良いのですが・・

キャッシュの削除は試されたでしょうか。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

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

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