CSSの小ネタ:htmlのタグにclassを複数指定する方法

2016年3月23日
とっつぁん
css WEBデザイン
この記事は 2 分くらいで読めると思います
何をいまさら!?
何をいまさら!?

htmlのタグにclassを複数指定する方法

何をいまさら!?

何をいまさら!?

ホームページを独学で勉強し始めた頃にふと躓くようなそんな内容をメモしていきます。

ワタクシもCSS勉強し始めたころは

「クラスってコンマとか区切って複数指定したりできるのかなぁ…」とかアホな事試してたのをふと思い出したので書いておきます。

タグに複数のクラスを指定するには?

いきなり結論:classを複数指定するには半角スペースで区切ります。

  • フォントを赤くする指定のクラス(red)
  • フォントを150%大きくする指定のクラス(big)

の二つの指定がCSSにあったとすると。

フォントサイズを大きくして赤い文字に変えたいんだけどなぁ、

という時に改めてclassを作らなくても

<div class="red big"></div>

という風に半角で区切る事で複数指定できます。便利ですね。

なるほど~

使い過ぎには注意です(笑)

<div class="red big right bold margin padding border_bottom">

こんな感じになってくると何だかなぁ…となります(笑)

なんてこった!!

なんてこった!!