 |
【中古】1冊ですべて身につくHTML＆CSSとWebデザイン入門講座 /SBクリエイティブ/Mana（単行本） 価格:747円 |
前回はリストの装飾について紹介しました。
今回はHTMLで使用するID とclassの指定方法について紹介します。
まずIDとclassとは
IDとclassとはh１タグやpタグのようなタグの中に記述できる属性の一つです。
例：<p class=main wrapper>
上記のようにタグに名前をつけてあげるとCSSでその名前と紐付けるだけで装飾することができるようになります。
書き方について
HTMLでの記述については上記で紹介した通りですがCSSで記述は下記の通りになります。
.main wrapper{ color: orange;}
このようにクラス名の前に.（ピリオド）を書くことによって名前のついたタグに装飾することができます。
HTMLのクラスの前に.（ピリオド）は必要ありません。
IDを使った書き方
書き方については上記のクラスを使った書き方と一緒になります。一つ違う部分はクラスではCSSに.（ピリオド）を使用しましたがIDでは＃（ハッシュ）を使用します。
例：HTML
<p>IDを使用しない場合は灰色でテキストを表示</p>
<p id=”color”>IDを使用した部分はオレンジでテキストを表示</p>
CSS
p{ color : gray;}
#color{color: orange;}
ID属性に色を
違うタグに同名のclassをIDを指定する場合
例：HTML
<h1 class=”color”>色がついたh１</h1>
<p class=”color”>色がついたp</p>
CSS
.color {color: blue;}
上記のように違うタグにクラス名をつけ同じ指定を行うとどちらも色が変わります。
クラス名とID名にあるルール
クラス名とID 名は自分で決めることができるためタグ名やCSSの要素より自由度が高いです。しかしその中にもルールがあります。
・名前間に空白（スペース）を入れない
・英数字と-（ハイフン）。_（アンダースコア）で記述
・1文字目は必ず英字
日本語の名前表記は可能ですがブラウザによてはエラーが発生するため避けるようにしましょう。
1つにタグにIDとclassをつける
<p id =”color” class=”size”>同じタグにつける</p>
上記のように同じタグに二つの指定を行うことは可能です。
また、IDとclassでなくIDとID、classとclassのような表記でも可能となります。
IDとclassの違い
ここまでくるとIDとclassに違いはないと感じるかもしれませんが大きな違いが３つあります。
同HTML内での使用回数
classについては同じクラス名は何度も使用することができます。しかしIDは同HTML内では同名のIDは一度しか使用することができません。（※IDが一度しか使用できないのでなく同じID名が使用できなくなる。）
優先順位
もう一つの違いは優先順位です。IDで指定した装飾はclassで指定した装飾より優先されます。そのためIDで名前をつけた要素をクラスで指定してもIDで指定していた場合反映することはありません。
速度
こちらはまだ先で使用するjavascriptを使用する際になってくるのですがclassで指定するよりIDで指定した方がjavascriptの反応が速度が早くなります。
以上がIDとclassの指定方法になります。
次回は要素を箱に見立てた場合のレイアウトの組み方について記事にします。
