class(クラス)を複数指定して上手にCSSを書く方法【初心者向け】

自分がCSSの勉強を始めた頃、class属性を複数指定できる事を知らなくて、どうにかスタイルを使い回す方法はないものかと悩んでいた記憶があります。

最近ではclass属性の複数指定も当たり前になっていますが、CSSの勉強を始めたばかりで知らない方もいらっしゃるかもしれません。今回は、そんなCSS初心者向けとしてclass属性の複数指定を使ったCSSの書き方について解説します。

class名を半角開けて複数記述するだけ
classの複数指定で「構造」と「見た目」を分ける
まとめ

class名を半角開けて複数記述するだけ

classの複数指定はとても簡単。
半角スペースを空けてclass名を複数記述するだけです。

たったコレだけ？そうなんです。たったコレだけなんです。

div要素に対して .box と .bg-blue という２つのclass属性を指定する場合の記述例です。

<div class="box bg-blue">
	<p>CSSを複数指定しますよ。</p>
</div>

<p>CSSを複数指定しますよ。</p>

</div>

,（コロン）や.（カンマ）で区切ってしまいがちですが、単純にclass名の間に半角スペースを入れるだけです。

それぞれのclass名に対してCSSを記述していきます。

.boxにはパディングなどの構造を、.bg-blue には背景色を指定しています。

.box{
	padding: 15px;
	margin: 0;
	display:block;
}
.bg-blue{
	background:blue;
}

.box{

padding: 15px;

margin: 0;

display:block;

}

.bg-blue{

background:blue;

}

後述しますが、classの複数指定は「構造と見た目を分けてスタイリングできる」という大きなメリットがあります。
この「構造と見た目を分ける」という考え方はOOCSSと呼ばれ、サイト運用時に導入する事で、修正・更新作業をする際に、どこをどう直せばよいのか、どの範囲に影響が及ぶかという事が予想しやすくなります。

OOCSSをしっかり実践しようとすると、ある程度CSSに慣れていても難易度は高い気がしますが、CSSに慣れない初心者の頃から意識しておくと後々役立つと思います。

ちなみに class名は何個でも指定できますが、調子に乗ってしまうと自分でもわけわからなくなりますんで、ほどほどに…。

<div class="box bg-blue bold text-red border float-l button">
	<p>class名が多すぎるのも考えもの</p>
</div>

<p>class名が多すぎるのも考えもの</p>

</div>

Web制作者のためのCSS設計の教科書モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 Web制作者のための教科書シリーズ

created by Rinker

classの複数指定で「構造」と「見た目」を分ける

先にも書きましたが、class属性を複数指定する事で、CSSの役割を「構造」と「見た目」に分けることができます。

「構造と見た目の違いって何よ？」と思われた方は、「構造」はマージン・パディングやサイズ等の要素自体の作りで、「見た目」は文字色・背景色などの装飾的なスタイルだと想像してください。

例えば、カテゴリ名を表示するボタンがあったとして、形やパディングなどの作りは同じでも、カテゴリ毎に文字色や背景色を変えたいという時に、「構造」と「見た目」という役割に分けてCSSを書くと見た目も機能的にもわかりやすいCSSになります。

HTML

<div class="button bg-gray">
	<p>カテゴリ-1</p>
</div>
<div class="button bg-blue">
	<p>カテゴリ-2</p>
</div>
<div class="button bg-red">
	<p>カテゴリ-3</p>
</div>

</div>

</div>

</div>

CSS

.button{
	color: #252525;
	float: left;
	padding: 15px;
	margin: 0 10px;
	display:block;
}
.bg-gray{
	background:#f0f0f0;
}
.bg-blue{
	background:#b1eeff;
}
.bg-red{
	background:#ffc9d7;
}

.button{

color: #252525;

float: left;

padding: 15px;

margin: 0 10px;

display:block;

}

.bg-gray{

background:#f0f0f0;

}

.bg-blue{

background:#b1eeff;

}

.bg-red{

background:#ffc9d7;

}

上記CSSでは、.buttonで共通の構造部分を指定し、背景色はそれぞれ別のスタイルを指定しました。

html内のdiv要素に対して構造を定義した bttonクラスと、それぞれの背景色を指定したクラスを複数指定すると、「構造」と「見た目」に分けてCSSを記述してもブラウザ上では一つのスタイルとして表現されます。

表示結果

カテゴリ-1

カテゴリ-2

カテゴリ-3

上記コードの表示結果です。同じ作りを持つ要素に対しては構造を定義したCSSを使い回し、それぞれ違う背景色に対して見た目のCSSを指定しています。
こうして構造と見た目を分けておくと、背景色の変更時や形が同じでも色の違うボタンを追加する事になった場合などにも、スムーズな対応ができるので作業効率的なメリットも大きいですよ。