HTMLタグにid属性、class属性でさらに名前をつけることで、
特定の要素をセレクタとして指定することができます。
id,class属性の値は、半角英数字で任意につけることが
できます。このことをid名、class名と言います。
id名、class名は、HTMLファイル内の要素に属性値として
指定します。
HTMLタグにid属性を指定する。
id,classの使い分けを書きます。
例えば、
<section id="news">
<section>タグに<news>というid名を付けています。
id属性は、ページ内の物につける固有名です。
ニュースサイトでの新着ニュースと表したいときに使えます。
上記の例のように、その要素が何を示しているかわかる
名前をつけましょう。適当につけると後で見返した時に
わかりません。idのルールですが、１つのHTMLファイルの中で
複数回使うことはできません。固有名として、識別できる名前を
つけましょう。
HTMLタグにclass属性を指定する。
例は以下のようにします。
<p class="kijititle">記事のタイトル</p>
<p class="nakami">本日・・・・省略</p>
p要素のclass属性を指定しています。class名をはスタイルを使用するための
目印のようなものです。さきほど説明したidとあ違い、１つのHTMLファイル内で
何度でも使用することができます。
記事のタイトルには「kijititle」記事の中身には「nakami」という名前を
付けました。記事をこれから追加したときに同じようにclass名を付すことが
できます。このような点が固有名のidとclassの使い分けができるように
なっています。
id名、class名の命名ルール
id名、class名には半角英数字とハイフン(‐)とアンダーバー(_)の２つの記号を
使うことができます。数字と記号は先頭に付けることができません。
ダメな命名例
001_kiji
-kiji
とかです。
長くなってきたので、今回はここまでにします。
次回は、CSSでid名とclass名をセレクタにします。