人に聞けない痔の悩み、これでスッキリ >>

IEで外部スタイルシートが反映されない


HPを製作したところ、
Firefoxでは、完璧に外部スタイルシートが適用されていたのですが、
IEでテストしたところ、CSSが全く反映されていてませんでした。

多くの皆さんがしてるように、
ヘッダーに、
<link href="style.css" rel="stylesheet" type="text/css" />
と記述しているのですが・・・


原因としては何が考えるでしょうか?

ご助力願います。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

別アカウント作成した質問者です。



ご報告いたします。
原因が判明しました

CSSの一番上、
@charset "utf-8;


このutf-8の後の”(アポストロフィ)が消えてました。

@charset "utf-8";が必要なのは、IEの7以前のみ。
なので、IE8とMozilaは問題なく表示されたようです。


皆様ご協力ありがとうございました。


因みに、この場合、
なぜか次のBodyの部分や、他の部分がチェッカーに引っ掛かっていました。
    • good
    • 1

htmlファイルと、CSSのファイルで文字コードを確認してみてください。


また本当に、宣言している文字コードで作成されているか確認してみてください。

この回答への補足

Utf-8で統一済みです

補足日時:2010/03/19 20:55
    • good
    • 0

基本的には


<meta http-equiv="Content-Style-Type" content="text/css">
<!-- 以下、外部スタイルシートを必要なだけ -->
<link rel="stylesheet" type="text/css" media="all" href="./CSS/default.css">
<link rel="styleSheet" type="text/css" media="screen" href="./CSS/Shape.css">

もし文字コードがHTMLと異なるときは、charsetもあるほうがよい。

なお、HTML、CSSに間違いがないかは
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
でチェックしてあること
    • good
    • 1

はじめまして。


IEだけスタイルシートが反映されないのはおかしいですね。
コードも特におかしなところはないと思います。

コードだけでは分からないので、アドレスも載せてもらえると何か分かるかもしれません。

この回答への補足

IE8では通所通り表示されていましたが、
どうやらIE7以前では表示されないようです。

URLを載せたいのは山々なのですが、
現在公表できません。

補足日時:2010/03/19 17:49
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qスタイルシート(CSSスタイル)が読み込めない。

Webデザイナー修行中の者です。

社内の人が作ったホームページ。背景や線の画像を各
ページで統一するため、ソースをコピー&ペーストして
新たなページを作ったのですが、作成の時点では線画像も
背景も表示されるのですが、ブラウザで見てみると背景も
線も出ません。
おそらくスタイルシートというもの(CSSスタイル)が
読み込めていないのだと思いますが、考えられる原因は
どんなものでしょう?
作成者に聞けばいいのでしょうが、いないので聞くことが
できません。
かといって、大幅にページを変更する時間もなく、私が
作るページだけを全く別の背景等にするのも、不自然な
ものになってしまいます。
業務にかかわるものですので、Webページやタグを公開
できないのですが、アドバイス、よろしくお願いいたし
ます。

作成はメモ帳、またはDreamweaver4を使用しています。

Aベストアンサー

No1です。
えと、あなたのPCにサイトの全データがあるわけではないのですね。
だったらそのPC上では確認できないかもしれませんね。
方法としては、言われるとおりアップして確認する方法。
もう1つはCSSファイルをDLし、サイトと同じ階層構成を作り上げることです。
<link rel="stylesheet" href="../catalog/stylesheet.css" type="text/css">
の場合は、保存してあるフォルダの1つ上に「catalog」というフォルダを作り、そこにDLした「stylesheet.css」を配置しブラウザで確認してください。
ちゃんとCSSが認識されるはずです。

Qアップロードすると、スタイルシートが反映されない

外部にcssファイルを作り、
文字のみスタイルシートで制御します。
DREAMWEAVER上でスタイルシートは反映されています。
F12を押しても、スタイルシートは反映されています。
しかし、フォルダからhtmlファイルを直接ひらいたり、
アップロードしたファイルをみると、
スタイルシートが反映されていません、
もちろん、cssファイルも一緒にアップロードしてます。
DREAMWEAVER4を使っています。

なんでだか、わかりません。。。
お手数かと思いますが、よろしくお願いします。

Aベストアンサー

こんばんわぁ、Blackwinglsです。

ちょっと心配になって動作確認してみました。

