HTML-CSS

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で行うようにしている。

にほんブログ村 科学ブログ 脳科学へ
にほんブログ村 子育てブログ 海外ワーキングマザー育児へ
PVアクセスランキング にほんブログ村