クラスとIDの違い

ページ内で1つしかない要素を特定するのがID、いくつかの仲間が存在するのがクラスです。

divやspan、pなど、同一の(X)HTML内で繰り返し利用される要素は、区別が付きやすいように属性で分類したり、名前を付けたりします。要素を分類したり、名前を付けたりすることで、セレクタで特定することが容易となり、スタイルを指定しやすくなります。
このように、要素を分類する際に利用するのが、class属性です。class属性では、同じ値を複数の要素に指定できるので、値によって複数の要素をグループ化することができます。たとえば、ブログの記事のように、同じ階層構造を持つdiv要素がページ内に複数ある場合、これらに同じclass属性の値を指定すると、すべての記事に同じスタイルを適用することができます。
それに対して、1つの要素を特定するために利用するのが、id属性です。id属性では、1つのファイルに同じ値を1度しか利用できません。あるid属性の値を持つ要素は、1つの(X)HTMLファイルの中では1つしか存在しないというわけです。Webページのデザインの中で、特にこの要素にだけスタイルを指定したいという場合に、idのセレクタを利用するのがよいでしょう。

name属性を使うときの注意点

name属性を使うとき、リンクの要素は(X)HTMLでは使わない様にします。新しいHTMLの規格、HTML5では、a要素を個別に認識するための属性としてnameではなくてidを使用することを推奨しているからです。

HTML5では構造化用の要素が利用できる

新しいHTMLの規格であるHTML5では、HTMLを構造化して記述するために、section、header、nav、aside、footer、articleといった要素が追加されます。現在作成しているWebページではdiv要素のclass属性やid属性の値で構造化の用途を区別していますが、HTML5へ移行しやすいようにsection、headerといったHTML5の要素名に合わせたclass属性やid属性の値にしておくと、便利です。

カテゴリー: CSS, HTML5, HTMLの基礎知識, ナレッジノート, 属性   パーマリンク