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を使う。迷ったら、そう考えてみてはいかがでしょうか。

スポンサーリンク