HTMLのclass属性とid属性について

Webサイトを構成するHTMLで使用するclass属性とid属性の解説をしていきます。この記事はHTMLのタグの使い方を学んだ後の人向けの記事になります。まだタグの使い方を理解していない方やCSSのセレクタなどを知らない方は、それぞれを学んだ後にこの記事を閲覧することをお勧めいたします。

class属性やid属性の必要性

通常CSSでは、セレクタにプロパティと値を指定して装飾をしていきます。

<!-- HTML -->
<p>エンプロス</p>

/* CSS */
p { color: green; }

この様にすると、pタグで囲まれた「エンプロス」という文字列は緑色になります。

では、この様な例の時に、「エンプロス」の文字列を緑にするにはどの様にすればよいでしょう。

<!-- HTML -->
<p>エンプロス</p>
<p>職業訓練校</p>
<p>姫路市</p>

/* CSS */
p { color: green; }
この状態では、すべてのpタグで囲まれた文字列が緑になってしまい、エンプロスだけを緑にすることはできない。

CSSのセレクタをタグにしか指定できない状態では、エンプロスの文字列を緑にすることができません。こんなときに使用する属性がclass属性とid属性です。

では、今度はclass属性を使って「エンプロス」の文字列を緑、id属性を使って「職業訓練校」の文字列を赤にしてみます。

<!-- HTML -->
<p class="green">エンプロス</p>
<p id="red">職業訓練校</p>
<p>姫路市</p>

/* CSS */
.green { color: green; }
#red { color: red; }

class属性とid属性の命名ルール

クラス名やID名の命名は任意の文字を選ぶことができます。ただし、いくつか命名にはルールがあり、そのルールを守らない場合は、CSSがうまく適用しないことがあります。

• 英文字（a〜z,A〜Z）と数字（0〜9）、ハイフン（-）、アンダースコア（ _ ）を使う
• 最初の文字は数字NG
• 半角スペースを入れない
• 日本語は文字化けの可能性があるので使わない
• できれば何をしているか想像できる名前

class属性をつかってOK例とNG例を挙げておきますので、しっかり命名ルールをマスターしましょう。

<!-- OK例 -->
<p class="red">赤色</p>
<p class="red01">赤色</p>
<p class="red-font">赤色</p>
<p class="red_font">赤色</p>

<!-- NG例 -->
<p class="red#">赤色</p> <!-- #が使用してはいけない文字 -->
<p class="3red">赤色</p> <!-- 最初の文字が数字はNG -->
<p class="赤">赤色</p> <!-- 文字化けしてCSSが効かないことも。ファイルサイズが大きくなる -->

<!-- 間違えではないけど、意図と違う -->
<p class="red font">赤色</p>
<!-- red classというクラス名ではなくredとfontの２つのクラスになる -->

class属性とid属性の違い

今までの説明では、class属性とid属性が同じ様に使われていますが、実はclass属性とid属性は少し使い方が異なってきます。

違いについては、下記にまとめています。

	class属性	id属性
HTMLの指定の仕方	class=”xxxxx” ex) <p class=”green”>	id=”xxxxx” ex) <p id=”red”>
CSSの指定の仕方	.xxxxx ex) .green	#xxxxx ex) #red
HTMLの１ページで 指定できる数	同じクラス名は何度でも使ってもよい ex) <p class=”green”>A</p> <p class=”green”>B</p> <p class=”green”>C</p>	同じID名を使えるのはページで１回のみ ex) <p id=”red”>A</p>
その他の属性	なし	ページ内リンクとして使用化

HTMLの指定の仕方

<!-- HTML -->
<p class="green">エンプロス</p>
<p id="red">職業訓練校</p>

クラス名は「green」の場合、タグにclass=”green”と付けます。
ID名は「red」の場合は、タグにid=”red”と付けます。

CSSの指定の仕方

/* CSS */
.green { color: green; }
#red { color: red; }

クラスをセレクタに指定する場合はクラス名の文頭に.(ドット)を付けます。
IDをセレクタに指定する場合はID名の文頭に#(シャープ)を付けます。

HTMLの１ページで指定できる数

classとIDの大きな違いがここになります。

同じclass名を1ページ内に何度でも使ってもよいのに対して、ID名は1ページ内に同じID名を1度しか使用することができません。

<!-- HTML -->
<p class="red">赤</p>
<p class="red">ポスト</p>
<p class="red">トマト</p>
<p id="green">エンプロス</p>

ページ内リンクができるid属性

<!-- HTML -->
<a href="#about">エンプロスについてのページ内リンク</a>


<h2 id="about">エンプロスについて</h2>

aタグのhref属性にID名を記述すると、そのaタグはID名「about」に移動するリンクになります。

class属性とid属性の詳細度の違い

一つのタグに複数classが指定されていた場合どうなるでしょう。

<!-- HTML -->
<p class="red green">エンプロス</p>

/* CSS */
.green { color: green; }
.red { color: red; }

エンプロスの文字に効果があるcolorのプロパティの値は、greenとredとあり重複しています。

この場合は、後から書かれているプロパティに上書きされてしまうので、color: red;が有効になります。

CSSの基本ルールとして、後から記述した方を上書きするということを覚えておいてください。

ただし、必ず後から記述したものを上書きするわけではありません。ここに関わるのが『CSSの詳細度』になります。

例えば、この様な場合はどうなるでしょう。

<!-- HTML -->
<p id="green" class="red">エンプロス</p>

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

後から記述した方が上書きされるルールであれば、エンプロスの文字は赤にありそうですが、この場合は緑になります。

タグにclass属性とid属性が両方指定されていた場合どうなるのか疑問になることがあると思います。class属性とid属性が同時にあった場合は、CSSの記述の順番に関係なくclass属性よりid属性の方が詳細度が高いため、プロパティの値が優先されます。

セレクタの詳細度について

詳細度は下記の様に計算します。例えばCSSのセレクタがid属性の#greenの場合、1-0-0と表すことができます。class属性の.redの場合は、0-1-0になります。

1-0-0と0-1-0と比べた時、1-0-0の方が大きな桁のため、id属性の方が詳細度が高くなります。
下記が大まかに分けた詳細度の表になります。

セレクタ	詳細度の数値
id属性	1-0-0
class属性、その他属性、擬似クラス	0-1-0
要素（タグ）、擬似要素	0-0-1
全称(*)、結合子（>,+ など）、:not()	0-0-0

詳細度の説明については、奥深いのでまた別の機会で記事が出せたらと思います。

<!-- HTML -->
<p>エンプロス</p>
<p class="red">エンプロス</p>
<p class="red blue">エンプロス</p>
<p class="red blue pink">エンプロス</p>
<p id="green" class="red">エンプロス</p>

/* CSS */
#green { color: green; } /* 詳細度 1-0-0 */
.red { color: red; }     /* 詳細度 0-1-0 */
.pink { color: pink; }   /* 詳細度 0-1-0 */
p { color: purple; }     /* 詳細度 0-0-1 */
p.blue { color: blue; }  /* 詳細度 0-1-1 */

下記の内容を確認して、なぜこの結果になったか考えてみましょう。

• 一つのタグにプロパティが重複した場合は、詳細度が高いセレクタの値を上書きする
• 詳細度が同じ場合、後から記述したプロパティの値が優先される

まとめ

class属性とid属性についての簡単な説明はここまでです。実はこれらを意識して、class属性とid属性を使い分ける実践的な方法がありますが、また違う記事でお伝えできたらと思います。ひとまずは詳細度と記述順を意識して、CSSを使いこなしてくださいね。