外部css定義したｃｌａｓｓをhtmlで引き継ぎ別名で定義する方法

質問

いつもお世話になります。
外部cssで、例えば
xyz.css
div.abc{
font-size:13px;
width:100px;
height:120px;
border:solid;
border-width:2px;
border-color:#460675;
}
などと定義し、
htmlで
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css"><!--
div.def{
ここで、class abc の内容の一部のみ変更、追加をしたいんですが、
その記載方法がわかりません。
}
--></style>

次のようにしてもできますが、
<div class="abc" style="ここに記載" ・・・・
JavaScriptで、classを切り替えて使用したいので、
cssで定義したclassを基に新たなclassを新たな名前でそれぞれのページでできないものかと調べています。
よろしくお願いいたします。

回答No.4

suzuko · ベストアンサー

漸くされたいことが理解できました。^^;

外部cssで、
abc01, abc02 {
共通部分を記載（ただし、※２※３は含まない）※１
}
abc01{
※１に付加した記載（※２）
}
abc02{
※１に付加した記載（※３）
}

とすれば、各htmlではスタイルを指定する必要はありません。

class="abc01"
class="abc02"
とクラス表示できます。^^

補足

suzukoさん、今晩は。ご丁寧にレスありがとうございます。
＞外部cssで、
＞abc01, abc02 {
＞共通部分を記載（ただし、※２※３は含まない）※１
＞}
なるほどです。
とても参考になりました。

ただ、例えばで、abc01, abc02と、しましたが、これが、数多くあるとき。
－－－その分前もって定義しておけば済む。と、いうことにはなりますが。

とか、abc01、abc02とかをxyzなどと変えたいといったとき。
－－－そのようなことをしないようにすれば良いではないか。
と、いえばそれまでですが。

ただ、cssでの設定を引き継ぐ方法があれば、管理がしやすいのですが。
xyz{
include(abc);
}
のような記載ができればと、思うのですが。

私の初めの説明不足でいろいろと紆余曲折させてしまいすみません。
しかし、そのお陰といっては失礼ですが、いろいろと良くわかりました。ありがとうございます。

回答No.3

suzuko

？？？？
>html上でcssで定義した共通部分を全て書けば済むところもありますが、

そんな必要はありません。外部CSSを読み込んでいるのであれば、そのHTMLで変更したい要素だけ、指定変更すればいいのです。
つまり、優先順位は
<div class="abc" style="font-size:16px;">
が１番。
htmlで
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css"><!--
div.abc{
font-size:16px;
}
--></style>
が２番。
外部CSSが３番となります。変更されていない要素は、外部CSSのままです。

自分がよくやるのは、外部CSS１と外部CSS２が必要な場合、共通部分を外部CSS０として抜き出し、１・２に
@import url("css0.css");
でインポートさせています。当然、クラス名に変更はありません。

参考URL：

http://www.tagindex.com/stylesheet/basic/priority.html

お礼

suzukoさん、重ねてのレスありがとうございます。
@import url()
知らなかった記述です。
ありがとうございます。使い方を実際に学んでいきたく思います。

style記述の優先順位については、良く理解しているつもりです。
＞共通部分を外部CSS０として抜き出し
と、いうことですが、新たにcssファイルを作成しているということでしょうか。
良くやられているというので大きなメリットがあるということと察しますが、もし、新たにcssファイルを作成しているのであれば、cssファイルの数が増えてしまい、管理が大変になるという気がしてしまいます。
どうも私は、よく理解できないままです。

私が行いたいのは、
外部cssで、
abc{
共通部分を記載
}
それぞれのページで
abc01{
class abcに付加した記載
}
abc02{
class abcに付加した記載
}
として、
abc01,abc02という名前で制御したいということです。
だから、No.1のご回答
class="abc abc01"
class="abc abc02"
で目的は果たせます。
これを、
class="abc01"
class="abc02"
で、制御できないものかと試行錯誤しています。

貴重なご意見誠にありがとうございます。
@import url()の使い方も含め、いろいろと試してみます。
どうも、ありがとうございました。

回答No.2

suzuko

なぜ、クラス名を変える必要があるのでしょうか？

htmlで
<link rel="stylesheet" href="xyz.css" type="text/css">
<style type="text/css"><!--
div.abc{
font-size:16px;
}
--></style>
とすれば、優先順位はHTMLが上になりますよ。

大きな勘違いならごめんなさい。

補足

suzukoさん、レスありがとうございます。
私の説明不足なのか、私の理解が浅いのかというところですが、
cssで定義した
class abc
を基に
class defというより
class abc01、abc02など部分変更追加したclass定義し
このabc01、abc02などをJavaScriptで切り替えようと思っています。
html上でcssで定義した共通部分を全て書けば済むところもありますが、
画像情報は、css上で定義すれば画像フォルダの指定が一度で済みます。
これを、html上で行おうとすると、背景画像などのフォルダ指定をページごとに変える必要が生じてしまいます。
だから、css上で背景画像などの情報は定義し、html上では部分的に定義し、class指定によりstyleを切り替えたいのです。
css上で定義したclassを基に追加修正したclassをhtml上で操作すれば管理がしやすくなると考えているのですが。
良い方法などございましたら、よろしくお願いいたします。

回答No.1

steel_gray

勘違いしてるかもしれませんが。

文字サイズを変更したいとして、スタイルはそのままfont-sizeだけを書く。
<style type="text/css"><!--
div.def{
font-size:16px;
}
--></style>

Javascriptでは
<div class="abc"
↓
<div class="abc def"
と変更するようにしてはどうですか？

要はclass名を変更するのではなく、追加や削除をする。
といっても結局 "abc"←→"abc def" の変更なので"abc"←→"def"のjavascriptと変わらないと思う。

div.def{～}の定義自体をJavascriptでやるならdiv.abc{～}の内容をコピーして、とかも出来るはず（ブラウザによってやり方が違うのでちと面倒）だけどcssにはそういう機能はないと思う。

補足

steel_grayさん、お早うございます。
早速レスを頂きありがとうございます。
＞<div class="abc def"
なるほどです。
ありがとうございます。

JavaScriptでどのようにして変更しようとしているのかを書かないでしまったですが、
document.getElementById'IdName').className=MyClassName1;
document.getElementById'IdName').className=MyClassName2;
と、いった形で変数で切り替えようとしていたものですので。
class="abc def"
は使えないと思い質問しましたが、
document.getElementById'IdName').className="abc def";
もできました。
"abc def"を変数化するなど
教えていただいた方法を基にもう少し試してみます。
ありがとうございました。