電子書籍の厳選無料作品が豊富！

IEにおいて、CSSの記述順番によって表示が異なる？！

解決済

  • 質問者：march4
  • 質問日時：
  • 回答数：5件

CSSの外部ファイルを読み込んで、スタイルを効かせているのですが、
ブラウザIEだとスタイルの書き順によってスタイルが効いたり効かなかったりします。

例えば、

<html>
<head>
<meta http-equiv="Content-Style-Type" content="text/css">
<link rel="stylesheet" type="text/css" href="http://sample.com/style.css"/>
</head>

<body>

<div id="style0"> <!--style0の始まり-->

<div id="style1"><p>■■■</p></div>
<p id="style2">■■■</p>

<ul class="style3">
<li id="style4">■■■</li>
<li id="style4">■■■</li>
</ul>

</div> <!--style0の終わり-->

</body>
</html>

というHTMLにおけるCSSの書き順は、

#style0{
▲▲▲
}

#style1{
▲▲▲
}

#style2{
▲▲▲
}

.style3{
▲▲▲
}

#style4{
▲▲▲
}

の様に、HTMLファイル内でスタイルを指定した順に（スタイルの登場順に）、CSSファイル内ではスタイルを記述しきゃならないのでしょうか？

もっとも、登場順に指定した方が良いかどうかも、私には分かっていません。ただ言えるのは、IEにおいて、書き順によって表示に違いが生じるということだけです。

なお、私が知りたいことは、

・こういう現象が起こることは一般的にあることなのかどうか
・この現象の発生メカニズム
・IEにおけるCSSの正しい記述法（記述順番）

以上３点です。

ちなみに、FireFoxやOperaでは、順不同で問題なさそうです。

くどくなりますが、IEで問題が生じる場合というのは、
例えば、上の例で言えば、
スタイルの書き順を、

style3{
▲▲▲
}

style2{
▲▲▲
}

style4{
▲▲▲
}

のように順番を変えて記述した場合です。

この問題についてネット上で色々と調べたのですが、解決に至りませんでした。

リンクのスタイルなど、書き順が重要なものがあるということは知っているのですが、本件とはまた別の話だと思っています。

質問の記載方法に不備がありましたら、適宜補足をさせて頂きます。

以上、どなたか回答をよろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： ORUKA1951
  • 回答日時：

@charsetは、指定がない場合、HTMLの文字コードを準拠するブラウザが多いと思います。



　指定と異なっていた場合、日本語・・たとえば"MS 明朝"なんて読み取れないものが合ったりすると、firefoxでは、次の}あたりまでは読み取りませんが、IEだと以後の設定がすべて無効になってしまう。

　そのあたりが原因ではないかと・・・

この回答への補足

補足をありがとうございます。

自サイトでは、ＭＳ明朝　などの設定はしていませんが、
ＩＥにおいて、ＨＴＭＬとＣＳＳで、最初の文字コード設定が異なっていると、正常にスタイルが効かなくなるのは、この補足回答で挙げて頂いた例と何か関係しているかもしれませんね。

ただ、全く効かなくなるというわけでもなく、効くものもあれば、効かないものもあるといった感じで、その効き具合については謎のままです。

もっとも、そのしくみまで知ることができたら完璧なんでしょうけども、時間もないので、追究はこのくらいにしておきます。

いつか時間のあるときにでも、調べてみたいと思います。

補足日時：2009/01/31 21:48
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

通報する
お礼日時：2009/07/13 08:30

No.4

  • 回答者： ORUKA1951
  • 回答日時：

　id属性、すなわち「一意セレクタ」は、詳細度が100ですから、他のセレクタよりは優先されます。


　問題は、
★一つのスタイルシートにおいて
★異なる一意セレクタで指定されている要素
　が適用されるかということなら、Noです。これはブラウザの種類は問いません。

#dtyle1 が、#style2よりも後で指定されていたとしても、そもそも#style2での指定が#style1の要素に適用されることはありえないからです。


　実際にそれが発生する事例を示していただければ・・・

この回答への補足

さらなるアドバイスをありがとうございます。
頂いた回答を読み、idの適用のされ方について、共通の認識であることを確認しました。

もうこうなったら、例を示すしかないっ！

