プロが教える店舗＆オフィスのセキュリティ対策術

外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか

解決済

  • 質問者：javakori
  • 質問日時：
  • 回答数：4件

外部スタイルシートで定義したスタイルの継承のようなものは可能でしょうか？


以下、例で説明すると、「main」スタイルを「sub1」と「sub2」が継承し、
「sub1」は「main」の「color」を継承し、「text-align」をオーバーライドしたい。
「sub2」は「main」の「text-align」を継承し、「color」をオーバーライドしたい。


【例　：　外部スタイルシート】
.main {
color : red;
text-align : center;
}

.main.sub1 {　　　　　　　←実際はこのような指定ではできない
text-align : left;
}

.main.sub2 {　　　　　　　←実際はこのような指定ではできない
color : blue;
}


【例　：　htmlファイル】
<div class="sub1">あいうえお</div>　　←左寄せ＆赤字にしたい
<div class="sub2">あいうえお</div>　　←センタリング＆青字にしたい

通報する

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

質問の本文を隠す

A 回答 (4件)

No.3ベストアンサー

  • 回答者： think49
  • 回答日時：

#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>
--------
    • good
    • 0
    • 件
通報する
この回答へのお礼

できました！
ありがとうございます。

通報する
お礼日時：2010/06/27 10:54

No.4

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

　継承については、スタイルシートの基本中の基本でここを理解していないと決してスタイルシートは使いこなせません。


　スタイルシートの継承については、継承されるプロパティとそうでないプロパティがあってそれを理解しておけばよい。

★カスケード：上書きされるか否かは、詳細度と優先順位の話で継承とは別次元の問題です。

　具体的な例をあげるとわかるかな？？
　たとえば次のような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 … )
    • good
    • 0
    • 件
通報する
この回答へのお礼

ご回答ありがとうございます。
非常に勉強になりました！

通報する
お礼日時：2010/06/27 10:54

No.2

  • 回答者： think49
  • 回答日時：

「.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/casc …
    • good
    • 0
    • 件
通報する
この回答へのお礼

できました！
ありがとうございます。

通報する
お礼日時：2010/06/27 10:55

No.1

■CSSと継承　


タイポグラフィーに関する部分は継承します。
http://css.eweb-design.com/0108_bsc.html

■ＣＳＳのネストはスペースで。。

△はスペース

.main△.sub {

}

これで、意味わかりますよね。。
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2010/06/27 10:53

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

Q質問する（無料）

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

Q質問する（無料）

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

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

おすすめ情報