class属性とid属性の違い
今回は、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>
実行すると、両方とも見た目は変わらないです。
では、「class属性」と「id属性」の違いは何だろうと思い、調べてみました。
違いは、こうなります。
- class属性・・・同じclass名を、1ページ中に何度でも使える
- id属性・・・同じid名は、1ページ中に1度しか使えない
ちなみに、全部の指定に「class」を使っても問題はないです。
1回しか登場しないからといって、「id」を使うという決まりはありません。
上で、同じid名は「1ページ中に1度しか使えない」と書きましたが、実は、使えます(笑)
<p id="test2">idの場合1</p> <p id="test2">idの場合2</p>
#test2{ color: red; }
実行結果
これはブラウザが気を利かせて、適応させてくれているだけです。こういう書き方は間違いです。
同じid名を使用するのは、問題になる場合もあるので、やめましょう。
まとめると・・・
1ページ中に何度でも登場できるものには「class属性」、1ページ中に1度しか登場しないものには「id属性」を使います。