これからの季節に親子でハイキング! >>

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


以下、例で説明すると、「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>  ←センタリング&青字にしたい

このQ&Aに関連する最新のQ&A

A 回答 (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>
--------
    • good
    • 0
この回答へのお礼

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

お礼日時:2010/06/27 10:54

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


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

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

 具体的な例をあげるとわかるかな??
 たとえば次のような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

「.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

■CSSと継承 


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

■CSSのネストはスペースで。。

△はスペース

.main△.sub {

}

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

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

お礼日時:2010/06/27 10:53

このQ&Aに関連する人気のQ&A

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

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qcssで定義したクラス情報をcssセレクタ内で使用

cssで文字装飾用の以下のクラスを作成しました。

.label { font-size:95%; color:blue; }

これを
<div id="view">
<span>ラベル1</span><span>ラベル2</span>~(以降大量に続く)
</div>
というhtmlに適用したいのですが、spanタグ全てに.labelを指定するのは見辛さからいっても
避けたいと思います。

出来れば
 #view span {
  .label
 }
というようにcssで対象を選択して既存のクラス定義を適用したいのですが、こういう感じで
一気に適用する記述方法はありませんでしょうか。

Aベストアンサー

No.3.8 naokitaです。

複数のページや特定箇所以外にも、 class="label"があって、
特定の箇所の大量に続くspanが想定する場所のspanを
class="label"未使用で、他のclass="label"と統一したいって事ですね?
更に、.label{ } と #view span{ } とを
一箇所のみ(一発/一気)で一元管理したいんですね?
-----
今現在、2つのセレクタがあります。
.label{ } と #view span{ }
この場合、当然、2つの同じ値も存在するので、
変更時は、2カ所の変更が必要だから、一元管理とはいえません。
よって、2つのセレクタを一箇所で統一設定します。
1カ所だけの変更なら、一元管理と言いますね!?

>>あくまで一元管理したいんですよ。
1カ所だけの値を変更すれば、他のHTMLの .label と
特定箇所の #view span を同時に変更は出来る。
セレクタで値を定義するが、値をセレクタで定義は出来ない。
(属性セレクタを除く)
だから、
セレクタと同じ値を持つセレクタを同時に定義するって事!
これをCSSの「一元管理」と言う。
つまり、
.label と #view span を同時に指定し、値を統一する事。
.label , #view span{ color:blue;}

■ まずは、下部のソースを表示してから、CSSを変更しましょう。
      ↑↑↑↑↑↑↑↑↑
1、下部のソースを表示すると、「青」が見えると思います。
2、color:blue; を color:green; に一箇所変更すると、
  id="view"とid="view"以外のところも変更します。
※これが、CSSでの「一元管理」です!

このソースで1カ所で「color:green;」と変更できても
一元管理では無いと言うのなら、
動的に出力するしかないです。
class名をインクルードしましょう。
但し、適応させる為に別の動的ソースが必要です。
単に、CSSと同じですが、動的に一箇所で管理出来ます。
また、更に面倒なプログラムで書けば、
ボタン選択で適応させる事も可能。

それも面倒だというなら、XML,XSLで書いて下さい。
http://ja.wikipedia.org/wiki/Extensible_Markup_Language
spanで統一させる事すら必要はありませんから。
これならお望み通りの事が出来るでしょう。
-----

<html>
<head>
<style type="text/css"><!--
.label , #view span{ color:blue;} /* ←ここ1カ所のみ */
.red , #view span.re{ color:red;}
--></style>
</head>
<body>
<div id="test">
<h1>CSS一元管理 | 色比較</h1><hr>
<h2>以下は、id="view"以外のHTML</h2>
&lt;div id="<b>test</b>"&gt;
<span class="label">青</span> | <span class="re">赤</span> | <span class="label">青</span> | <span class="re">赤</span> | <span class="label">青</span>
&lt;/div&gt;
<p>上のHTMLソースが<q><strong>146</strong>文字</q></p>
</div><hr>
<div id="view">
<h2>以下は、id="view"</h2>
&lt;div id="<big class="re">view</big>"&gt;
<span>青</span> | <span class="re">赤</span> | <span>青</span> | <span class="re">赤</span> | <span>青</span>
&lt;/div&gt;
<p>上のHTMLソースが<q><strong>104</strong>文字</q></p>
</div><hr>
<h3>一箇所の値を変更するだけで、全部適応されますが・・・</h3>
<p>あとは、頭を柔軟に、貴方のHTML,CSSの書き方次第で、どうにでもなります。</p>
</body>
</html>

No.3.8 naokitaです。

複数のページや特定箇所以外にも、 class="label"があって、
特定の箇所の大量に続くspanが想定する場所のspanを
class="label"未使用で、他のclass="label"と統一したいって事ですね?
更に、.label{ } と #view span{ } とを
一箇所のみ(一発/一気)で一元管理したいんですね?
-----
今現在、2つのセレクタがあります。
.label{ } と #view span{ }
この場合、当然、2つの同じ値も存在するので、
変更時は、2カ所の変更が必要だから、一元管理とはいえません。
よって、2つのセレク...続きを読む

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Qcssで「下よせ」ってどうやっていますか?

フロートのレフト、ライトはいいとして、

