Web事業部実績紹介_Webマーケティング
Web事業部実績紹介_Webマーケティング
2010.03.01

意外に知らなかったclassの複数指定

まっちー

HTMLでタグにcssを適用したい場合は、class属性をつけますよね。まあ、直接スタイルを書いても良いんですけど。

実は今まで、僕はclass属性には複数を適用することはできないと思ってました。だから似通ったスタイルなんかでも、いちいち個別に書いてそれぞれclassを適用してたんすよ。

.left {

 € € € width: 300px;

 € € € height: 300px;

 € € € float: left;

}

.right {

 € € € width: 300px;

 € € € height: 300px;

 € € € float: right;

}

//HTML側
<div class="left">left</div>

<div class="right">right</div>

たとえば↑みたいな感じでね。

でも、一つのclass属性に複数指定することって、できたんですね。知りませんでした。何でも半角スペースで区切って記述すれば、複数指定ができるらしい。

うん、まあね、確かに思い返してみれば、デザイナーからもらったモックの中に、ときどきclass属性のところにスペースが入ってるのを見たことはありました。でもそのときは、それで一つのクラス名なんだと思ってました。俺ならこういうときはアンダーバーとか使うのになぁ……そもそもスペースとか使って大丈夫なんだっけ? みたいなことを思ってました。

でも実際は、複数指定をしてたんですね、あれは。とんだ勘違い野郎でした、自分。

というわけで、上のcssはこんな風↓に書き換えることも可能。

.box {

 € € € width: 300px;

 € € € height: 300px;

}

.left {

 € € € float: left;

}

.right {

 € € € float: right;

}

//HTML側
<div class="box left">left</div>

<div class="box right">right</div>

CSSの方はあまり勉強してないっすからねぇ……まだまだ知らないことがたくさんありそうです。