今、複数ページがあるサイトを作ろうとしているのですが、他の人が作成をする場合もあるので、ヘッダ・フッタなど、共通部分に使っているcssの設定（idやclass名）と、個々のページで設定するcssの設定が重複しないようにしたいと思っています。もし、共通cssと個別cssに同じ#fontというid名が存在してしまったとして、個別のページのcssファイルに↓の用に記述し #page01 #font{ color:#FFFFFF; } html内の、～の中に含まれるid="font"と定義した場合共通のidに#font が存在していても大丈夫なのでしょうか？また、大丈夫な場合、idやclassを作るたびに #page01 #font #page01 .photo と#page01を頭に全部つけると分かりづらくなるな。。と思うのですが、それを回避する方法はありますでしょうか？ほか、重複しないアイデアをご存知の方がいらっしゃいましたらご教示いただければ幸いです。どうぞよろしくお願いいたします！

CSSのid名class名の重複回避方法について

解決済

質問者：shake22
質問日時：2007/07/31 15:38
回答数：3件

今、複数ページがあるサイトを作ろうとしているのですが、
他の人が作成をする場合もあるので、
ヘッダ・フッタなど、共通部分に使っているcssの設定（idやclass名）と、
個々のページで設定するcssの設定が重複しないようにしたいと思っています。
もし、共通cssと個別cssに同じ#fontというid名が存在してしまったとして、
個別のページのcssファイルに↓の用に記述し
#page01 #font{
　color:#FFFFFF;
}

html内の、<div id="page01">～</div>
の中に含まれるid="font"と定義した場合
共通のidに#font　が存在していても大丈夫なのでしょうか？

また、大丈夫な場合、idやclassを作るたびに
#page01 #font
#page01 .photo
と#page01を頭に全部つけると分かりづらくなるな。。と思うのですが、
それを回避する方法はありますでしょうか？

ほか、重複しないアイデアをご存知の方がいらっしゃいましたら
ご教示いただければ幸いです。

どうぞよろしくお願いいたします！

通報する

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

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： noname#39970
回答日時：2007/07/31 16:47

重複した場合は

同じ場合は後から定義されているもので上書きされる。
定義に含まない物は変更されない

例
・A.css
　border:dotted 2px;
・B.css
　border:solid red;
これでA→Bという順で読み込ませた場合は"border:solid 2px red"となる。

重複させないようにするには担当者コードまたは個別名を装飾して区別させる。
　#suzuki_01 .font
懸念通り。しかしこれ以上の回避策は難しいと思われる。
作業の方法を書面化し、統一しておけば多少は軽減できると思われる

- 0
- 件

通報する

No.3

回答者： saaya_holic
回答日時：2007/08/05 17:34

回答ではありませんが参考まで。

入門書にはclassは何度でも使えるけどidはページ内に1つだけ、とよく書いてありますが、シンタックスチェックが厳密なシステムでない限り実際には最新のidが有効です。

- 0
- 件

通報する

No.2

回答者： steel_gray
回答日時：2007/07/31 16:55

#font{～}

#font{～}
と、二回以上出てくれば後者が優先。(「カスケード」ですから)
なので。
@import(common.css);/*共通スタイルの読み込み*/
#font{～}
みたいな書き方でもいいかもしれない。

ただし、
.hoge #font {～}
#font {～}
みたいな書き方になると前者が優先。（算出された詳細度による）
後者に !important を付けて逆転させる手もあるけど。
http://anslasax.net/css-make/cascade.html

なので、やっぱり複数人で作業するなら、個別スタイルの為にbodyにでもidを付けて
#page1 #font{～}
<body id="page1">
<XXX id="font">
みたいな書き方にしておいた方が混乱しづらく無難だと思います。