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が優先されます。
詳しくは以下の記事をご確認ください。
ページ内リンク利用
idはページ内リンク先として利用できます。
id:利用可
class:利用不可
例
<p><a href="#A">ページ内リンク</a></p>
<div id="A">テキスト</div>以前はページ内リンクと言えば「name」でしたが、現在ではブラウザによっては「name」ではページ内リンクしません。
idを使ってページ内リンクさせます。
まとめ（違い一覧）
| id | class | |
|---|---|---|
| html内に記述していい回数 | 1回 | 複数回 |
| 一つのタグで記述していい回数 | 1回 | 複数回 |
| CSS優先度 | 高い | 低い |
| ページ内リンク利用 | 可能 | 不可 |
以上、CSS・htmlでのclassとidの違いでした。
