【HTML/CSS】３分でわかるid/class属性の違い

HTML

2020.02.04

このページでは、HTML/CSSをコーディングする際に重要となるid属性とclass属性について解説します。

id属性とclass属性は、どちらもHTMLのタグに名前をつける役割を担います。class属性は、１つのページ内で1だけ利用できるのに対して、id属性は何度でも利用できるなど、両者は様々な点で役割が微妙に異なります。

このページでは、class/idの役割と意味・両者の違いと使い方を解説していきます。

このページで学べる内容

id/class属性とは・・・？
id属性とclass属性の違い
id属性とclass属性の使い分け・書き方
id属性とclass属性両方を使う例

HTML/CSS初心者でも知らないと恥ずかしい内容ばかりですので、是非最後までご覧ください。

※タグの「属性」というワードにピンとこない方はこちらからご覧ください。

id属性/class属性とは？
idとclassの違い・使い分け
1. classはクラス名/idは生徒名
サンプルコード：id/class属性の利用
1. CSSのセレクタにclassを指定する
2. CSSのセレクタにidを指定する
class属性よりもid属性が優先される
HTML/CSSを１から学びたい方は・・・

id属性/class属性とは？

id属性/class属性は、どちらもHTMLのタグに名前を付与する役割を持ちます。

class属性を用いた命名

<div class=”class name“>
・・・・・
</div>

id属性を用いた命名

<div id=”id name“>
・・・・・
</div>

上記のようにコーディングすることで、単なるdivタグを「class name」「id name」で指定できるようになります。すると、命名した部分だけにCSSを適用できるようになりデザインの幅を広げることが可能になるのです。

※HTMLの基本的な書き方・ルールについてはこちらで解説しています。

idとclassの違い・使い分け

さて、id属性とclass属性は何が異なるのでしょうか？

どちらもタグに名前を付与するという点では同一ですが、実は明確な相違点が存在します。それは、使用回数です。

どういうことか、id属性とclass属性の持つ役割をイメージ図で解説していきたいと思います。

classはクラス名/idは生徒名

学校に例えて説明すると、class属性は学級名（１年３組・・・）、id属性は生徒名（山田太郎・・・）というようになります。

１年３組（class属性）存在する生徒は複数人いるのに対して、山田太郎（id属性）は基本的に１人です。そのため、classは複数回利用でき、idは基本的に１回限りの利用ということが言えるのです。

タグに名称を付ける場合、それがそのページ内で一意の存在であればid属性を用いて命名するのに対して、ある程度大まかなまとまりとしてとらえるのであれば、class属性を用いて命名する、と理解しておきましょう。

ここからはサンプルコードを用いて解説していきます。

サンプルコード：id/class属性の利用

今回は、見出しタグにid属性/class属性を用いて名称を付与する例と、CSSの適用結果を見ていきます。

サンプルコード

<h2 class="A" id="A">classーA　　idーA</h2>
<h2 class="A" id="B">classーA　　idーB</h2>
<h2 class="B" id="B">classーB　　idーC</h2>
<h2 class="A" "B" id="B">classーA&B　　idーC</h2>

ブラウザで表示した結果

今は、CSSを何も適用していない状態です。

まずは、class「A」に対して文字色を変更する指示をしてみましょう。

CSSのセレクタにclassを指定する

セレクタにclass属性を指定する場合は、クラス名の前に「.（ドット）」を記述します。

サンプルコード

.A{
   color:#fc0303
}

サンプルコード（CSS）を適用した結果がこちら

classAを含む見出しタグがすべて赤に変更されます。同じclass属性を持つタグは例外なくことごとくその影響をうけます。

また「class―A&B」の部分

<h2 class="A" "B" id="B">classーA&B　　idーC</h2>

ように、１つのタグに複数のclass属性を指定することもできます。

CSSのセレクタにidを指定する

id名を指定する場合には、id名の前に「＃」を記述します。

先ほどのCSSのコードにidを追加してみます。

サンプルコード

.A{
   color:#fc0303
}

#A{
   color:#0352fc
}

class「A」の文字色を赤に、id「A」の文字色を青色に変更します。

すると、idで指定した青色が優先されています。

class属性よりもid属性が優先される

１つのタグにclass属性とid属性、両方の属性を指定した場合は、id属性が優先されます。

先ほど見たコードを一部抜粋して再度解説すると

<h2 class="A" id="A">classーA　　idーA</h2>

.A{
   color:#fc0303
}

#A{
   color:#0352fc
}

とした場合、文字色は「青（#0352fc）」となります。CSSの基本思想としては、idタグのように範囲が狭い属性の優先度が高くなるため覚えておくと便利です。

HTML/CSSを１から学びたい方は・・・

HTML/CSSを実践的に学びたい―。実際にコーディングをしながら学びたい―。独学に限界を感じている―。

そんな方には、無料体験/オンライン完結もあるプログラミングスクールで学ぶのがベストです。都度検索しながら知識を補完していくのではなく、１から体系立てて学ぶことで短時間・かつ効率的にスキルハックすることが可能です。

各プログラミングスクールの特徴をまとめた記事をこちらに記載しておきますので、是非ご覧ください。