ホーム（記事一覧）へ

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でも結果はまったく同じになります。

classとidの違い

html内に記述していい回数

一つの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優先度

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

id:高い
class:低い

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

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

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

CSSの優先順位と点数計算
疑似クラス、属性セレクタなど含めたCSSの優先順位と点数計算方法を解説します。
この記事を読む

ページ内リンク利用

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

id:利用可
class:利用不可

例

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

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

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

まとめ（違い一覧）

idclass
html内に記述していい回数1回複数回
一つのタグで記述していい回数1回複数回
CSS優先度高い低い
ページ内リンク利用可能不可

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

関連記事