グローバル属性
グローバル属性はほぼすべてのHTML要素で共通して使用できる属性の総称で、要素に追加情報を持たせたり制御性を高めたりするための仕組みです。
CSSやJavaScriptと組み合わせる際にも重要な役割を果たし、文書全体の構造と操作性を向上させます。
ここではCSSで使用する2種類を取り上げます。
id
idはHTML要素を文書内で一意に識別するための属性で、CSSやJavaScriptから特定の要素を操作したいときに重要な役割を果たします。
構文
<要素名 id="識別子">...</要素名>
idは要素の開始タグに指定し、識別子には同一ページ内で重複しない名前を付け、唯一性が常に保たれる必要があります。
目印として機能するため、スタイル設定やイベント処理など幅広い用途で使われます。
コード例
<p id="intro">この段落は特定のidを持っています。</p>出力例
この段落は特定のidを持っています。
idを付与しただけでは見た目は変わりません。
idは強力な反面、乱用すると文書構造の見通しが悪くなり管理が難しくなることがあります。
同じidを複数の要素に使うと動作が不安定になるため、厳密に一意性を保つことが重要です。
また、idは1つのタグに対して1つしか付与できないため注意が必要です。
class
classは複数の要素をカテゴリ分けしたり役割を与えたりするための属性で、スタイルをまとめて適用したいときに欠かせない機能を持っています。
構文
<要素名 class="名前">...</要素名>
同じclass名を複数の要素に指定でき、共通デザインや機能の割り当てに適しています。
class名は複数指定するときに半角スペースで区切ります。
複数のclassを並べて指定することも可能で、柔軟な分類ができます。
コード例
<p class="ab cde">複数のclassが付与された段落です。</p>出力例
複数のclassが付与された段落です。
classもidと同様に付与しただけでは見た目は変わりません。
classは便利ですが意味のない名前を増やすと管理が複雑化していきます。
後から見ても役割がわかる命名を意識するとHTML全体が扱いやすくなります。
他にもグローバル属性はあるのですが、idとclassほどの使用頻度は高くありません。
また、styleもグローバル属性ですが、非推奨な上、CSSで取り扱うためこちらでは省略しました。