HTMLの”id”と”class”のちがいとは？

こんにちは、HTMLをコーディングしていく中でidとclassを使って名前をつけていくと思います。どちらとも同じように名前をつけられるのですが、どんな違いがあるのでしょうか？見ていきましょう！！

idとclassの１番の違い

classとidの大きな違いは同じページ内に複数設定できるか、一個だけかの違いです。

<div class="test">同じクラスを複数設定できるよ</div>
<div class="test">同じクラスを複数設定できるよ</div>
<div id="test">同じidは一個だけだよ！></div>

classの場合testというclassはいくつでも決めることができます。逆にidは読み込んだページ内に同じidは一個しか使えません。ですので複数使いたい場合はclassを使いましょう。

idはどんな時に使うの？

同じ名前のidは１回しか変えないのにどんな時に使うか気になると思います。idは１回し変えないため,

javascriptと紐付けて使うことが多いです。同じidは1つしかない為、読み込んでidを探す際、複数探す必要がなく効率がよくなります。

CSSだけで色や背景を指定する場合はclassで大丈夫です。

idとclass,CSSでの表記の仕方

.test{
  color: #d4b1e6;
}
#test{
  color: aqua;
}

先ほどのtestというid,clsaaに対してこのようにCSSで指定します。

これでidとクラスを別々に分けて指定することができます。