という気持ちで、ガシガシとＨＴＭＬとＣＳＳを作成していたのですが、
なんとっ、作成途中に本件とは別の問題点を発見し、それを改善したら、あら不思議。
本件もスッキリ解決されちゃいました。

こんなことがあるなんて…　というオチでした。

では、その問題点と改善方法を説明します。

問題点は、ＣＳＳファイル内の先頭に記述する

@charset "○○○";

にありました。

ＨＴＭＬファイルでは、charset を UTF-8にしていましたが、
ＣＳＳファイルでは、@charset "euc-jp";　となっていました。

つまり、文字コードが、ＨＴＭＬとＣＳＳで不一致だったわけです。

euc-jpとなっていたのは、UTF-8に変更し忘れていたというミスです。
このミスに先ほど気がつき、改善したところ、ＩＥでのスタイルの乱れがピタっと止まりました。

まとめますと、

ＩＥでは、ＨＴＭＬとＣＳＳで同じ　charset　をちゃんと指定してあげないと、スタイルが正常に効かない。

ということです。

※ただし、ＩＥと言っても、すべてのバージョンを指すわけではありません。私が使用しているバージョン（６かな？７でもダメだった気がします）において、問題が発生したことを確認したというだけですので、その点は誤解なきように。

FireFoxやOperaでは、この辺りは大らかなのでしょうね。
問題なくスタイルは効きます。
（こちらのバージョンについても上記［※箇所］同様です。）

euc-jp → UTF-8

この変更だけで全てが改善されたわけですから驚きです。

こんなミスを指摘できる回答者はまずいないでしょうね。。＾＾；
しかし、それを自分で見つけるきっかけを与えて下さった回答者の方達にはとても感謝しています。
ありがとうございます。

これが多くの迷える子羊たちの肥やしになれば良いなと思います。
（試しに、自サイトで@charsetをイジッてみるとすぐに分かります＾＾）

と、解決した気でいますが、全てをチェックしたわけではないので、
これが原因であったかどうかは、まだよく分かっていません。
しかし、ざっと確認した感じでは、９割方、これが原因であろうと思います。

本件の問題についてもう少し自分で調べ、問題が無さそうであれば、回答を締め切らせて頂きます。

それでは、私の悩みにお付き合い頂き、本当にありがとうございました。
もし何かありましたら、感想などお寄せ下さい。＾＾

補足日時：2009/01/31 20:34
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

通報する
お礼日時：2009/07/13 08:30

No.3

  • 回答者： ORUKA1951
  • 回答日時：

　CSSを学ぶ順番は重要なのですが、なぜか参照方法からいきなりプロパティへ進む方が多く、CSSをCSSたらしめているカスケーディングという最も重要な部分を抜かしてしまう人が多い。

Cascading Style SheetsのCascadingとは継承

＞同じ属性をしていている場合、記述が後の方が優先されます。
は正確ではありません。
　正確には、出所や重要度が同じで、詳細度が同じ場合は、後で登場したものが優先されます。

　簡単な説明は、
優先順位( http://ja.wikipedia.org/wiki/Cascading_Style_She … )
　わご覧ください。

　ブラウザによっては正確ではない・・・というよりCSSの仕様書で明確に指定されていないものについては、判断が異なる場合があります。

　重要な詳細度については
★詳細度によって整理する
　の項目です。
1)そのセレクタ内で指定先を一意に決められるもの（IDの類）が多い方を優先する
2)IDの類による優先順位が同じ場合は、属性や擬似クラスの数が多い方を優先する
3)それでも優先順位が決まらない場合は、要素の数が多い方を優先する

