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

HTML
スポンサーリンク

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

idとclassの1番の違い

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

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

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

idはどんな時に使うの?

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

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

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

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

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

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

classの場合、(ドット).〇〇〇〇{}

idの場合、(シャープ)#〇〇〇〇{}

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

コメント

タイトルとURLをコピーしました