これまでHTMLにCSSを適用させる際は、HTMLのタグに対してCSSを設定してきました。しかし、コードを書いていくにつれて、同じタグに対しても別のデザインを施したくなることがあります。そんな際に使用するのが「id」属性と「class」属性です。「id」属性と「class」属性はすべてのタグに設定することができます。使用方法はほとんど変わりませんが役割に違いがありますので、それぞれの使い方を学習していきましょう。
「id」属性
「id」属性の適用方法は以下の通りです。
<!--HTML-->
<p>IDを指定しない場合は灰色で文字を表示</p>
<p id="orange">IDを指定した部分はオレンジ色で表示する</p>/*CSS*/
p{
color:glay;
}
#orange{
color:orange;
}
HTMLのタグの中に「id=” “」という形で記入します。” “の中身は任意の名前を付けることが可能ですが、名前を付ける際には以下のようなルールがあります。
・空白（スペース）を入れない
・1文字目は必ず英字とする
・2文字目以降は英数字とハイフン「-」アンダースコア「_」で記述する
CSSではHTMLで定義した属性にプロパティを設定していきます。基本的にはタグに対してCSSを設定するのと同じ書式ですが、属性名の手前にハッシュ「#」を付けてください。
「class」属性
「class」属性の適用方法は以下の通りです。
<p>IDを指定しない場合は灰色で文字を表示</p>
<p class="blue">IDを指定した部分は青色で表示する</p>p{
color:gray;
}
.blue{
color:blue;
}
基本的な書き方は「id」属性と同じですが、CSSで属性名の手前にピリオド「.」を付けます。
「id」属性と「class」属性
ここからは、それぞれの属性の使い方について解説していきます。
それぞれの違い
ページ内でid名は一回しか使用することができないのに対し、class名は何度でも使用することが可能です。また、「class」属性は同じタグにいくつも定義することができます。
「class」属性を複数定義する
ひとつのタグの中に「id」属性や「class」属性を複数定義する場合は、名前を半角スペースで区切って表記します。
優先順位
「id」属性と「class」属性を一つのタグの中に同時に設定することもできますが、バッティングする内容については「id」属性が優先して反映されます。
まとめ
今回は「id」属性と「class」属性について解説しました。これらを活用することで、今までよりも細やかなデザインをすることが可能となります。
次回はフレックスボックスについて解説させていただきます。
コメント