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の方はあまり勉強してないっすからねぇ……まだまだ知らないことがたくさんありそうです。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
