CSS・htmlでのclassとidの違い

htmlにclassやidを指定し、CSSでデザインを指定します。

ではclassとidは何が違うのか説明します。

classとidの共通点

idもclassも「CSSを指定するため」という点は共通です。記号は違いますが、CSSの記述は同じです。id,classじゃないと使えないCSSというのもありません。

例

idの場合

<style>
#E{
border:1px solid #333;
}
</style>
<div id="E">テキスト</div>

テキスト

classの場合

<style>
.E{
border:1px solid #333;
}
</style>
<div class="E">テキスト</div>

テキスト

上記のようにidでもclassでも結果はまったく同じになります。

一つのhtml内に記述していい回数が異なります。

id:1回
class:複数回

idの例

同じidを記述（禁止）

<div id="A"></div>
<div id="A"></div>

違うidを記述（OK）

<div id="A"></div>
<div id="B"></div>

classの例

同じclassを記述（OK）

<div class="A"></div>
<div class="A"></div>

違うclassを記述（OK）

<div class="A"></div>
<div class="B"></div>

よってidはヘッダーやメインコンテンツなど各htmlに1回しかでてこない要素に指定し、classはリストなど複数回使う可能性がある要素に使うことに向いています。

慣れないうちはclassだけ使うのも手です。

1つのタグの中で記述していい回数が異なります。

id:1回
class:複数回

タグ内に複数のidを記述（禁止）

<div id="A B"></div>

タグ内に複数のclassを記述（OK）

<div class="A B"></div>

CSSの優先度が異なります。

id:高い
class:低い

#A{margin:10px;}
.A{margin:20px;}

上記のようにidとclassに同じCSSプロパティが指定されている場合idが優先されます。

詳しくは以下の記事をご確認ください。

idはページ内リンク先として利用できます。

id:利用可
class:利用不可

例

<p><a href="#A">ページ内リンク</a></p>
<div id="A">テキスト</div>

以前はページ内リンクと言えば「name」でしたが、現在ではブラウザによっては「name」ではページ内リンクしません。

idを使ってページ内リンクさせます。

以上、CSS・htmlでのclassとidの違いでした。

マンガでわかるホームページ作成