HTML/CSS

【HTML/CSS】classとは?(具体的な使い方から使用上の注意まで解説)

HTMLとCSSを学び始めて、「class」というコードを見かけたことはありませんか?

その中で、「classの使い方がイマイチ分からない…。」というお悩みはありませんか?

今、classの意味や使い方をわからなくても心配しないでください。

この記事では、classの意味から使いまでを網羅的に解説していきます。

それでは、さっそく見ていきましょう。

【HTML/CSS】classとは?(具体的な使い方も解説)

classは、HTMLのタグに付けることで、そのつけたタグに限定したCSSを適用させるようにするものです。

class(idでも可)をつけないと、CSSを好きな範囲で適用させることができません。

具体的に見ていきましょう。

例えば以下のようにコードを書きます。

<div class="hello">こんにちは!</div>
.hello{
  width: 150px;
  height: 100px;
  text-align: center;
  padding-top: 39px;
  background-color: lightgray;
  box-sizing: border-box;
}

出力すると以下のようになります。

HTMLのタグ内に、「class=”class名(クラスの名前)”」と書くことでタグにclass名をつけることができます。

class名は自分で好きにつけることができます(ただし、半角英数字に限ります)。

設定したclassにCSSを適用するときは、

.クラス名{
  CSSのコード
}

と書きます。

また、補足として1つのタグに複数のclass名をつけることもできます

要素間で共通するCSSがあった場合に複数のclassをつけることがあります。

複数のclass名をつける方法はとても簡単で、class名を書いた後にスペースを開けて、さらにclass名を書くだけです。

例えばコードを以下のように書きます。

<div class="box underline green">こんにちは!</div>
<div class="box bold red">こんにちは!</div>
.box{
  width: 100px;
  height: 100px;
  margin-top: 10px;
}
.underline{
  text-decoration:underline solid black;
}
.green{
  background-color: green;
}
.bold{
  font-weight: bold;
}
.red{
  background-color: crimson;
}

上記のコードでは、1つの要素について3つのclassがついています。

そうすることにより、3つのclassにそれぞれ割り当てられたCSSが、1つの要素にすべて適用されています。

以上がclassの基本的な説明になります。

HTMLのタグにclassをつけることで、特定のclassをつけたタグにだけ限定したCSSを適用させることができます。

classとidはどう違うのか?

classと同じように使うものとして、「id」が挙げられます。

結論からいうと、「classは名前を複数回使うもの、idは名前を1回しか使わないものです。」

では、なぜclassとidを使い分けるのでしょうか。

それは、コードを見たときに、classの場合はCSSを変更すると複数の箇所が変更され、idだと変更されるのが一箇所だけだとということをすぐ分かるようにするためです。

具体的に見ていきましょう。

例えば以下のように使い分けをします。

 <div id="circle"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
#circle{
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: orange;
}
.box{
  width: 100px;
  height: 100px;
  margin-top: 20px;
  background-color: skyblue;
}

CSSのコードの書き方として、idの場合は、classのときに「.(ドット)」と書いたところに「#(ハッシュ)」を書きます。

ちなみに上記コードを出力すると以下のように表示されます。

上の図を見ると円形が1つだけ存在し、四角形が3つ存在しています。

よって、CSSを適用するにあたり、1つしかない円形にはidを、CSSが全く同じ複数の四角形にはclassを割り当てています。

classは名前を複数使うもの、idは名前を1回しか使わないものだということを覚えておきましょう。

classを使うときの注意点

結論からいうと、classを使うときの注意点は、名前を被らないようにつけることです。

先ほど、classは複数の要素に同じCSSを適用させたい場合に使用すると説明しました。

このとき、意図的に同じクラス名を使いまわす場合は問題ありませんが、意図せずに名前がかぶってしまうと大変です。

名前がかぶってしまうと、特定のCSSを、適用したくない部分にまで適用してしまうからでです。

また、補足としてclass名のつけ方はある程度決めておきましょう

class名のつけ方をあらかじめある程度決めておかないと、毎回コーディングしていく際に新しく名前を考えるのは少し面倒です。

例えば、ナビゲーションバーのボタンにclass名をつけるとします。

その場合、例えばclass名は、「nav-btn1」「nav-btn2」などとつけたりできます。これはナビゲーション(navigation)の頭文字の「nav」と、ボタン(button)の短縮した形の「btn」をつけ、最後にボタンの区別がつくように数字を当てています。

その他には、四角形の要素のclass名は「box(箱)」という名前にしたり、円形のものは「circle(円)」という名前にするなど、ある程度自分の中でルールをつくりましょう。

以上がclassを使うときの注意点となります。classを使うときは、class名が被らないように工夫をし、class名のつけ方にはルールを設けましょう。

まとめ

いかがでしたでしょうか。

HTMLのclassについて頭が整理されたのではないでしょうか。

実際にコードを書くときは、コードを理解しやすいように、classとidをそれぞれ適切に使い分けましょう。

また、class名はかぶらないように工夫しましょう。

ぜひ、実践してみてください。