CSSを学び始めた人にとってclass（クラス）の理解は基本中の基本です。
本記事では、「クラスとは何なのか？」「クラスはどう使うのか？」について初心者でも簡単に理解できるようにわかりやすく解説していきます。これからCSSを学びたいという方は、ぜひご覧ください。
目次
CSSのclass（クラス）セレクタとは
class（クラス）セレクタを簡単にいうと、HTMLタグに適用するデザインを指定したCSS内のグループのことです。
例えば、サイト上で目立たせたい文字には統一して赤色太字のデザインにするとします。その場合、文字を赤色太字にするデザインにクラス名をつけます。一度クラスを作ってしまえば、指定することで、同じタグを使った要素のデザインが適用されるため、同じクラスを使った要素のデザインが統一されます。
毎回タグのデザインを指定する必要がないので、作業を効率化できますし、サイトデザインの変更も気軽にできるようになります。
class属性とid属性の違い
classと同じようにデザインに名前をつける機能をもったidという属性もあります。各属性の役割は次の通りです。
- class属性：分類名を割り当てる役割
- id属性：固有名を割り当てる役割
最大の違いとして、class属性は同じclass名を1ページ中で何回でも使えますが、id属性は同じid名を1ページ中で1回しか使えません。
そのため、class属性はCSSでの装飾デザインが主な役割となり、id属性は1ページ中で1回しか使えない特性を生かしたページ内リンクなどで活用されています。
初めのうちは使い分けが難しいので、特に理由がなければclass属性を使うとよいでしょう。
CSSでclass（クラス）を使う方法とは
それでは、CSSでclass（クラス）を使うにはどうすればいいのか解説していきしょう。
まず、CSSで「.（ピリオド）」の後にクラス名を宣言して、適用したいデザインを指定します。作ったクラスを使いたいときには、HTMLタグ名の後に「class=”クラス名”」を宣言するだけです。
例として文字色を赤色に変えるクラスをCSSで作り、HTMLで適用してみましょう。
|
1 |
.test { color: red; } |
|
1 2 3 |
<div class="test"> ここにクラス属性のデザインが適用されます。 </div> |
それでは、実際に上記のコードを実行した結果をみてみましょう。
See the Pen
OJXOLBe by sho-go (@sho-go)
on CodePen.
クラスを作るのも使うのも簡単ですね。
ちなみに、クラス名には命名規則と使用可能な文字に制限があります。クラス名を指定するときには、次のルールに注意しましょう。
- 使える文字は「半角英数字、”-（ハイフン）”、”_（アンダーバー）”」
- 頭文字はアルファベット（数字や記号はNG）
- アルファベットは大文字と小文字が区別される
複数のclassを指定する場合
サイト制作をすすめていくと、似たようなクラスを作りすぎて管理ができなくなる場合があります。こういった事態を防ぐためにも、複数のクラスを指定する方法についても知っておくと良いでしょう。
HTMLから複数のクラスの装飾を同時に適用させたい場合、クラス名を半角スペースで区切って指定します。なお、複数のクラスで記載された同じプロパティの設定は、後から指定したクラスの設定で上書きされるので注意しましょう。
|
1 |
<div class="class1 class2">テキスト</div> |
また、CSSファイルで、クラス名を「,（カンマ）」でつなげて指定すると、複数のクラスに同じ装飾を適用することもできます。
|
1 |
.class1,.class2 { "クラスで適用する装飾" } |
それでは、HTMLとCSSそれぞれで複数クラスを指定したサンプルコードを見てみましょう。
See the Pen
oNLoNgQ by sho-go (@sho-go)
on CodePen.
最後のテキストは、HTMLから「font-red」と「back-yellow」の2クラスを指定したため、2つのクラスの装飾が適用されました。また、CSS内で「font-blue」と「back-yellow」のクラスを指定して、文字を太字にする設定をしているので、この2つのクラスを指定したテキストは太字になっています。
子要素のclassを指定する場合
サイト制作では、装飾のルールを決める際にルールを間違えない仕組みを作ることも大切です。そんなときには、子要素のクラスを使うことがおすすめです。子要素のクラスとは、特定のクラスの中にある特定のクラスです。親要素となるクラスの中でしか適用されないため、ルールを間違えた場合に気づくことができます。
HTMLから子要素のクラスの装飾を適用させたい場合、親要素のクラス内で子要素となるクラス名を指定します。
|
1 2 3 4 5 |
<div class="class1"> <div class="class2"> テキスト </div> </div> |
なお、親子要素のclassを作成するには、CSSファイルで、親要素となるクラス名に「半角スペース」でつなげて、子要素となるクラス名を指定して作成します。
|
1 2 |
.class1 { "親要素クラスで適用する装飾" } .class1 .class2 { "子要素クラスで適用する装飾" } |
それでは、HTMLとCSSそれぞれで子要素をもったクラスを使ったサンプルコードを見てみましょう。
See the Pen
GRqORxp by sho-go (@sho-go)
on CodePen.
「back-yellow」のクラスを最初に指定したときには設定した装飾が適用されませんでした。しかし、親要素である「font-red」クラスの中で指定した「back-yellow」クラスの装飾は適用されました。
CSSでclass（クラス）を使う時の注意点とは
CSSでclass（クラス）を使うときには、注意すべきことがあります。それは、CSSの適用に、優先順位があることです。
CSSが適用される基本ルールは次の通りです。
id属性 > class属性 > HTMLタグ
クラスで指定した装飾が適用されない部分があれば、その部分にid属性が適用されていないかを確認しましょう。また、HTMLタグで指定されている装飾がclass属性の影響で無効になっていないか、無効になっても問題ないかに注意が必要です。
まとめ
class（クラス）は、これからCSSを学ぶ上で必須の知識です。応用的な使い方も多いですが、今回紹介した内容が基本です。
クラスを使うことで、コーディングの量を減らすことができ、修正する量も減らすことができます。また、サイト全体に統一感が出て、ユーザーにとってわかりやすいサイトになります。
