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

cssを複数指定






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

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

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

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

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

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

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

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

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

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

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

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

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

構造と見た目を分ける

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

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

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

HTML

CSS

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

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

表示結果

カテゴリ-1
カテゴリ-2
カテゴリ-3

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




まとめ

CSSを独学で覚えている初心者の方は、一つの class に対して多くのプロパティを設定してたりしませんか?

「構造」と「見た目」を分けてスタイリングしつつclass属性を複数指定すれば、それぞれのスタイルを使い回しつつ、class毎の役割を明確にできるというメリットがあるので、初心者だからこそ実践してほしい考え方だと思います。

「構造」と「見た目」を分けてCSSを書く事を意識すると、コーディングもメンテナンスもかなり楽になるので是非試してみてください。

「classを複数指定して上手にCSSを書く方法【初心者向け】」でした。

id属性とclass属性を使ってCSSを書いてみる【入門・初心者向】

初心者でもわかるCSS ②【idセレクタ・classセレクタ】

2017年8月20日






cssを複数指定