• ベストアンサー

CSSの外部ファイル読み込み、他にも方法はある?

サーバーの設定で***.cssを読み込んでもテキストファイルとして認識してしまい。ネットスケープでcssが反映されないのです。(nn4.7/nn7で確認)この状態を改善したいのですが、全てのページにcssを埋め込んでいくとなると作業量が膨大になるため、別の方法を模索しています。 今は <link href="***.css" rel="stylesheet" type="text/css"> という形でやっています。 これを別の方法で解決したいのです。 例えば、javascriptを使用して読み込むなどです。 どなたか良い解決法をご存知でしたら 情報提供お願いします。

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

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

  • ベストアンサー
  • shhkmg
  • ベストアンサー率28% (105/363)
回答No.3

あくまで私の体験談ですので参考になるかどうか…… 実は私のサイトでも,最近になって外部CSSを採用する事にしたのですが,ネスケ7.02ではなくFirefox1.5.0.2でCSSが反映されないと言う症状に陥りました。 頭が膿みそうになりながらいろいろGoogle検索した結果,どうも使用しているサーバソフトの仕様というか「バグ」である事を突き止めました。 具体的には,サーバソフトのMIMEタイプの設定では確かに「text/css」と出来るのですが,実際にクライアント側へは何故か「text/plain」として吐き出してしまうのです。 この問題を解決する為のスクリプトが配布されていたので、これをルートディレクトリに置いたところ、無事解決されました。 ということで、もしかしたらサーバソフトの問題である可能性も否定出来ません。 でもまさか、サーバでCSSのMIMEタイプを間違えている……なんて事は無いですよね? 念のため。 またMozilla系列のブラウザは、例え読み込んだCSSファイルに「.css」が付いていようとも,MIMEタイプが「text/plain」である場合,それを「額面通り」に解釈してしまう、すなわちCSSファイルをただのテキストデータの集合とみなし、CSSを反映させないことがままあるようです。 IEなどではきちんと拡張子「.css」で解釈し,反映させてくれるのですが。

その他の回答 (4)

  • shhkmg
  • ベストアンサー率28% (105/363)
回答No.5

さらに追記で申し訳ありません。 私の体験談は自宅サーバを開設している為のものです。 したがって、あなたのサイトを例えばプロバイダのHPスペースやレンタルサーバにて運用されているとすると,私の体験談は的外れなものになってしまうかもしれません。 ですが、もしかしたら、プロバイダやレンタルサーバ運営会社が、問題のあるサーバソフトを使っているか,あるいはMIMEタイプを単純に間違えている可能性も否定出来ません。 一度確認されてみては如何でしょうか。

pochitarou
質問者

お礼

shhkmgさん。 たくさん回答していただきありがとうございます。 やはり、状況をもっと絞り込んでいかないと、回答される方も推測で似たようなケースの場合でしか説明できないですよね~。

  • shhkmg
  • ベストアンサー率28% (105/363)
回答No.4

追記です。 あなたのCSSファイルが果たしてどんなタイプのファイルとして吐き出されているかを調べるサイトのURLを貼っておきます。 http://web-sniffer.net/

回答No.2

>テキストファイルとして認識 何を以ってその様に判断されたのでしょうか? 「これはテキストファイルです」などというメッセージが出るとは思えないので何かしらの情報を得ているのですよね? その辺が解らないと「読み込む」という事を求める時に常にテキストファイルとして認識される訳(質問の前提がそう提示されている)ですので、CGIなどでHTMLファイルを編集という発想しか無理という事になりますが・・・。 CGIで読み込み、STYLEタグでの記述の一部としてCSS外部ファイルから読み込んだテキストデータを書き込めば良いだけで・・・。 JavaScriptだと、CSS外部ファイルから読み込むという事が・・・。という事でJavaScript外部ファイルでHTML書き出し処理の一部として埋め込むか、変数の初期値として用意しておくか・・・。 当然、HTMLの書き出しはSTYLEタグの書き出しです。 管理が面倒なのとJavaScriptが無効だと使えない・・・。 尚、もともとCSSの内容によってはブラウザの種類,バージョンによって有効,無効が異なります。 拡張機能やらバグやら・・・。 結局、最低限の検証用ソースを作成して状況を絞り込み、その上でそのソースを提示するなどしないと、詳細な回答は難しいです。

pochitarou
質問者

お礼

テキストとして認識というのは、私より詳しい者から聞いた話で、自分では理解をしていませんでした。もっと厳密に理解していないといけないのですね。 解説ありがとうございます。 これからはもう少し具体的に状況を絞り込みます。

  • partita
  • ベストアンサー率29% (125/427)
回答No.1

@importは使えますか?

参考URL:
http://msugai.fc2web.com/web/CSS/add.html
pochitarou
質問者

お礼

@importもだめでした。 すみません。ありがとうございます。

