id属性を使うと「ページ内リンク」も作れる
ある要素にid名が割り振られていれば、対象を一意に特定できます。そのため、id名は「ページ内リンク」のリンク先を指し示す用途としても使えます。たとえば次のようにリンク(a要素)を記述した場合を考えます。
<a href="#footer">ページ末尾へ</a>上記は「ページ内リンク」を作るHTMLソースです。このように記述した場合、「footer」という名称のアンカーポイント(＝ページ内で「footer」という名前が付けられた位置)に移動するリンクができます。
このとき、次のようなid属性が付加されたdiv要素があれば、
<div id="footer"> ここからページ末尾～ ： ： ： </div>先ほどの「ページ内リンク」をクリックすると、上記のid属性が付加されたdiv要素のある位置に移動することになります。
※id属性を付加する要素は、div要素以外でも構いません。
id属性値が「ページ内リンク」に使えることからも、「同じid名は1ページ中に1度しか使えない」ことが納得頂けるでしょう。同じid名が複数の要素に使われていると、どこへ移動すればよいのかが特定できなくなりますから。
このように「id」は、ある要素に固有の名前を付けて、一意に特定するために使われます。
id属性とclass属性では、スタイルが適用される優先度が異なる
CSSでは、装飾内容が重複(バッティング)した場合には、原則として「後に記述された方」が採用されます。例えば、以下のようにclass属性とid属性の両方が指定されたp要素がある場合、<p class="sakura" id="tomoyo"> ～ </p>この要素に対するスタイルの適用は、以下のようになります。
■class名での装飾が重複している場合：
以下のCSSソースのように、同じclass名に対して同じプロパティが複数回指定されている場合は、(最後の指定が適用されて)対象要素は赤色で表示されます。
.sakura { color: blue; }
.sakura { color: red; } // こちら側が適用される
しかし、■id名とclass名で装飾が重複している場合：
以下のCSSソースのように、class属性とid属性に対して別々に同じプロパティが指定されている場合は、「class側とid側とで装飾内容がバッティングした際にはid側が優先される」という規則があるため、(記述順に関係なくid側の方が優先されて)対象要素は青色で表示されます。
#tomoyo { color: blue; } // こちら側が適用される
.sakura { color: red; }
CSSのソースが非常に長くなるような大規模なデザインでは特に、classとidを複雑に混在させると、どの記述が優先して適用されるのかが把握しにくくなるという問題があります。このため、「あらゆる装飾は極力classだけを使って記述する」という考え方もあります。規模の大きなソースでは、(特段の必要性がない限りは)class属性だけを使う方が無難かも知れません。
スタイルを適用する際の、class属性とid属性の違いと使い分け
今回は、スタイルを適用する際に使われるclass属性とid属性の違いと、その使い分け方法をご紹介いたしました。すべての装飾にclass属性を使っているのであれば、それでも構いません。しかし、うまく使い分ければ読み解きやすいCSSソースになるでしょう。なお、同じid名を同一ページに複数回使ってしまっている場合は、異なるid名に修正するか、もしくはclass属性を使うように修正しましょう。【関連記事】
