Three.jsを使って、作ってみた

プログラミング関連の事を色々書いています（＾＾）　週末はレストランやコンビニのお菓子のことを書いています。

class属性とid属性の違い

css

今回は、class属性とid属性の違いについて書きます。


class属性とid属性は、HTMLでスタイルシート(CSS)を適用する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="utf-8">
	<title>テスト</title>
</head>
<body>

	<p class="test1">classの場合</p>
	<p id="test2">idの場合</p>

	<style>

	.test1{
         /*class属性*/
		color: red;
	}

	#test2{
         /*id属性*/
		color: red;
	}

	</style>
</body>
</html>

f:id:gupuru:20140303143159p:plain

実行すると、両方とも見た目は変わらないです。
では、「class属性」と「id属性」の違いは何だろうと思い、調べてみました。


違いは、こうなります。

  • class属性・・・同じclass名を、1ページ中に何度でも使える
  • id属性・・・同じid名は、1ページ中に1度しか使えない


ちなみに、全部の指定に「class」を使っても問題はないです。
1回しか登場しないからといって、「id」を使うという決まりはありません。

上で、同じid名は「1ページ中に1度しか使えない」と書きましたが、実は、使えます（笑）

<p id="test2">idの場合１</p>
<p id="test2">idの場合２</p>

#test2{
	color: red;
	}

実行結果
f:id:gupuru:20140303144408p:plain

これはブラウザが気を利かせて、適応させてくれているだけです。こういう書き方は間違いです。
同じid名を使用するのは、問題になる場合もあるので、やめましょう。


まとめると・・・
1ページ中に何度でも登場できるものには「class属性」、1ページ中に1度しか登場しないものには「id属性」を使います。