CSS |
CSSのid・class名の重複で設定がおかしくなる |
>> | id・class名の重複を避け、混同させないようにする |
CSSのid・class名を決める際はできるだけ重複を避けるべきである。しかし、セレクタを使うことで設定を上書きし、重複させない記述もできるため、CSSの設計に関与できない他者が行う場合は注意する。基本的にid・class名のみを宣言した場合は、すべての要素で使用でき、優先順位の下、内容が反映される。特定要素と名前を宣言したときはその特定要素のみとなり、さらにセレクタとして相関関係を記述した場合も名前は独立する。これらはCSSの記述された位置に関係なく適用される【1】【2】【3】。
そして、class属性を半角スペースで区切ることで、複数のclassを適応させることができ、なおかつセレクタとしても機能する。ただし、Internet Explorer 6では、追加属性は適用されるものの上書きが行われないので気をつけよう【4】【5】【6】【7】。
【1】上からすべて同じclass名を、class単体指定。<p>タグ内指定。<div>タグ/p内指定
【2】この記述順で「.blue」というclass名を指定。上からdiv/pの順で指定。p指定。単体名のみ
【3】同じ名前であっても、CSSの記述順には関係なく、相関関係で内容が上書き適用されていく
【4】半角スペースでclass名をふたつ適用。一方はp指定
【5】【2】に続けて、単体名、p指定、ふたつのclass名で指定を記述
【6】background-colorが指定どおりに上書きされ、borderが追加される。テキスト色は上はclass単体名、下はdiv/p指定が適用される
【7】Internet Explorer 6ではborderの追加は行われるものの、background-colorの上書きが行われていない
[INDEX]
>>> 記述したCSSが反映されない
>>> CSSのid・class名の重複で設定がおかしくなる
>>> 改行されていると外部変数が正しく読み込まれない
>>> ActionScriptで2次元配列がつくれない