classとidの使い分け - WEBデザイナーを目指して。

どうも、こんにちは。
なにやら台風が二つ接近しているとかで、外は大荒れですね。雨は嫌いじゃないですけど、さすがにこの雨の中外出は躊躇われます・・・本とサバゲー用品買いに行こうと思ってたのですが(´・ω・`)

さて、それでは今回ですが、classとidの使い分けについて書いていきたいと思います。
以前id属性について書いた時も、特性の違いは分かっていたものの使う時の区別が曖昧でした。それを明確にするべく先日WEBで調べて勉強し直したので、その事についてまとめようと思います。

classとidの違い

そもそもclassとidというのは、HTMLを記述している時に一部分の要素に名前（class名やid名）を付け、部分的にCSSを与えて見た目を変えるという役割を持っています。これはどちらにも共通するものです。ですが、この二つには異なる性質があります。

それは、１ページ内に同名のものが存在できるかどうかです。
先ほどの説明の通り、classやidはclass名やid名を付けて扱うものなのですが、classの場合は１ページ内に同じclass名がいくつあっても構わないのに対して、idは１ページ内に同じid名があってはいけないという制約があります。

一つ、私が調べたサイトに分かりやすい例があり、「class名は学級、id名は学籍番号にあたる」という風に考えると理解しやすいとの事でした。確かに学級は１つの学年にいくつも存在していて、且つ学籍番号はそれぞれ個人固有のもので複数は存在しませんよね。この例で言うと、ページはさしずめ学年でしょうか。

ともかく、classとidの使い分けをするには、この違いを上手く扱う事になります。

classとidの使い分け方

それでは、具体的にclassとidはどのように使い分ければいいのか。これは前述の通り、二つの異なる性質を利用します。

まずidですが、こちらは同名のid名を１ページで一度しか使えない為、固有名を与えるために使います。つまり、１ページに一度しか登場しないような固有の要素にid名を与える形です。例えば、ヘッダーやフッタ等は、レイアウトにもよるでしょうが１ページに一部分のみな事が一般的です。なので、<div id="header">のようにid名を与えると良いと思われます。
まぁ、ヘッダーやフッターは元々HTMLの方にタグが用意されていますが・・・

続いてclassですが、こちらは複数の要素に同名のclass名を与えられる事から、種類や種別毎に名前を付け、必要な要素に与えていきます。
例えば、与えられた要素を強調するclassや、画像を右に寄せるclass等を作っておけば、強調したい部分が出た時、画像を右に寄せたい部分が出た時に、これらのclass名を与えるだけで事足りるようになります。
この様に、classは複数の部分に同一の要素を持たせたい場合に便利になりますね。

全てclassでも構わない？

classとidの違いや使い分け方をここまで書きましたが、一つ疑問が出る人も居るのではないでしょうか。というか私自身、classとid覚えたてやいくつかのコードを見た時に思った事なのですが。
その疑問が、「これ全部classじゃダメなの？」って事です。

１ページで同名は一度のみという決まりのあるidと違い、classは何度でも同class名を使用できます。また、複数回使えるのだからidの様に１度のみだけ使うというのも勿論可能です。とどのつまり、classでもidと同じ事できるのです。
それじゃあ、全部classだけでやってしまってもいいのかという事ですが、私の見たサイトでは「全てclassでも構わない」とありました。可能だとはいえさすがにどうなんだろうと思っていたので正直ビックリ。

この理由として、idはclassより優先順位が高く設定されている事が挙げられます。つまり、本来ならCSSでは下にあるもの程優先順位が高く、上にある装飾内容とバッティングした場合は下のものが優先されますが、idとclassの装飾がバッティングした場合、classの装飾が下だったとしてもidの装飾内容が装飾内容が優先されるという事です。この為、規模の大きなソースでidとclassが複雑に乱立していた場合、結局適用されるのがどれなのかの特定がしづらい事があります。であれば、規模の大きな場合は特に、classのみでコードを書いた方が良いのではないか、という意見もあるそうです。

とはいえ、勿論idを混ぜる事にメリットがないわけでもないようです。idがあることで「これはある固有の一部分にだけ行う装飾なんだ」という事が容易に理解でき、後から読む人の助けになるようですね。一意に特定する要素を見つけ、うまくidを扱う事ができれば、classのみのコードよりも読みやすくなるのではないでしょうか。

idとclassの使い分け、またその必要性などについて書いてみましたが、結局idをうまく混ぜて書いていくか、classのみで書いていくかは人によるようですね。恐らく書くソースにもよるとは思いますが・・・
なんにせよ、どちらか一方だけでなく、場合に応じて使い分けられるようにしておきたいですね。