スタイルシート(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ページ中に何度も登場するデザインを記述する場合に使います。

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

  • このエントリーをはてなブックマークに追加

『naouniverse.com』では、管理人が気になるモノ・コト・セカイについて、つらつらと書いています。
ガジェット・カメラ・デザイン・プログラミング・L'Arc~en~Cielなどなど・・・