HTML
Date.2022.1.20
４日目
id属性とclass属性
<p>要素のように多用される要素でそれぞれに違うスタイルを適用したい場合など一つの要素を使い分けたい場合、HTMLのid属性とclass属性を利用します。
どちらもHTMLのタグに名前をつける役割を持ちます。一つの要素にid属性とclass属性を同時に記述することも可能です。
- id="…"
- 一つのidはページ内で1度しか使えません。
また、一つのタグに複数のidはつけられません。
ページ内リンクのアンカーとしても使います。 - class="…"
- 一つのページ内で同じclassを何度でも使うことができます。
また、一つのタグに複数のclassをつけることができます。
スタイルを適用するとき、マークアップ上どうしても意味のないタグで区切りたい場合があります。
そのような時に使うのが<div>(ブロックレベル要素)と<span>(インライン要素)です。
この二つは「汎用タグ」と言われ、特に文法上の意味がなくても自由に使えます。
id属性とclass属性の使い分け
一見同じ「名前をつけるだけ」のように見えますが、大きな違いがあります。
詳しくはCSSのページで解説しますが、CSSの指定には「点数」という優先順位があり点数が高い方が優先され、idは+100点、classは+10点とかなり差があります。
idでスタイルを指定してしまうと、後ろに記述するclassの指定がうまく反映されないことがあります。
一つの要素にid属性とclass属性を同時に記述することも可能なので、「スタイルを適用するため」にはclass、「JavaScriptやjQueryで一つしかないはずの要素を指定」や「ページ内リンクのアンカー」にはidを使うのがおすすめです。
<div>と<span>
スタイルを適用するとき、マークアップ上どうしても意味のないタグで囲みたい場合があります。
そのような時に使うのが<div>(ブロックレベル要素)と<span>(インライン要素)です。
この二つは「汎用タグ」と言われ、特に文法上の意味がなくても自由に使えます。
ただし、他に適切な要素がある場合はそちらを使うようにしてください。