　この前段階の詳細度について記述がありませんが、次のように計算します。
【参考サイト】
Assigning property values, Cascading, and Inheritance
　 http://www.y-adagio.com/public/standards/tr_css2 …
【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
選択子の固有性の計算を次に示す。
★選択子のID属性の数を数える。 (= a)
★選択子のその他の属性及び擬似クラスの数を数える。(= b)
★選択子の要素名の数を数える。 (= c)
★擬似要素を無視する。 三つの数a-b-cを基数が大きい数値システムで連結することにより，固有性を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［Assigning property values, Cascading, and Inheritance( http://www.y-adagio.com/public/standards/tr_css2 … )］より

★それよりも気になったのは、
<div id="style1">という記載ですが、CSSのためだけにidを付加する事は好ましくはありません。<div class="main">とか<div class="nore links">のように意味があるものにしておくほうがよいでしょう。

この回答への補足

回答ありがとうございます。

色々と詳しく書かれているようなのですが、正直、ピンとくる箇所はありませんでした。
よく理解できなかった、ということなのかもしれません。
はたして、私の疑問を払拭する記述が、この回答の中にあるのだろうか。
ちょっと疑わしい。。。
という気もしています。

なので、質問を少し変えてみます。

divに設定したスタイルidが、複数個あり、そのidのスタイルの記述を
ＣＳＳファイル内において並び替えることで、ＩＥでの表示が狂うことはあり得るのかどうか。

この点が知りたいわけです。

以下、全て、divのidスタイル。
また、それぞれのdivは、1つのidでのみスタイル指定をしています。

#style0{○○:▲▲;}
#style1{○○:▲▲;}
#style2{○○:▲▲;}
#style3{○○:▲▲;}

上記の順番を下記のようにすると、ＩＥにおいて、スタイル表示は乱れますでしょうか。

#style2{○○:▲▲;}
#style3{○○:▲▲;}
#style0{○○:▲▲;}
#style1{○○:▲▲;}

スタイルはすべてid表記ですから、
その箇所固有のスタイルになるはずです。
順番を入れ換えることで、スタイルが乱れることはないように思うのですが、そうではないのでしょうか？

FireFoxやOperaでは起こらず、ＩＥでのみ起こります。

この、改めて焦点を絞った質問において、新たに回答を頂けると大変助かります。
最初に頂いた回答の中から、重要箇所を改めてピックアップして頂き、それを用いて回答頂いても結構です。
（そうして頂いた場合には、「あ～、そういう意味だったのか～」と私は思うに違いありません。）

次に、頂いた回答の最後の部分ですが、

＞★それよりも気になったのは、
<div id="style1">という記載ですが、CSSのためだけにidを付加する事は好ましくはありません。

この箇所ですが、
まずは、回答者#1の所で補足している例をご覧下さい。
その中で、Ａ～Ｄの枠を書いています。
これらの範囲分けにdivを使い、それぞれにおいて、スタイル分けをしています。
これについては、好ましくない　わけではないですよね？

また、style1等のような属性値の付け方をmainなどのように意味のあるものにしておくほうが良いというのは、理解しています。
実際のサイト制作ではそうしています。その方が見て分かりやすいので。
なお、この、属性値の付け方についての指摘は回答者#２の所でもあり、そこで補足をしていますので、ここでは省略します。

以上、よろしくお願い致します。

補足日時：2009/01/31 17:43
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

通報する
お礼日時：2009/07/13 08:30

No.2

  • 回答者： suzuko
  • 回答日時：

う～～～ん。


自分は前後させて書いていますが、そんなことにはなりません。
元々CSSの名称に「style○」は使用しませんので。

書かれている例は、classとidの使い方がごちゃごちゃのような気がするんですが。

idはそのhtmlに１度だけ使用する物ですよね。
classは何度使用してもいいカテゴリわけですよね。

ですから、
<body>
<div id="main"> <!--mainの始まり-->
<p class="center">■■■</p>
<ul class="attention">
<li class="red">■■■</li>
<li class="red">■■■</li>
</ul>
</div> <!--mainの終わり-->

<div id="navi"><p>■■■</p></div>
</body>
というHTMLにおけるCSSの書き順は、

#main {
▲▲▲
}

#navi{
▲▲▲
}

.center {
▲▲▲
}

.red {
▲▲▲
}

.attention {
▲▲▲
}

でも、IEは表示されると思うのですが・・・・

この回答への補足

回答ありがとうございます。

「元々CSSの名称に「style○」は使用しませんので。」の箇所で、

便宜上、style○という書き方をしただけですので、
これは、mainでも構いません。

問題の本質がその点にあるのでしたら、大変参考になるのですが、
そうではありませんよね？

私が知りたいのは、問題の本質なので、その点についてご助言頂けると助かります。

また、
「idはそのhtmlに１度だけ使用する物ですよね。」の箇所で、

