スタイルシート(CSS)のclass属性とid属性の使い分けに迷った場合は?

こんにちは、naouniverse( @naouniverse708 )です。

このたび、CMSをMovable TypeからWordPressへ移行しました。
それに伴い、ページのデザインをイチから再構築しております。

その際に、スタイルシート(CSS)のclass属性とid属性の使い分けに迷う時があったので、google先生に教えてもらったことを備忘録として残しておきます。

例
■HTML：

<p class="kurasu">classを使った例</p>
<p id="aidhii">idを使った例</p>

■スタイルシート：

p.kurasu { color: red; }
p#aidhii { color: red; }

上記はブラウザ上での表示効果は同じです。
それでは、どう使い分けるか・・・

• ■ class : 種別名を割り当てる
  → 同じclass名を、1ページ中に何度でも使える
• ■id : 固有の名前を割り当てる
  → 同じid名は、1ページ中に1度しか使えない

id属性の使用例として、div要素を用いてページを構成する場合、

• ヘッダー：
  <div id ="header">～</div>
• サイドバー：
  <div id="sidebar">～</div>
• メイン：
  <div id="main">～</div>
• フッター：
  <div id ="footer">～</div>

といった感じで重複しないものにid属性を使うと整理しやすいです。

逆にclass属性は、1ページ中に何度も登場するデザインを記述する場合に使います。

といった感じで、用途に応じてうまく使っていきたいと思います。