外部CSSがFireFoxで反映されない問題

2011/05/15 01:14

このQ&Aのポイント

外部スタイルシートを使用していますが、FireFoxではCSSが反映されません。
同じファイルを別のサーバーにアップした場合には問題なくCSSが反映されるが、本来のサーバーでは反映されません。
原因を特定するために検索してみましたが、解決策が見つかりませんでした。助けてください。

chacha-mami
お礼率40% (2/5)

CSS
回答数5
ありがとう数3

みんなの回答 （5）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/15 18:36 回答No.5

先の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;}

その他の回答 (4)

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/15 18:24 回答No.4

サンプルです。チェックポイントは下記 ★HTML,CSSともにテキストモードでアップロードする。 ★文字コードはShift_JIS ★firefoxで表示→スタイルシートで「スタイルシートを使用しない」になっていないか ★文字コードをUTF-8に変えてアップロード　そのときHTML/CSSの文字コード指定部分も必ず変更すること　UTF-8にBOMコードはつけない(HTML/CSSとも) ★下記のソースはタブインデントが全角スペースに置換してある。必ずタブに置換しなおすこと。 ★httpはｈｔｔｐに変換してある。これも半角に戻すこと。 ★CSSは次回 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "ｈｔｔｐ://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> 　<meta ｈｔｔｐ-equiv="content-type" content="text/html; charset=Shift_JIS"> 　<title>サンプル</title> 　<meta name="author" content="ORUKA"> 　<meta ｈｔｔｐ-equiv="Content-Style-Type" content="text/css"> 　<style type="text/css">  　</style> 　<link rev="made" href="mailto:hoge@hoge.com" title="send a mail" > 　<link rel="StyleSheet" type="text/css" href="./CSS2/default.css"> 　<link rel="StyleSheet" type="text/css" media="screen" href="./CSS2/std.css" title="標準"> 　<link rel="Alternate StyleSheet" type="text/css" media="screen" href="./CSS2/rev.css" title="反転"> 　<link rel="StyleSheet" type="text/css" media="print" href="./CSS2/print.css" > 　<link rel="START" href="../index.html"> 　<link rel="NEXT" href="./page1.html"> </head> <body> 　<h1>サンプル</h1> 　<div class="section"> 　　<h2>CSS2.1</h2> 　　<div class="abstract"> 　　　<p> 　　　　スタイルシートの確認用、数枚のスタイルシートを用途によって切り替えてみる。表示→スタイルシートで代替スタイルシートを選択する。また印刷、もしくは印刷プレビューで印刷時のスタイルを確認する。　　　</p> 　　</div> 　　<div class="section"> 　　　<h2>スタイルシートの色々</h2> 　　　<p>HTML4では、HEAD内のMETA要素の<code><meta ｈｔｔｐ-equiv="Content-Style-Type" content="text/css"></code>が必須です。そのうえで</p> 　　　<dl> 　　　　<dt>外部スタイルシート</dt> 　　　　<dd>LINK要素の<code><link rel="StyleSheet" type="text/css" ・・・</code>の記述で参照します。CSSには必ず@charset ""を<strong>正確に</strong>記述します。文字コードはできるだけ本体のHTMLと合わせましょう。文字コードが異なる場合はLINKの属性値でも指定しておきましょう。</dd> 　　　　<dd> 　　　　　<dl> 　　　　　　<dt>固定スタイルシート</dt> 　　　　　　<dd>titleのないもの。mediaもない場合すべての端末に対して有効になる</dd> 　　　　　　<dd><link rel="STYLESHEET" href="default.css" type="text/css"></dd> 　　　　　　<dt>優先スタイルシート</dt> 　　　　　　<dd>title属性のあるもの--代替スタイルシートが選択されたときには使われない</dd> 　　　　　　<dd><link rel="STYLESHEET" href="standard.css" type="text/css" <strong>title="標準"</strong>></dd> 　　　　　　<dt>代替スタイルシート</dt> 　　　　　　<dd>Alternate Stylesheetとtitleのあるもの。ユーザーの選択肢となる</dd> 　　　　　　<dd><link rel="<strong>Alternate STYLESHEET</strong>" <strong>title="反転"</strong></dd> 　　　　　　<dt>メディアタイプ</dt> 　　　　　　<dd>印刷が想定されるページには必ず指定しておきましょう。</dd> 　　　　　　<dd><link rel="StyleSheet" type="text/css" media="print" href="./CSS2/std.css" > </dd> 　　　　　</dl> 　　　　</dd> 　　　　<dt>HEAD内に記述</dt> 　　　　<dd><style・・で記述。</dd> 　　　　<dd>STYLE要素に対応していないブラウザではそのまま表示されることがあるので前後をでエスケープしておく。</dd> 　　　　<dd>同じ対象に対して詳細度が同じだとこちらが優先される。</dd> 　　　　<dd><pre><style type="text/css">  </style> </head></pre></dd> 　　　　<dd>その他　　　　　<dl> 　　　　　　<dt>印刷用スタイルシート</dt> 　　　　　　<dd>印刷が想定されるページには必ず指定しておきましょう。全体を@media print{}で囲む。</dd> 　　　　　　<dd> 　　　　　　　<pre>@media print{ body{ color:black; } }</pre> 　　　　　　</dd> 　　　　　</dl> 　　　　</dd> 　　　</dl> 　　</div> 　　<p> 　　　HTML/CSSをユニコードで作成した場合、ファイルの最初にBOM(Byte Order Mark)コードが付加されることがあります。これはない状態で保存、アップロードします。　　</p> 　</div> 　　<hr> 　<div id="Document_Information"> 　　<dl class="document-version"> 　　　<dt id="FIRST-PUBLISHED">First Published</dt> 　　　<dd>2011-05-10</dd> 　　</dl> 　</div> 　<div class="W3C_Valid"> 　　<p> 　　　<a href="ｈｔｔｐ://validator.w3.org/check?uri=referer" title="HTML4.01チェック:"><img src="ｈｔｔｐ://www.w3.org/Icons/valid-html401" 　　　 alt="Valid HTML 4.01!" height="31" width="88" style="border:0;width:88px;height:31px"></a> 　　</p> 　　<p> 　　　 <a href="ｈｔｔｐ://jigsaw.w3.org/css-validator/check/referer" title="CSS2チェック:"><img style="border:0;width:88px;height:31px" 　　　 src="ｈｔｔｐ://jigsaw.w3.org/css-validator/images/vcss" 　　　 alt="Valid CSS!" height="31" width="88"></a> 　　</p> 　</div> </body> </html>

質問者

お礼 2011/05/16 00:11

サンプルコードどうもありがとうございます。色々とありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/15 09:21 回答No.3

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

質問者

お礼 2011/05/16 00:09

お返事が遅くなりすみません。ご回答ありがとうございました！ご指摘いただいた通り、CSS検証やリントチェックは検証済みでほぼエラーはありませんでした。 2箇所のレンタルサーバーにアップしてもFireFoxで問題なく表示されていましたが、全く同じファイルをクライアントの契約しているレンタルサーバーにアップした場合のみCSSが反映されていない状況でした。先程、サーバー側の設定を変更し改善した。と、ディレクタより連絡が入りました。（検証結果は、未確認ですが、これから詳細を確認する予定です。）取り急ぎ御礼のご連絡をさせて頂きました。色々とどうもありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2011/05/15 09:20 回答No.2

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