おやじ
2015年12月28日
識別子（id属性 class属性）の説明
id属性、class属性とはなにか？
たとえば前項で説明した「ブロック構造（div）」では、ボックススタイルを決める名前を割り当てる識別子です。
HTMLの記述例
|
1 2 3 4 5 6 7 |
<div id="box-01"> </div> <div class="box-02"> </div> |
スタイルシートの記述例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
#box01{ width:100px; height:100px; padding:10px; margin:10px; border:1px solid #000000; } .box02{ width:200px; height:200px; padding:10px; margin:10px; border:1px solid #000000; } |
文字の色を変える場合は
HTML記述例
|
1 2 3 |
<p id="color01">この色は赤です</p> <p class="color02">この色は青です</p> |
スタイルシートの記述例
|
1 2 3 4 5 6 7 |
#color01{ color:#ff0000; } .color02{ color:#00ff00; } |
なんとなくお分かりいただけましたでしょうか。
id属性もclass属性もHTMLで記述したボックスや文字など、ページ書式をスタイルシートで記述する識別子です。
id属性とclass属性の違いは？
id属性は
ページ内に１個の固有の名前を割り当てます。つまり、idは同一ページ内で同じ名前は使えません。
スタイルシートでは「#名前」と記述します。
aタグを使っての「ページ内リンク」に使えます。
class属性は
classは種別名を割り当てます。同一ページ内で何回でも同じ名前を使えます。
スタイルシートでは「.名前」と記述します。