私の挙げた例では、idとして作ったスタイルstyle0やstyle1などは、
どれも１度しか使っていませんので、この点も問題ないかと思います。

id自体は、id="style0"、id="style1"というように、
そのhtml内で何度も使って良いわけですから。

おっしゃられているのは、
id="style0" のスタイルを、1つのhtml内で、複数箇所使うことがよろしくないという話なわけですよね？
例（イケナイ例）
<div id="style0">AAAA</div>
<div id="style0">BBBB</div>

私の挙げた例に、そのような箇所はありませんので、これもまた、問題の本質とは関係がなさそうです。

最後に、.red と　.attention　の入れ換えによるスタイル表示の違いはないだろうというお話は、試していないので分かりません。
この点において、
「そうはならなかった！なぜなら～。」
という風に回答頂けたら、とても回答として有り難いものになったように思います。

補足日時：2009/01/31 17:04
通報する
    • good
    • 1
    • 件
通報する
この回答へのお礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

通報する
お礼日時：2009/07/13 08:31

No.1

  • 回答者： t_ohta
  • 回答日時：

スタイルシートでは同じ属性をしていている場合、記述が後の方が優先されます。



例で書かれているHTMLの場合、
#style0{ color: black; }
#style1{ color: red; }
とスタイルを指定したら
<div id="style1"><p>■■■</p></div>
の部分は赤く表示されますが
#style1{ color: red; }
#style0{ color: black; }
とスタイルを指定したら
<div id="style1"><p>■■■</p></div>
の部分は黒く表示されます

この回答への補足

回答ありがとうございます。

挙げて頂いた例では、style0とstyle1を入れ換えることで、色表示が異なるというお話でしたが、実際、本当にそうでしょうか？

idで、しっかりstyle0とstyle1という風に分けているので、
idをstyle0として指定した要素に、style1のスタイルは適用されないと思います。

というか、
おっしゃられていた、
「スタイルシートでは同じ属性をしていている場合、記述が後の方が優先されます。」

の部分ですが、style0とstyle1では、そもそも属性が異なります。
属性とは、id="style1"　の部分ですから、
どう見ても、
id="style0"と、id="style1"は同じものには見えません。

よって、
#style1{ color: red; }
#style0{ color: black; }
と
#style0{ color: black; }
#style1{ color: red; }
では、
同じスタイル表示がされるはずです。

実際に検証してみました所、やはりそのようなことは起こりませんでした。
もし、挙げて頂いた例のようなことが起こるとしたら、下記例では、
Ａ、Ｂ、Ｃ、Ｄ、すべての範囲が黄色になることになります。
（つまり、styleDが最後に出てきているので、このスタイルがすべてのdiv要素に反映されるという話になりますが、実際にはそうはなりませんでした。）
////////////////////////////////////////////////
(例）

┏━━━━━━━━┓
┃　ＡＡＡＡＡA　　　　　┃
┃┏━━┓┏━━┓┃
┃┃　B　┃┃　C　┃┃
┃┃ＢＢB┃┃ＣＣC┃┃
┃┃　B　┃┃　C　┃┃
┃┗━━┛┗━━┛┃
┃┏━━━━━━┓┃
┃┃ＤＤＤD　　　　　┃┃
┃┗━━━━━━┛┃
┗━━━━━━━━┛

■ＨＴＭＬファイル

<div id="styleA">
～Ａ枠～
<div id="styleB">
　　～Ｂ枠～
</div>
<div id="styleC">
　　～Ｃ枠～
</div>
<div id="styleD">
　　～Ｄ枠～
</div>
</div>

■ＣＳＳファイル（色指定はここでは便宜上、漢字で書いています。）

#styleA{
background-color:白
width:100px;
padding:10px;
}

#styleB{
background-color:赤
width:40px;
padding:7px;
float:left;
}

#styleC{
background-color:青
width:40px;
padding:7px;
float:right;
}

#styleD{
background-color:黄
width:80px;
padding:7px;
clear:both;
}

////////////////////////////////////////////////

補足日時：2009/01/31 16:46
通報する
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございました（＾＾）
また何かありましたら、教えて下さいね。

通報する
お礼日時：2009/07/13 08:31

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

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

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

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

おすすめ情報