HTML･CSS｜IDとCLASSの違いと使い方

HTML・CSSのプログラミングに欠くことが出来ない「id」と「class」の違いと使い方を紹介。

idとclassのコーディング

<div id="id01">id01を宣言</div>

<div>タグのidを”id01″とした。

class

<div class="class01">class01を宣言</div>

<div>タグのclassを”class01″とした。

idとは？

要素を命名する。

idはページ内で唯一でなければいけない。

一度宣言したら、ページ内で同一のid名は使用できない。

又、一つの要素に複数のidは指定できない。

id名はCSSやSCRIPTで使用することがある。

classとは？

idと同様で要素の命名。

classはidと違って、ページ内で複数出現可能。

そして、一つの要素に複数のclassを指定できる。

idと同様にclass名はCSSやSCRIPTで使用することがある。

CSSでの使い方

#id01
{
    background-color: white;
}

idは「#」から！！

class

.class01
{
    background-color: white;
}

classは「.」から！！

idとclassの使用例

HTML

<div id="midashi">idを使用:背景色が黒で文字色が白"</div>

<div class="bgcyellow clrblk">classを使用:背景色が黄で文字色が黒</div>
<div class="bgcyellow clrblu">classを使用:背景色が黄で文字色が青</div>

<div class="bgcwhite clrblk">classを使用:背景色が白で文字色が黒</div>
<div class="bgcwhite clrblu">classを使用:背景色が白で文字色が青</div>

<div class="bgcgreen clrblk">classを使用:背景色が緑で文字色が黒</div>
<div class="bgcgreen clrblu">classを使用:背景色が緑で文字色が青</div>

<div class="cls01" id="id01">classとidを使用:背景色が水色で文字色が赤</div>

CSS

#midashi
{
    color: white;
    background-color: black;
}
.bgcyellow
{
    background-color: yellow;
}
.bgcwhite
{
    background-color:white;
}
.bgcgreen
{
    background-color: green;
}
.clrblk
{
    color: black;
}
.clrblu
{
    color: blue;
}
#saigo
{
    color: red;
}
.cls01
{
    background-color: skyblue;
}
#id01
{
    color: red;
}