- ベストアンサー
外部スタイルシートでスタイル継承は可能？
- 外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか？
- 例を挙げながら、継承とオーバーライドの方法について説明します。
- 具体的な実装方法として、mainクラスを継承したsub1クラスとsub2クラスの使用例を示します。
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#2です。 > .main.sub1 { ←実際はこのような指定ではできない 一応、その書き方も有りです。 例えば、以下のように。 -------- <style type="text/css"><!-- .main { color: orange; text-align : center; } .main.sub1 { color: blue; } --></style> </head> <body> <div class="main sub1">あいうえお</div> --------
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
継承については、スタイルシートの基本中の基本でここを理解していないと決してスタイルシートは使いこなせません。 スタイルシートの継承については、継承されるプロパティとそうでないプロパティがあってそれを理解しておけばよい。 ★カスケード：上書きされるか否かは、詳細度と優先順位の話で継承とは別次元の問題です。 具体的な例をあげるとわかるかな？？ たとえば次のようなHTMLがあるとします。 ★わかりやすいように全角スペースでインデントされているのでテストするときは、全角スペースをタブに変換すること★ <body> <h1>見出し</h1> <div class="main"> <h2>見出し(2)</h2> <div> <p>段落</p> <p>段落</p> </div> <div class="memo"> <p>段落</p> <div> <p>段落</p> </div> </div> <div class="note"> <p>段落</p> </div> </div> <p>段落</p> </body> ひとつのスタイルシートに、 div div{color:gray} div.note{color:magenta} /* 詳細度11 */ div.main div.note{color:blue} /* 詳細度22 */ div div div{color:red} /* 詳細度3 */ div div.main div{color:green} /* 詳細度13 */ div.main p{color:black;} /* 詳細度12 */ body{color:pink} /* 詳細度1 */ div.memo{color:skyblue} さて、colorは継承されるプロパティですからどのように解釈されるでしょう。 例に挙げられたHTMLが <div class="main"> <div class="sub1">左寄せ＆赤字にしたいあいうえお</div> <div class="sub2">センタリング＆青字にしたいあいうえお</div> </div> や <div class="main sub1">左寄せ＆赤字にしたいあいうえお</div> <div class="main sub2">センタリング＆青字にしたいあいうえお</div> だと簡単で、いずれも div.main{color:red;text-align:center} div.sub1{text-align:left} div.sub2{color:blue} ですみます。(詳細度が同じだと後出の物で上書きされる。) ★最低限仕様書には目を通しておこう 6. 値の割り当て、カスケード処理、継承 ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/cascade.html )
お礼
ご回答ありがとうございます。 非常に勉強になりました！
- think49
- ベストアンサー率59% (285/482)
「.main をprototypeとして、他のクラスセレクタにスタイルを継承させたい。」 その発想に至った気持ちは分かりまが、既存のCSSだけでは実現できないと思います。 CSSで行われる継承は「親要素からの継承」を指していて、それ以外で似た機能は「カスケード」ぐらいです。 この2つを上手く利用してください。 -------- <style type="text/css"><!-- .main { color : red; text-align : center; } .sub1 { color: blue; text-align : left; } .sub2 { color : green; } --></style> </head> <body> <div class="main sub1">あいうえお</div> <div class="main sub2">かきくけこ</div> -------- 値わりあて，カスケード処理，継承 - CSS2リファレンス http://hp.vector.co.jp/authors/VA022006/css/cascade.html
お礼
できました！ ありがとうございます。
■CSSと継承 タイポグラフィーに関する部分は継承します。 http://css.eweb-design.com/0108_bsc.html ■ＣＳＳのネストはスペースで。。 △はスペース .main△.sub { } これで、意味わかりますよね。。
お礼
ご回答ありがとうございます。
お礼
できました！ ありがとうございます。