意外に知らなかった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の方はあまり勉強してないっすからねぇ……まだまだ知らないことがたくさんありそうです。

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

プログラマのまっちーです。酒が大好きです。ある一定量のお酒を飲むと壊れたレディオモードに入り、同じことを繰り返す癖があります。宜しくお願いいたします。

このメンバーの記事をもっと読む
デザイン力×グローバルな開発体制でDXをトータル支援
お問い合わせ 会社概要DL