投稿日：2014年5月9日｜最終更新日: 2019年1月1日

【CSS】id属性とclass属性の違い【テクニック】

HTML・CSS

htmlのタグには、名札のような役割としてid属性とclass属性の２つを指定することができます。

class属性とid属性

CSSを記述する際、「ある要素すべて」を一括して装飾するのではなく、「ある要素のうち一部だけ」を装飾したい場合があります。

そんな時、HTML側のタグにid属性またはclass属性の2種類を使います。

CSSにclass属性を使う場合は、以下のようなソースになります。

p.aka { color: red;}

要素「p」とclass名「aka」の間に「.」を記述します。

要素名「p」は省略することもできます。

id属性を使う場合は、以下のようなソースになります。

p#aka { color: red;}

要素「p」とid名「aka」の間に「#」を記述します。

要素名「p」は省略することもできます。

class属性を使ってもid属性使ってもブラウザ上での表示効果は全く同じです。ただし、利用目的が違います。違いは以下の通りになります。

→ 同じclass名は、1ページ内(1つのhtml内)に何度でも使える。

対象の種類・部類を表します。

→ 同じid名は、1ページ内(1つのhtml内)に1度しか使えない。

対象を一意に表します。

1ページに何度も同じスタイルを使う場合はclass属性を使います。逆に、1ページに1度しか使わないスタイルのときはid属性を使います。

丁度、学級名が「class」でそこに所属する生徒の学籍番号が「id」と考えればわかり易いと思います。

HTMLの1ページ中に同じid名を複数回使ってもスタイル上は問題ありません。しかし文法上好ましくありません。

そもそもid属性とはスタイルを適用するためだけのものではなく、以下のような場合に使用します。

一意に特定できてこそid名です。HTMLのid属性に同じid名を使用するのはやめましょう。

トラックバック用のURL

プロフィール

名前：イワサキ　ユウタ職業：システムエンジニア、ウェブマスター、フロントエンドエンジニア誕生：1986年生まれ出身：静岡県特技：ウッドベース略歴 20