HTML/CSS
class
css
html

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

2021/04/05

( 更新日：2022/04/19 )

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のときに「.(ドット)」と書いたところに「#(ハッシュ)」を書きます。

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