Global Information site~siruzou

初心者WEBデザイナーがよく悩むcssのidとclassの違いは?

web design word cloud on blackboard

cssで設定される要素には、idで指定するものとclassで指定するものがあります。

HTMLの中では、 〈div id=”main_content”〉〈/div〉とか
〈span class=”date”〉2014.01.01〈/span〉

などと書かれるところです。cssを書こうとする初心者の多くが、idとclassの使い分けで悩むのではないでしょうか?

スポンサーリンク

使い分けのルールを覚えよう

idを指定しようがclassを指定しようが、どっちを使っても表示上はハッキリとした差は見られません。それでも、いろいろなサイトを見て回ると、たしかにみんな使い分けている……

これは使わないとカッコ悪いのではないか、端くれとは言えweb制作に携わるものとしては、いかがなものだろうかと、見栄や格好の面だけで考えて、悩んでおりました。

実際には、カッコがいいとかそんなものではなく、ちゃんとした使い分けが決まっています。そのルールとは次のようなものです。

“そのhtml内で、特定の箇所で1回だけ使われる部分がid、繰り返し複数回出てくる要素にはclassを使う”

idは1回だけ、2回以上使いたいものはclassで設定することになります。以下に例を載せてみます。

スポンサーリンク

idの使い方

・ヘッダー、メインコンテンツ、フッター
・グローバルメニュー
・メインタイトル、メイン画像
などといった、ページに1つしかない箇所、パーツに使用します。

htmlでは、〈div id=”main_contents”〉メインコンテンツ〈/div〉
cssでは、#main_contentsなどと”#”(シャープ)を付けて書きます。

classの使い方

・文節やリスト項目、小見出し
・写真や画像
など、ページ内に繰り返し出てくるパーツに使用します。

htmlでは、〈div class=”maintext”〉本文〈/div〉
cssでは、.maintextと”.”(ドット、ピリオド)を付けて書きます。

classは細やかな要素ひとつひとつに設定することが多いものです。そのためか装飾もより細かく指定できるようになっており、ひとつの要素に対して、複数のclassを設定できるようになっています。

その場合は、〈div class=”maintext red”〉本文で赤字〈/div〉といったように、”"の中に半角スペースで区切りながら、複数のclassを書くこともできます。

そのページ内で特別な要素、差別化したい要素がidを、言い方は悪いけれど、その他多数というイメージのものがclassを使う。迷ったら、そう考えてみてはいかがでしょうか。

スポンサーリンク

Pocket
LINEで送る

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

知る蔵のTwitter~フォーローをお願います

知る蔵グループ関連専門サイト

ページ上部へ戻る