CSS【id属性】と【class属性】を画像付きでわかりやすく説明するよ！

ＨＴＭＬを勉強したてのころに必ず出てくる疑問が【id属性】と【class属性】てなんなん？って疑問にぶち当たることかと思います。簡単なことなのでこの記事を読んで違いについて理解を深めていきましょう。

【id属性】と【class属性】ってなに？

簡単に言うとどちらも要素に名前を付けてあげることができるということです。下のコードを見てください。

■HTML

<div id ="sample1">sample1</div>
<div class ="sample2">sample2</div>

id属性にsample1、class属性にsample2という名前を付けました。
【id属性】も【class属性】も共通して言えることは要素に名前を付けてあげることができるということです。

【id属性】と【class属性】のCSSの書き方

【id属性】と【class属性】のCSSの書き方は、↓のような書き方になります。

■CSS

#sample1{
 background-color: yellow;
 }
 .sample2{
 background-color: orange;
 }

id属性sample1は先頭に『#』がついています。これはid属性のsample1ですよ！って意味になります。なぜ『#』なのかはあまり気にしないでください（笑）

id属性はセレクタの先頭に『#』が付くと覚えといてくださいね。

class属性sample2は先頭に『.』がついています。これはclass属性のsample2ですよ！って意味になります。これもid属性同様、『.』が先頭に付くとだけ覚えておきましょう。

表示するとちゃんとスタイルが適応されているのがわかりますね。

【id属性】と【class属性】の違いは？

id属性はそのページに同じ名前は１つしか存在してはいけません。

W3Cという団体がそういうルールを決めたので。

同じ名前は重複するとルール上よくありません。ですがあくまでルール上であって重複することは可能です。

例えばこのように【id属性】に同じ名前を付けてあげてCSSでスタイルをつけた場合。

■HTML

<div id ="sample1">sample1</div>
<div id ="sample1">sample1</div>

■CSS

 #sample1{
 background-color: yellow;
 }

普通にスタイルは適応されます。

えっ？（笑）って感じでしょ？
ただJavascriptなどで要素を認識して処理を行う場合は、id が重複していると、
処理の過程で取得したい要素をうまく取得できず、
スクリプトが思い通りに動作しなくなる場合があります。

基本的にはW3Cのルールにしたがってid属性は重複してはいけないということを守りましょう。

class属性はそのページ内に同じ名前が複数存在してもＯＫです。

■HTML

<div class ="sample1">sample1</div>
<div class ="sample1">sample1</div>
<div class ="sample1">sample1</div>
<div class ="sample2">sample2</div>
<div class ="sample2">sample2</div>
<div class ="sample2">sample2</div>

■CSS

.sample1{
background-color: yellow;
}
.sample2{
background-color: orange;
}

スタイルもそれぞれのclassに適用されました。

まとめ

• 【id属性】と【class属性】とは要素に名前を付けてあげることができる
• 【id属性】は、セレクタの先頭に『#』を付ける
• 【class属性】は、セレクタの先頭に『.』を付ける
• 【id属性】はルール上、そのページ内に同じ名前が重複してはいけない
• 【class属性】は、ページ内に同じ名前が複数存在してもＯＫ

以上！