CSSの記述方法 -idとclassの違い

「class」は繰り返しの使用が可能 「id」の重複使用は不可

CSSレイアウト実践講座

CSSレイアウト実践講座について

運営者プロフィール

運営者ブログ*

お問い合わせ

CSSの記述方法 -idとclassの違い

CSS記述の際に用いられるのが「id」や「class」といった名前です。「id」と「class」には、利用上のルールが1点あります。

[CSSの記述]

div { ***** : *****; }
#***** { ***** : *****; }
.***** { ***** : *****; }

[タグへの記述]

なし
id="*****"
class="*****"

これらのうち、idセレクタを用いて指定するものは、CSSプロパティの前に「#」(シャープ)を、classセレクタを用いて指定するものの前には「.」(ドット)を付けます。

しかし、上記の例のように、タグ名を直接指定する場合は問題ありませんが、「id」と「class」とではどちらを使えばよいか迷ってしまいます。この「id」と「class」の違いは次の通りです。

  • 「id」は1ページ内で同じ名前を1回しか使用できない。
  • 「class」は1ページ内で同じ名前を何度も使用できる。

1ページで1度しか使用できない名前を複数使ってしまった場合(id="name"という記述が複数になった場合)、一部のアクセス解析やその他 cgiプログラムなどで不具合を起こしてしまうこともあるようです。ブラウザ上ではid名が重複していてもCSSの指定は反映されますが、リスクを考えて慎重に使うようにしましょう。

それでも不安、という方は、idは使わずに全てclassで設定すれば問題ありません。

idを利用する場合は、サイトをレイアウトするためのDIVタグや、ページ上部1箇所のみに表示するグローバルナビなど、間違いなくページ内で1回しか出てこない部分を指定するようにしましょう。