あれ、確かに思った通りの動作しませんねぇ・・・

でソースを良くみてみたらパスがチョットおかしいかも(^^;)

ソースの
<link rel="stylesheet" href="/textStyle.css" type="text/css">
の部分を
<link rel="stylesheet" href="./textStyle.css" type="text/css">
に変更して試してみてください。

恐らくhtmlファイルと同じ階層(フォルダ)にcssファイルをアップしてるんですよね。
最初の記述だとルートにcssファイルがあることになってしまうので・・・・・

ではでは~☆彡

Qcharset=UTF-8だと外部cssファイルが効いてくれません !

htmlファイルで、テーブルのセルの背景色設定をつぎのようにしました。
外部cssファイルで背景色を
.colbg1 {background-color: #00aaff} と指定し、
htmlファイルでは、
<TD background-color:DIV class=colbg1> としました。

そして、言語と文字コードを下記のようにすると、背景色が出ません。
(他の色では出ることもあったりして不確実なのです。)
言語:<META http-equiv=content-type content="text/html; charset=UTF-8">
文字コード:UTF-8(または UTF-8N)で保存。

UTF-8 でなくて SHIFT-JIS にすると、ちゃんと背景色が出るんです。

外部cssファイルを使用して、UTF-8 で確実に背景色を出すにはどうすればよいのでしょうか?

<TD bgcolor="#00aaff">とは、死んでもしたくないんです。(大げさ)

Aベストアンサー

こんにちは

自分も経験があるので多分、、、そうかなとおもうのですが、
外部cssの先頭に

@charset "Shift_JIS";

と記述したら背景色、付きますでしょうか?

htmlページがUTF-8で、外部CSSがShift_JISなど
ページとCSSの文字コードが異なる場合は、

外部CSSの先頭1行目に、CSS自体の文字コードの宣言を
記載しておく必要があるようです。

http://www.lucky-bag.com/archives/2004/11/css_2.html
http://www.tg.rim.or.jp/~hexane/ach/hscs/hscs5-06.htm
http://www6.plala.or.jp/go_west/nextcss/guide/how2ref.htm
http://www.mitsue.co.jp/case/design/c_009.html

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Q文字の位置、上下のマージンがずれる

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認してみると・・・

・IE8だと、2段目のテキスト位置が1px上に上がり、pの高さも1px縮む
・IE9だと、1段目と2段目のテキスト位置が1px上に上がり、2段目のpの高さが1px縮む

それぞれのpに高さを決めれば問題はないようですが、
高さを決めずにテキストを配置する場合、
この誤差については対応ができないものなのでしょうか?

pタグに限らず、ul、dlなんかでもずれることが多いです。
テキストをぴったりを合わせる技術ってないのでしょうか?

仕事でHTML+CSSでコーディングをされる方、
または精通されている方に質問です。

pタグで2行の段落を続けて配置してみました。
IE6・7、FF、Chrome、Safariではぴったりレイアウトが合うのですが、
IE8・9で確認すると誤差が生じます↓

<p>あああああ</p>
<p>かかかかか</p>

★pに対する指定
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","MS Pゴシック","MS PGothic";
font-size: 14px;
line-height: 1;
margin: 0;
padding: 0;

各pタグにわかりやすく背景色をつけて確認して...続きを読む

Aベストアンサー

まず、line-height:20pxのように、line-heightをpxで指定してみてください。
ブラウザの違いによる縦の誤差はなくなるはずです。

誤差が生じる原因としてはOSやブラウザの違いから、フォントやレンダリングの違いによるものです。
なので、font-size:14px;に指定していても、line-heightをemや%で相対的に指定している場合は、必ず誤差が生じます。

なお、文字列の横をそろえるのほぼ無理と考えてください。

>pタグに限らず、ul、dlなんかでもずれることが多いです。

こちらに関しては、ブラウザ間のデフォルトの差異をなくすため、リセットCSSがよく使われます。
リセットCSS、reset cssなどで検索してみれば色々出てくるでしょう。
最近はHTML5を考慮しているものもたくさんあるので、そちらを使った方が良いでしょう。
しかし、これも完全に誤差をなくせるというわけではありませんが、一度試してみると良いでしょう。

Q複数のボタンを等間隔に、かつ中央に配置する

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button">
<input type="submit" value=">> 進 む>>" />
</div>

↓CSSファイルです↓
div.button {
padding-right:35px;
float:left;
}

上記設定で、ボタンの左右間隔はいい感じにあいたのですが
全体的に左に寄ってしまってます。

よろしくお願いいたします。

ホームページで、ボタンを横に3つ等間隔に、適度な余白をもって並べ、
さらにその3つがちょうどページの中央に表示されるようにしたいです。
cssをどのように記述すればいいですか?
↓下記のようなイメージにしたいです。

--------------------
--------------------
    □ □ □  ←これがボタンです


↓htmlファイルです↓
<div class="button">
<input type="submit" value="<< 戻る <<" />
</div>

<div class="button">
<input type="submit" value="選択リセット" />
</div>

<div class="button...続きを読む

Aベストアンサー

<div class="button">
<input type="submit" value="<< 戻る <<" />
<input type="submit" value="選択リセット" />
<input type="submit" value=">> 進 む>>" />
</div>

div.button {
text-align:center;
}
div.button input {
margin: 0px 20px;
}

Qcssが反映されません

FC2のホームページについてです。

ホームページはなんとか作れてサーバーにアップしたのですが、
style.cssで設定した背景画像とスクロールバーが反映されません><
テンプレートをお借りして、その中に入っていたstyle.cssもそのままffftpに
アップロードしました。

ファイル内で自分のホームページを見てみると背景画像と色など設定したスクロールバーは
しっかり反映されているのですが、サーバーにアップすると反映されません。

ffftpにstyle.cssをそのままアップロードしたのが間違いだったのでしょうか;;
検索して調べてみるとCSSのフォルダごとアップロードしろと書いてあったりするのですが
テンプレートに入っているのはstyle.cssというものだけで、cssフォルダは入っていません。
それともcssフォルダは自分で作るのですか><?

Aベストアンサー

とても忙しいのですが、少し時間が取れたのでサイト拝見しました。
本当にまだ初心者なのですね。
ちょっとショックかもしれませんが、ページを作成したら
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
 などでチェックするのがもっとも良いです。減点0の項目は宗教的なものもありますからこだわらなくて良いですが、減点数の書かれているものは治すと良いでしょう。
 Another HTML-lintは、厳しいですがなにが悪いかと、その解説や対策まで教えてくれるからとても勉強になります。

<DOCTYPE>の宣言がされていますが、今からはじめられるなら必ずstrictにするべきです。これは1999年のHTML4.01の勧告時に
『HTML文書を作る場合には、この仕様における、他のDTDセットではなく strict DTD に適合する文書を作るよう推奨する。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/conform.html#h-4.1 )』とされて来たものです。多分参考にされている書籍かサイトは相当古いものだと思います。
 というか、まったく仕様書を知らない人が作られたテンプレートではないかな。Another HTML Lintを確認するまでもなく酷いものです。

 その後、そのままXML化されたXHTML1.0の後、XHTML1.1が勧告されましたが、XHTML1.1ではstrict以外はありません。【現在、勧告直前になっているHTML5は、HTML4.01strictの改訂で、transitinal的なものは一切ありません。】

 そして、HTML4.01で方向性は示されていたのですが、それがまったく徹底していなかった反省からHTML5は、完全に文書構造とプレゼンテーション(表現)は分離されます。たとえば、
「構造とプレゼンテーションの分離 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」
「単に文書内容を整形する目的だけで表を用いるべきでない。 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.1 )」
★<DOCTYPE>はおまじないなんかじゃありません。仕様書にきちんと書かれているルールです。これはブラウザ(IE)を標準モードで起動させるスイッチにもなっています。
→DOCTYPEスイッチ - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&sclient=psy-ab&q=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&oq=DOCTYPE%E3%82%B9%E3%82%A4%E3%83%83%E3%83%81&gs_l=hp.3..35i39j0.254219.263038.2.263743.24.19.5.0.0.0.330.2992.0j18j0j1.19.0...0.0...1c.1.ix0-Vuoh6Ac&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=769cfc6a4773dbdc&biw=1024&bih=619 )

 実は、DOCTYPEの宣言以上にあなたのサイトは、この点で誤りだといえます。厳しいですが、これは今後は絶対に守らなければならない条件の一つです。詳しくは
・スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 )
 など。

たぶん携帯やスマートホンを想定されたページだと思います。
本来は下記サンプルのようにシンプルなものであるはずです。
iframeはstrictでは使えませんので、objectを使っています。
そのため、targetは同様に使えませんので、それぞれのページにこのソースを書く方が良いです。
 →FRAME 問題 HTML - Google 検索 ( https://www.google.co.jp/#hl=ja&safe=off&output=search&sclient=psy-ab&q=FRAME+%E5%95%8F%E9%A1%8C+HTML&oq=FRAME+%E5%95%8F%E9%A1%8C+HTML&gs_l=hp.3..0i8i10i30j0i8i30.2515.15781.1.16360.23.20.3.0.0.0.408.3490.0j15j3j1j1.20.0...0.0...1c.1.Jvj_QaC4uiM&psj=1&bav=on.2,or.r_gc.r_pw.r_qf.&fp=769cfc6a4773dbdc&biw=1024&bih=619 )


★Anothe HTML Lint
★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input )
でテスト済み
(注意) タブは_に置換してあるので戻すこと!!!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
_<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
_<meta http-equiv="Content-Script-Type" content="text/javascript">
_<title>pochette</title>
_<meta http-equiv="Content-Style-Type" content="text/css">
_<link rel="stylesheet" type="text/css" media="screen" href="./test.css">
_<style type="text/css">
<!--
-->
_</style>
</head>
<body>
<!-- ここから -->
_<div class="header">
__<h1>*pochette*</h1>
_</div>
<!-- ここまではすべてのページで共通 -->
_<div class="section">
__<h2>本文</h2>
__<p><object data="./main.html">新着情報は<a href="./main.html">新着情報</a>へ</object></p>
__<div class="Navigation">
___<ul>
____<li><a href="main.html">Top</a></li>
____<li><a href="about.html">About</a></li>
____<li><a href="material.html">Material</a></li>
____<li><a href="bbs.html">BBS</a></li>
____<li><a href="link.html">Link</a></li>
___</ul>
__</div>
__<p><img src="./g8.png" height="273" width="250" alt=""></p>
_</div>
<!-- ここから -->
_<div class="footer">
__<address>Copyright (c) 2012 *pochette* All Rights Reserved.</address>
<!-- ここまではすべてのページで共通 -->
<script type="text/javascript"><!--
この部分はFC2自動挿入なので省略
-->
</script>
_</div>
</body>
</html>

