知っておくと得するスタイルシートのマイナープロパティ

ここでは、規格にはきちんと書いているんだけれども意外に気づいている人が少ない、スタイルシートのマイナープロパティを紹介したいと思います。

一応初心者時代に苦しんで、「しまった！ こんなのがあったのかぁ」と思った便利なものに絞っておきましたので、驚いていただけるとありがたいです。

みなさん、いつか「あー、なんか要素に２つ以上クラス当てられたら楽なのになぁ…」とか思ったこと無いでしょうか？

私はあるのですが、悲しいことに使用上

<div class="class1" class="class2"></div>

の様に２つ以上クラスを書くことは許されていません。

しかし、粋な仕様もあったもので、邦訳をあさるとこんな者があったりします

id = name[CS]

この属性で要素に名前を与えます。この名前はユニーク（唯一）なものでなければなりません。

class = cdata-list [CS]

この属性で要素に、クラス名や一組のクラス名を割り当てます。幾つもの要素に同じクラス名を割り当てることができます。クラスを複数割り当てる場合は、ホワイトスペース文字で区切ります。

気づいていただけたでしょうか？ 重要な一文は、クラスを複数割り当てる場合は、ホワイトスペース文字で区切ります。ですね。

ちょっとサンプルを作成してみました。

ソースは下のような感じ

<style>
	div.red{
		color:red;
	}
	div.bgBlue {
		background-color:blue;
	}
</style>
…（途中省略
<div class="red bgBlue">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

クラスはデザインを追加以上に、意味を補助するという役目(emで強調するにも、強調というのは一種類だけではないでしょう)があるので、上のサンプルみたいに、クラスの名前を表示の感じで名付けて乱用するのは良くないと思うのですが、どうやれば併用して上手くやれるのかは今悩んでいます

一応、使用するときはそのことを頭に留めておいてください

なんですかコレ？ というのも無理はありませんが、一言でいましょう。透明色です。

divタグなんかに背景色与えちゃったんだけど、一時的に透明に戻したい時なんかに使えますね。

他には、自分が「こうすれば良かったんじゃないかなぁ…」と思う所では

a {
	border:none 2px #dda;
}
a:hover {
	border-bottom-style:dashed;
}

とか書いて、マウスが上に来ると下に点線を表示させるようにする人。書き換え版として

a {
	border:dashed 2px transparent;	/* 透明なボーダーを作成 */
}
a:hover {
	border-bottom-color:#dda;	/* マウスが来たら色を指定して表示 */
}

とかいう方法があったりします。

邦訳すると意味は継承、もうそのまんまですね。親要素から設定を受け継ぎます。