CSSのclassとid 2

class属性とid属性の役割の違い

「class」と「id」の役割と、使用上の違いを簡単に言うと、次の通りです。

■class:
「種別名を割り当てる」
→ 同じclass名を、1ページ中に何度でも使える

■id:
「固有の名前を割り当てる」
→ 同じid名は、1ページ中に1度しか使えない

class属性とid属性の使い分けは?

基本的には、「すべてのスタイルはclass属性を使って適用する」と考えておけば問題ありません。必要に応じてid属性を使うと良いでしょう。スタイルを適用する上でclass属性とid属性を併用することには、メリットもデメリットもあります。

■class属性に加えてid属性も併用する場合のメリット
id名が1ページ中に1回しか登場しないという仕様は、スタイルシートのソースを読み解く際にも役立ちます。装飾に「id」が使われていれば、「どこか一意に特定できる部分だけに限定した装飾なのだ」と簡単に把握できますから。

■class属性に加えてid属性も併用する場合のデメリット
スタイルの適用には優先順位があり、「idはclassよりも優先される」という規則があります(※次のページで紹介)。このため、idとclassが複雑に混在する大規模なソースでは、何がどう適用されるのか「優先度の判別」が難しくなってしまう場合もあります。そのため、「極力idを使わずにclassだけで記述する方が楽」という考え方もあります。

id属性を使うかどうかは、その要素を「一意に特定する必要があるか」や「一意に特定する方が分かりやすいか」を基準に判断すると良いでしょう。どちらにも当てはまらないのなら、class属性を使っておけば問題ありません。

 

【スポンサーサイト】


広告

CSSのclassとid 2」への1件のフィードバック

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中