関連するQ&A

  • CSSを外部ファイル

    CSSを外部ファイルで作成して <link rel="stylesheet" href="○○○.css" type="text/css">で参照したいのですが外部ファイルは H1{color : #000000;} を反映させたいときこれだけ書けばいいのでしょうか。サイトの説明を読んでもよくわかりません。

  • HTMLメールの外部CSSが有効になりません

    HTMLメールから以下のように外部CSS(http://から始めてます)を利用したいのですが、実際にOUTLOOK 2003 SP3で見るとスタイルが適用されていません。 ローカルで同じHTMLをブラウザで開くとスタイルは適用されます。HTMLメールのときは何か特別なことが必要なのでしょうか? <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> ヘッダ全体を以下に掲載しておきます。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head> <title>TITLE</title> <link href="http://domain/style.css" rel="stylesheet" type="text/css"> <script language="JavaScript1.2" src="http://domain/js.js" type="text/javascript"></script> <link rel="stylesheet" href="http://domain/style2.css" type="text/css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head>

  • 外部ファイルによるCSSにおいて

    参照側の <link rel="stylesheet" type="text/css" href="x.css" title="xxxx"/> においてtitleをつける意味と使い道を教えてください

    • ベストアンサー
    • HTML
  • 一部のページにデフォルトCSSを読み込ませない方法

    一部ページにCSSを読み込ませない方法がありましたら、 ご教授ください。 例えば、 全ページに以下のCSSを共通で読み込ませてあります。 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> しかし、test.htmlだけ <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" /> を読み込ませたくありません。 つまり、 <link rel="stylesheet" type="text/css" media="screen" href="css/common.css" /> は通常通り読み込んで、 <link rel="stylesheet" type="text/css" media="screen" href="css/index.css" />のみを 除外したいです。 * 共通のCSSは外すことはできません。 * また、CSSを新たに追加することもできません。 * head内にスクリプトを記述することができますが、スクリプトの記述で解決できますでしょうか。 自分で検索もしてみたのですが、答えに辿りつけません。 どのような方法がありますでしょうか。 何か方法がありましたら、ご教授ください。 よろしくお願いいたします。

    • 締切済み
    • CSS
  • CSSで、外部スタイルシートを2つ指定した場合。

    たとえば、 <link href="style.css" rel="stylesheet" type="text/css"> <link href="info.css" rel="stylesheet" type="text/css"> のように2つスタイルシートを指定した場合、同じ内容のスタイルシートを書き込んだ場合どちらが優先されるのでしょうか。

    • ベストアンサー
    • HTML
  • 外部ファイルを読み込んだhtmlをinclude

    外部ファイルを読み込んだhtmlをincludeしたいです。 ディレクトリの階層は、 index.php style.css /pic/picture.html /pic/css/style1.css /pic/css/style2.css : /pic/css/style13.css /pic/js/jquery1.js /pic/js/jquery2.js : /pic/js/jquery15.js : (画像などが他にもいっぱい) となっています。 ----- picture.html内には <link rel="stylesheet" type="text/css" href="css/style1.css"> <link rel="stylesheet" type="text/css" href="css/style2.css"> : <link rel="stylesheet" type="text/css" href="css/style13.css"> <link rel="stylesheet" type="text/css" href="js/jquery1.js"> <link rel="stylesheet" type="text/css" href="js/jquery2.js"> : <link rel="stylesheet" type="text/css" href="js/jquery15.js"> : と書かれています。 ---- このときindex.phpのbody内に <?php include('./picture.html'); ?> とした場合、相対パスによる記述なのでpicture.html以外のcssやjsは適用されませんよね。 しかし/pic/内にあるすべてのpicture.htmlに関係するファイルは非常に数が多いので、これらすべてをincludeするのは厳しいです。 すべての外部ファイルを読み込んだ状態のpicture.htmlをbody内に表示したいのですが、そんなことは可能でしょうか。 どなたかご教示ください。どうかよろしくお願いします。

    • ベストアンサー
    • PHP
  • CSSが反映されないで困っています;;

    日本のホストの時は、CSSがHTMLにうまく反映されていたのですが、 ホストを海外の T35Hosting と Graffiti.net で同じ様に挑戦したら CSSが反映されませんでした;; index.htmlのヘッド内に下記を書いて、 top.cssの名前でCSSを書きました。 <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="top.css" type="text/css"> </head> なぜか、反映されませんでした;; 「/」(ルートディレクトリ)と何か関係あるのでしょうか。 <link rel="stylesheet" href="top.css" type="text/css">の行の href="top.css" を href="/.top.css" などに変えなくてはいけないのでしょうか。。。 お知りの方 よろしくお願いします。

  • 外部cssの記述方法について

    よろしくお願いします。 cssを外部リンクにしたくご質問をさせて頂きました。 まず、始めにフォルダの構成ですがWフォルダというのがあります。 その中に、1というフォルダがあります。 その1フォルダの中にトップページが入っています (直下に置きたくないため) そのトップページのcssを外部リンクにするために以下の記述を<head>~</head>内にしました。 <link href="1.css" rel="stylesheet" type="text/css" media="all" />  ←inde.htmlにのみ適用したいcss <link href="commonness.css" rel="stylesheet" type="text/css" media="all" /> ←全てのページに共通に適用したいcss 上記の記述で、cssファイルは1フォルダの中に保存しました。これですとcssは適用されるのですが これを1フォルダの中にcssフォルダを作成して、cssファイルを cssフォルダに保存して以下のように記述すると cssが適用されなくなってしまいます。 <link href="css/1.css" rel="stylesheet" type="text/css" media="all" /> ←inde.htmlにのみ適用したいcss <link href="css/commonness.css" rel="stylesheet" type="text/css" media="all" /> ←全てのページに共通に適用したいcss また、別のページですが、1フォルダの中にaというフォルダを作成してtest1.htmとtest2.htmlが入っております。 その際ですが、commonness.cssは共通で適用させたく、更にはtest1.htmとtest2.htmlにのみ適用させたいcssもあるのですが htmlへの記述方法がいまいち理解出来ずご質問をさせていただきました。 私は、Wというフォルダにcssというフォルダを作成して、その中に全てのcssファイルを保存しようと考えていたのですが、考え方が間違っておりますでしょうか? 共通に適用させたいページが保存してあるフォルダの中全てに、commonness.cssファイルを保存した場合、 いざ、編集する際に全てのcssを編集しなければならなく、それでは外部cssにする意味が無いと思うのですが やはり、そうでしょうか? うまく、説明が出来ないのですが、どなた様かご指導の程よろしくお願いします。

    • ベストアンサー
    • HTML
  • javascriptにてcss切り替え

    現在webサイトを作成しており、javascriptのcss切り替えにてページの色変更を作っています。 (青、緑、赤、三色で作成) デフォは青で表示しています。 その後緑、赤とリンクで色が変わるようにしています。 ここでご質問です。 緑をクリックした場合は緑に変わる(赤も同様)のですが、別ページにリンクした場合、緑(赤)ではなく青に戻ってします。 別ページにとんでも緑(赤)が引き継がれるにはどのように記述したらよろしいでしょうか? ソースは以下のとおりです。 <head> <link rel="stylesheet" type="text/css" href="css/blue/top.css" media="all" /> <script src="js/styleswitch.js" type="text/javascript"></script> <link rel="alternate stylesheet" type="text/css" title="blue" href="css/blue/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="green" href="css/green/top.css" media="all" /> <link rel="alternate stylesheet" type="text/css" title="red" href="css/red/top.css" media="all" /> </head> <body> <div style="width:200px;"> <a href="javascript:chooseStyle('blue', 30)">青</a><br /> <a href="javascript:chooseStyle('green', 30)">緑</a><br /> <a href="javascript:chooseStyle('red', 30)">赤</a> </div> </body> javascriptは以下のところからしようしています。 http://noongoro.main.jp/note/note0059.html javascriptは初心者です。 ご教授お願いいたします。

  • Macfirefox3とMacfirefox2以下でCSSを切り替えたい

    MacのFirefox3は、Firefox2までとはデフォルトフォントサイズが 違うので、Firefox3とそれ以外のFirefoxで分けたいです。 今まで、CSSを以下のスクリプトでブラウザ別に分岐していました。 MacのFirefox3の分岐を増やしてみたのですが、それ以外のFirefoxのCSSに 分岐されてしまいます。 あまりJavascriptに明るくないので、 どうしてわかれてくれないものか困っています。 どうぞお知恵をお貸し下さい! ↓以下、かいてみたソースです。 var Win=(navigator.userAgent.indexOf("Win")!=-1); var Mac=(navigator.userAgent.indexOf("Mac")!=-1); var Explorer=(navigator.appName.indexOf("Explorer")!=-1); var Firefox=(navigator.userAgent.indexOf("Firefox") !=-1); var Netscape=(navigator.appName.indexOf("Netscape")!=-1); var opera=(navigator.userAgent.indexOf("Opera")!=-1); var safari=(navigator.userAgent.indexOf("Safari")!=-1); var Version=navigator.appVersion.charAt(0); if(safari){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Explorer && Version=="6"){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && Firefox){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } else if(Win && opera){ document.write('<LINK rel="stylesheet" href="/css/win_ie.css" type="text/css">'); } /*増やしたところ*/ else if(Mac && Firefox && Version=="3"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); }/*増やしたところ終わり*/ else if(Mac && Firefox){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && opera){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Win && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/win_nn.css" type="text/css">'); } else if(Mac && Explorer && Version=="5"){ document.write('<LINK rel="stylesheet" href="/css/mac_safari.css" type="text/css">'); } else if(Mac && Netscape && Version=="7"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else if(Mac && Netscape && Version=="4"){ document.write('<LINK rel="stylesheet" href="/css/mac.css" type="text/css">'); } else{ document.write('<LINK rel="stylesheet" href="/css/font.css" type="text/css">'); }

専門家に質問してみよう