[CSS]
@charset "Shift_Jis";
html,body{margin:0;padding:0;}
body{
_color: #808080;
_font-family: 'Osaka,verdana';
_font-size: 10px;
_letter-spacing: 1px;
_line-height: 12pt;
_text-align:center;
}
div.header,div.section,div.footer{
width:30%;min-width:320px;
margin:0 auto;
}
div.section object{width:300px;height:200px;}
a:link{color: #808080;}
a:hover {color: #FF8040;}
h1,div.Navigation{
background-image: url("./cccc12.png");
}
div.section div{margin:20px

とても忙しいのですが、少し時間が取れたのでサイト拝見しました。
本当にまだ初心者なのですね。
ちょっとショックかもしれませんが、ページを作成したら
★Another HTML-lint 5 ( http://www.htmllint.net/html-lint/htmllint.html )
 などでチェックするのがもっとも良いです。減点0の項目は宗教的なものもありますからこだわらなくて良いですが、減点数の書かれているものは治すと良いでしょう。
 Another HTML-lintは、厳しいですがなにが悪いかと、その解説や対策まで教えてくれるからとても勉強になりま...続きを読む

Q白い部分を透明にすることは可能ですか?

ペイントで白い部分を透明にすることは可能ですか?
やり方を教えてください。
ペイントじゃできないのかも教えてください。

Aベストアンサー

 残念ながらペイントでは、まわりが、白いままです。
 
 お使いのパソコンのOSが、一致するようでしたら
 
 無料のソフト「GIMP」(ギンプ)を使用することをおすすめします。

 ・Gimp2のダウンロードページ
 http://www.geocities.jp/gimproject2/download/gimp-download.html


 ・GIMP(ギンプ)の使い方
透過(透明な部分を作る技法)
 保存は、gifかpngの拡張子にして下さい

  http://www.geocities.jp/gimpmanual/manual.html

 ※jpgは、写真を構成するのが、目的な拡張子ですので
   まわりが、白くなり透明には、なりません。

Q