id属性とclass属性


id属性とclass属性について簡単に触れておきます。
どちらの属性もhtmlの要素に使われ、スタイルシートのセレクタで使われます。

containerをid属性で装飾するとき、セレクタは#containerのように#を付けます。
containerをclass属性で装飾するとき、セレクタは.containerのように.を付けます。

class属性

class属性は要素に対して、分類を指定します。

<要素 class=”分類“>
</要素>

単に分類するだけなので、1ページ中で何回でも要素に対し同じ分類を付けることができます。

たとえば、分類をsample_1としたとき、

<div class=”sample_1″>
</div>
<div class=”sample_1″>
</div>
<div class=”sample_1″>
</div>

のように1ページ中で何回でも使えます。

NOAMOのホームページを自作するサイトでは、

<div id=”container”>
</div>

としましたが、

<div class=”container”>
</div>

としても、なんら問題ありません。
ただ、サイトの幅などは2回指定することはないのでid属性を使いました。

id属性

id属性は要素に対して固有の名詞を付けます。

<要素 id=”固有の名詞“>
</要素>

固有の名詞なので、要素に対し同じ固有の名詞を1ページに使う回数は1回のみにしなければなりません。

id属性はスタイルシートのセレクタで使用される他に、a要素のリンク先を指定する場合にも使われます。

アンカーテキストを<a href=”#container”>移動する</a>としたとき、移動する、をクリックすると同じページのcontainerという固有の名詞が付けられたアンカーポイントへ移動することができます。

id属性とclass属性には以上のような違いがあります。

実は、全てclass属性を使ってもよいのです。
が、一般的に1回しか使わない値(固有の名詞)、アンカーポイントを設けるときはid属性を使います。

たとえば、コンテナ、メニュー、などはid属性を使う場合が多いです。