- ベストアンサー
CSSのid名class名の重複回避方法について
今、複数ページがあるサイトを作ろうとしているのですが、 他の人が作成をする場合もあるので、 ヘッダ・フッタなど、共通部分に使っている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）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
重複した場合は 同じ場合は後から定義されているもので上書きされる。 定義に含まない物は変更されない 例 ・A.css border:dotted 2px; ・B.css border:solid red; これでA→Bという順で読み込ませた場合は"border:solid 2px red"となる。 重複させないようにするには担当者コードまたは個別名を装飾して区別させる。 #suzuki_01 .font 懸念通り。しかしこれ以上の回避策は難しいと思われる。 作業の方法を書面化し、統一しておけば多少は軽減できると思われる
その他の回答 (2)
- saaya_holic
- ベストアンサー率23% (46/195)
回答ではありませんが参考まで。 入門書にはclassは何度でも使えるけどidはページ内に1つだけ、とよく書いてありますが、シンタックスチェックが厳密なシステムでない限り実際には最新のidが有効です。
- steel_gray
- ベストアンサー率66% (1052/1578)
#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"> みたいな書き方にしておいた方が混乱しづらく無難だと思います。