あるボックス要素内(A)に異なるボックス要素(B)をいれます。
この(B)を(A)の一番そこにはりつかせたい時にどうすれば
最もよいのでしょうか?

いいアイデアをご教授ください。

Aベストアンサー

こんなのはどうかな?

position: absolute;
bottom: 0px;

Qテーブルタグの中にdivを含めてはダメ?

テーブルタグの中にdiv要素を入れるとダメなのでしょうか?
何か不都合でもあるのでしょうか?
何かご存知の方がいれば教えていただけませんか?

Aベストアンサー

以下、HTML 4.01での話です。(XHTMLでもほぼ同じだと思います)

tableタグ直下に書けるのは、caption,col,colgroup,head,tfoot,tbodyと定義されています。
特定の条件下でtbodyが省略できますので、実際はtrも書けます。これら以外は書けないことになっています。
tr直下にはth,tdが書けることになっています(それ以外は不可)。

th,tdの下にはブロック要素が書けるので、divも書けます。

このように、テーブル内でth,tdの中以外でdivが使えないのはHTMLの仕様でそう決まっているからです。

Qで配列(複数の要素)を渡したいとき?

こんにちわ,

今HTML+PHPで
$hoge[]にいくつかの要素が入っているとき,
それをあるfoo.phpというページに渡したいとき,
echo '<form action="foo.php" method="POST">';
echo '<input type="hidden" name="$hoge[]" >';
echo '</form>';
としたのですが,うまくいきません。

どうしたらよろしいでしょうか。

Aベストアンサー

nameじゃなく、valueでは?
あとやるなら、
for($i=0;$i<count($hoge);$i++){
print "<input type=\"hidden\" name=\"$hoge[$i][0]\" value=\"$hoge[$i][1]\">";
}
とか?

Qテーブル内の文字サイズを変更したい。

HTMLのテーブル内の文字サイズを変更したいのですが。
イマイチ上手くいかずに悩んでいます。
出来れば全体的に<TABLE></TABLE>のほうでいじれますか?
<TD>タグや<TR>タグのところでいじくるのですか?

Aベストアンサー

いろいろやり方はありますが
文字単位でサイズを変更するには
#2の方法ですね。

テーブルごとやセル(<TD>)ごとにサイズを変更するには
スタイルシート(CSS)を使用します。

テーブルごとにサイズを変更する場合
<TABLE style="font-size : 20px;">

セル(<TD>)ごとにサイズを変更する場合
<TD style="font-size : 20px;">あああ</TD>

#1の方法だとページ内の全てのセル(<TD>)に設定することになります。

スタイルシート(CSS)はこれら以外にも
いろいろな設定方法があります。

QCSSでreadonlyの機能はありますか?

ASPにてCSSを使用しています。
inputタグを読取専用(readonly)にしたいのですが、
スタイルシートでの指定の仕方がわかりません。
よろしくお願いします。

Aベストアンサー

> スタイルシートでも「IME-mode」の設定等、入力に関する制御も可能でしたので

それは某ブラウザが勝手に CSS を拡張して付けた機能で、本来の CSS ではそのようなことはできません。
CSS はあくまでも見た目つまりスタイルをデザインするためのものだと考えるべきです。

QJavaScriptde途中で、「exit」するには?

function kensaku(){
s_data = document.kaiin_form.input_name.value;

if(!s_data){ alert("キーワードを入れて下さい!"); }

if(s_data != dumy){ ...... }
for(i=st_no;i<=n;i++){
......省略.................;
.......省略................}
}

----------------------------------
3行目で表示されたアラートをOKで閉じても、4行目以下が実行されてしまいます。
3行目でexitするにはどうすれば良いでしょうか?

Aベストアンサー

>関数(kensaku())からは抜けられませんでした。
そうですね、勘違いしていました、f(^^;
すみません。
if(!s_data){
alert("キーワードを入れて下さい!");
return;
}
ですね。

Qonchangeイベントを強制的に発生させる

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchange = change;
}


</script>

<input id="1" type="text" value="1" onchange="change();">

<a href="javascript:update();">update</a>

お世話になります。
onchangeイベントをjavascriptで強制的に動作させたいと思っております。

発生させたい場合
・ユーザーがtextボックスを入力
・リンクボタンを押下した場合

簡単なことなのかもしれませんが、
ご教授よろしくお願いいたします。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<script type="text/javascript">

function change(){
alert('test');
}

function update(){
document.getElementById('1').value = "update";
document.getElementById('1').onchan...続きを読む

Aベストアンサー

回答は出てますが・・・onchangeにこだわるなら、

document.getElementById('***').onchange();

()を付ければ呼び出せます。(Windows FireFox2、Opera8で確認)


var f = document.getElementById('***').onchange;
f();

IE6の場合はいったん変数に代入する必要があるようです。

Qdiv要素内の全input要素をdisable

Javascriptで、あるdiv要素内のチェックボックスやテキストフィールドなどのinput要素を
すべてdisableにしたいです。
以下でうまくいきません。どなたかお知恵を頂けないでしょうか?
よろしくお願い致します。
var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var input_tag in input_tags)
{
input_tag.disabled = true;
}

Aベストアンサー

var input_tags = document.getElementById("div_id").getElementsByTagName("input");

for(var i=0;i<input_tags.length;i++){
input_tags[i].disabled = true;
}


人気Q&Aランキング