HTMLのclassとidの違いは?

HTMLでは、classと似たようなものとして、idというのがあります。
この違いも重要なので、しっかり覚えていきましょう。違いはとてもシンプルです。

【classは同じ名前を1ページ中で何度でも使えるが、idは1ページ中に1度しか使えません。】

これも例で解説していきます。

【例1】

<div class="demo">

<h1>cybergreen</h1>

<p>サイバーグリーン</p>

</div>

【例2】

<div class="demo">

<h2>cybergreenとは?</h2>

<h3>サイバーグリーンとは?</h3>

</div>

【classは同じ名前を何回も使える】

classは上記のように同じ名前(demo)を何回使っても問題はありません。
では、idの例を見てみましょう。

【良い例】

<div id="demo1">

<h1>cybergreenとは?</h1>

<p>サイバーグリーンとは?</p>

</div>
 
<div id="demo2">

<h2>cybergreenとは?</h2>

<h3>サイバーグリーンとは?</h3>

</div>

 
【悪い例】

<div id="demo">

<h1>cybergreeenとは?</h1>

<p>サイバーグリーンとは?</p>

</div>
 
<div id="demo">

<h2>cybergreenとは?</h2>

<h3>サイバーグリーンとは?</h3>

</div>

HTMLのclassとidの違いは?についてでした

【idは同じ名前を2回以上使うことは出来ない】

【悪い例】のように、「demo」というid名を2回(以上)使うことはできないのです。
demo1、demo2のように名前を変えることが必要です。
classとidの違いについてはよくある疑問として挙げられるので、これを機にしっかり覚えておきましょう。
今回でHTMLのdiv classについて大体理解できたのではないでしょうか。

投稿者プロフィール

kinukawahiroyasu