HTMLのclassとidの違いは？

HTMLのclassとidの違いは？

投稿日 : 2017.6.9 最終更新日時 : 2017.8.1 投稿者 : kinukawahiroyasu カテゴリー : CSS, HTML, web関連

HTMLのclassとidの違いは？

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

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

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

【例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は同じ名前を２回以上使うことは出来ない】

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