IDとクラスを理解する

ここいらでそろそろidとclassについて触れておきます。

サンプルの中には、p要素が5回登場しています。pに対してcolor:#f00;（赤色フォント）を適用してしまうと、これら5個のp全てに赤色フォントが適用されてしまって、pでくくられた全ての文字が赤色になります。

5個のp要素のうち、特定のpだけを赤文字にしたいというときにidとclassを使います。

具体的には、特定のpに対して名前をつけてあげます。

<!-- HTML -->
<p id="red">>リンゴに含まれるリンゴポリフェノールには脂肪の蓄積を抑制する効果があるともいわれる</p>

ここではp要素のid（名前）をredとしました。これにスタイルを適用させるには

/* CSS */
p#red {
	color:#f00;
	}

とします。pをつけずにただの「#red」でもOKです。これでredという名前の要素だけに対してスタイルを適用させることができます。

classの役割もidとまったく同じなのですが、同じIDはページ内で一度しか使うことができないというルールがあるため、2つ以上の要素に対して同じ名前をつけたい場合はclassを使用します。

<!-- HTML -->
<!-- 同じIDは同一ページで2回つかえない -->
<p id="red">>あいうえお</p>
<p id="red">>かきくけこ</p>

<!-- 同じclassは同一ページで2以上使える -->
<p class="red">>あいうえお</p>
<p class="red">>かきくけこ</p>

/* CSS */
p.red {
	color:#f00;
	}

classのときは#ではなく、.（ドット）をつけます。

なんで2つもあるんだ！めんどうだから全部classでいいや？と思う人もいるかもしれません。idを直接指定するformやjavascript等を頻繁に使うようになるとその意味がわかるようになります。今のうちから両者の記述に慣れておきましょう。

ここまでの、サンプル。

コメントor補足情報orご指摘あればをお願いします。

• << 前のページ
• 次のページ >>