abstract
というわけで、今回はスタイルシートでWebデザインするときに必須とも言えるアイテム、クラス属性に関して、理論的な部分を含めて、少し詳しめの説明をさせて頂きましょう
というわけで、以下の内容は、スタイルシートやクラスの使い方が、ある程度分かっている人を対象にさせていただきます
本題
というわけで、ココを読む人は、大体クラスの使い方は分かっているので、初歩的な説明はほぼ省いて、本題に近いところから初めさせていただきましょう
まずば、以前スタイルシート、便利なマイナープロパティの復習になりますが、ココから
２つ以上のクラスを指定する
今回はコレが話の基本になりますので、良く確認して置いてください、WWWCの仕様書の邦訳をあさると出てくる物ですが
- id = name[CS]
- この属性で要素に名前を与えます。この名前はユニーク（唯一）なものでなければなりません。
- class = cdata-list [CS]
- この属性で要素に、クラス名や一組のクラス名を割り当てます。幾つもの要素に同じクラス名を割り当てることができます。クラスを複数割り当てる場合は、ホワイトスペース文字で区切ります。
ポイントはクラスを複数割り当てる場合は、ホワイトスペース文字で区切ります。
の所。というわけで、サンプルをご覧下さい。
ソースは下のような感じ
<style>
div.red{
color:red;
}
div.bgBlue {
background-color:blue;
}
</style>
…（途中省略
<div class="red bgBlue">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
こうすれば２つのクラスを同時に指定することが出来るんですね。今回の話はコレが基本。ここからはこの挙動のさらに詳しい所を説明していきましょう
クラスの強弱関係
さて、２つ同じクラスが指定出来るとして次に気になるのが、同じ設定をした場合にはどちらが強いのか？
例えば
<style type="text/css">
div.red {
color:red;
}
div.blue {
color:blue;
}
</style>
<div class="red blue">
サンプル
</div>
サンプル結果を見てみましょう。結果は予想通りになりましたか？
今回の場合は.redではなく.blueが実行されています、理由はclass="red blue"と宣言されているから。つまりは、クラスは後に宣言した方が強いのですね
同時宣言をやってみる
さて、前回、適応した２つのクラスはどちらが強いのかを確認しましたが、次のステップを考えましょう
先ほどのサンプルに、さらにもう１文加えてみましょう
コードはこんな感じ
div.red.blue {
/* 紫色です */
color:#f0f;
}
実行結果はこんな感じ。文字の色が無事紫色になりました。
２つのクラスを持っていることを条件とした、新しいクラスを作ることが出来るんですね。
クラスの深淵
さて、上のサンプルを見てどう思いましたか？
「色々使い道がありそうだな〜」と表で想いながら、裏でこんな事思っていました「何処かで見たことある、こんな感じの物を…」
そう思いながら悶々としていたのですが、ある日ピーンと繋がりました「あ、Ａ∩Ｂだ！」
おそらく高校の授業で習っていると思うので思い出してください、Ａ∩ＢトカＡ∪Ｂとか言うヤツです。確かに習いましたよね？
実はコレ。集合論という数学の１分野の基礎なんですけど、よく考えればクラスって言う呼び方から、それらしい臭いがしていました。
クラスの深淵２
先ほどの話を図を付けて少し具体的に考えてみましょう
div.Aとdiv.Bという集合があったりします。２つの関係が全く無いときは図はこのようになりますね
| Ａ,Ｂ |
|---|
 |
もし、この２つに関連性があるところがあったとします、図では次のようになりますか。これを図に表すと
| Ａ∩Ｂ |
|---|
 |
このＡ∩Ｂの領域をスタイルシートで書く方法は先ほど解説しましたね
div.A.B {
/* スタイル設定 */
}
そして、Ａ∩Ｂが使えるとなるとＡ∪Ｂも使いたくなるのが人の性
実はコレも使い方があったりします
div.A,
div.B {
/* スタイル設定 */
}
単純に条件２つ設定してやれば自動的にＡ∪Ｂな部分すべてを補完してしまいますね
| Ａ∪Ｂ |
|---|
 |
別に２つに関連性のある部分が無い場合でも
| Ａ∪Ｂ |
|---|
|
Ａ∪Ｂは、成立していますのでお忘れ無く
クラスの深淵３
さて、スタイルシートの設定には、自分以外に要素との関連性を、条件にする方法がありましたね。具体的には
| E F | E要素の子孫であるF要素にマッチする。 |
| E > F | E要素の子供であるF要素にマッチする。 |
| E + F | E要素の直後に後続するF要素にマッチする。 |
というもの。
これらの指定法を使うと言うことを考えてみましょう。
まず、考えやすいので、親要素E FやE + F等を例に出します
この２つはEと言う親要素を持つという所で、同じ条件をとれますので、図に表すと
| E F |
|---|
 |
という風に、条件を指定していると考えることが出来ます
クラスの深淵４
さて、ちょっと先ほどの指定方法を深く考えてみましょう
<body>
<h1>コーヒーメーカーの微笑み</h1>
<div class="section">
<h2>序章</h2>
<div class="section">
<p>嗚呼、運命ってモノは何で存在するのだろう…</p>
<p>いいや、ただそういうことを単なる偶然、そう、偶然に出来てしまうには、私はあまりにも乙女であり過ぎただけだった</p>
<p>桜が咲き、春が来て、ついにお気に入りだった前の学校の制服も着替えてしまった頃だった</p>
上のソースの構造は
body
┣h1
┗div.section
┣h2
┗div.section
┗p
というツリー構造になっていますが仮に、body pという構造と、div.section < pという条件を付けたとします
この２つの条件の和集合Ａ∪Ｂは
body p,
div.section < p {
/* ここにスタイルを書きます */
}
となりますが、Ａ∩Ｂを書こうと思うと、ちょっと単純じゃなくなります、そこで矛盾無く表記しようと思うと、
body div.section < p {
/* ここにスタイルを書きます */
}
という風に一つに上手くまとめないといけません
何でこんな事になるのかって言うと、理由は簡単で、ツリー条に物を書くと言うことは、親要素を辿ると必ず重なるからなんですね
試しに、先ほどのツリーに、○と△で、スタイルシートの指定を辿ると
△body
┣h1
┗div.section
┣h2
┗○div.section
┗○△p
親要素から子要素へ、直線で辿ると
△body−div.section−○div.section−○△p
とゆう風に直せます
結局同じ物を条件であわせているんだから、処理しやすい書き方された方が良いですし、結局こういう書き方しか残らなかったのでしょうかね…
最後に
今回はクラスの新しい見方を提供するつもりで、こんな物書いてみましたが、最後に卑怯な事実を一つ。別にクラスは集合論で考えきれる物では無いです。あと、筆者は素人です（うわ。
ただ、クラスは空白スペースを利用して、結構複雑に書く事が出来ますから。クラスを設計する際に、考えを整理する方法の一つとして、頭に入れて置いておくと便利かもしれません
