HTML/CSSをコーディングする際に重要となるid属性とclass属性の使い分けについて。
id属性とclass属性とは
id属性もclass属性も、どちらもHTMLのタグに名前をつけて、その属性がついたコードだけに作用させる働きがある。
html
<p id="test">○○</p>
<p class="test">○○</p>
id属性とclass属性を同時に記述することも可能。
<p id="test_id" class="test_class">○○</p>id属性の値は「id名」、class属性の値は「class名」と呼ばれる。
css
cssでは、idは「#」、classは「.」で表される。
p#test{ color: red; } /*idの場合*/
p.test{ color: red; } /*classの場合*/要素名を省略して（# or . からスタート）、id名、class名だけで記述できる。
id属性とclass属性に共通の決まり
idもclassも、HTMLのタグ（＜a＞, ＜h1＞-＜h6＞, ＜p＞, ＜br＞, ＜img＞, ＜div＞, ＜span＞ etc...） に付与して属性をもたせることができるが、名前の付け方にはちょっとした決まりがある。
- 半角英数字を使う
- 大文字もOKだが、できるだけ小文字が望ましい
- ハイフン「-」とアンダースコア「_」は使える
- 先頭が数字や記号から始まるのはNG
ハイフンとアンダースコアとどちらを使用したほうが良いかは議論が尽きないが、今のところはどちらでも良い、ということのよう。
ただ、混在するのはよろしくない。
私はハイフンで統一している。
id属性とclass属性の違い
id属性とclass属性の違いは、
- id属性は1つのページで1回だけしか使えないのに対して、class属性は複数使用可能
- id属性とclass属性がバッティングしたらid属性が優先される
- javascriptを使う時はidの方が処理が早い
- ページ内リンクを作製する時はidを使う
etc...
idとclassの使い分け
idとclassをどのように使い分けるかというと、
とりあえずclassを使う、と思っておけばOK。
理由は、
- id属性は優先度が高いのでcssを適用する時に反映しにくくなる
- 別々の要素に対して同じcssを適用したいとき、複数使えるclassの方が便利
etc...
実際、プロの人達もclass属性の方が使用頻度が高い（id : class = 1 : 9くらい）とのこと。
私はページ内リンクを作製する時だけid属性を使用し、css整形はすべてclassで行うようにしている。
