ホーム >  HTML・CSS >  【CSS】id属性とclass属性の違い【テクニック】


Posted:2014/05/09 9:00:42 AM|Category : HTML・CSS

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



CSSを記述する際、「ある要素すべて」を一括して装飾するのでは

なく、「ある要素のうち一部だけ」を装飾したい場合があります。

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

ます。

class属性の例

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

HTML側

<p class=”aka”>文字列</p>

CSS側

p.aka { color: red;}

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

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

id属性の例

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

HTML側

<p id=”aka”>文字列</p>

CSS側

p#aka { color: red;}

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

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

id属性とclass属性の目的

class属性を使ってもid属性使ってもブラウザ上での表示効果は全

く同じです。ただし、利用目的が違います。違いは以下の通りに

なります。

class属性の目的:「種別名を割り当てる」

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

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

id属性の目的:「固有の名前を割り当てる」

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

 対象を一意に表す。

正しい使い分け方

1ページに何度も同じスタイルを使う場合はclass属性を使います。

逆に、1ページに1度しか使わないスタイルのときはid属性を使いま

す。

丁度、学級名が「class」でそこに所属する生徒の学籍番号が「id」

と考えればわかり易いと思います。

同じid属性を2度以上使うべからず

HTMLの1ページ中に同じid名を複数回使ってもスタイル上は問題あり

ません。しかし文法上好ましくありません。

そもそもid属性とはスタイルを適用するためだけのものではなく、以

下のような場合に使用します。

ページ内リンクを作るとき

スクリプトと連携するとき

一意に特定できてこそid名です。HTMLのid属性に同じid名を使用す

るのはやめましょう。



トラックバック用のURL
プロフィール

名前:イワサキ ユウタ 職業:システムエンジニア、ウェブマスター 誕生:1986年生まれ 出身:静岡県 特技:ウッドベース 略歴 2008年04月 金融機関系I

最近の投稿
人気記事
カテゴリー
広告