前回の続き、基本セレクター「IDセレクター」の解説です。
IDセレクター
IDセレクターとクラスセレクターは大きな違いがあるのですが、基本的な使い方は同じです。CSSの記述で違う点は、クラスは「.（ドット）」から書き始めるのに対してIDは「＃（シャープ）」から書き始めます。
◎クラスによる記述（HTMLとCSSは前回の記事を参考にしてください）
<h2 class=”title”>記事タイトル</h2>
<p>この部分に記事を書きます</p>
CSS
.title {
background-color: pink;
}
◎IDによる記述
<h2 id=”title”>記事タイトル</h2>
<p>この部分に記事を書きます</p>
CSS
#title {
background-color: pink;
}
<main> <!--記事--> <article> <h2 id="title">記事タイトル</h2> <p>この部分に記事を書きます</p> </article> <!--別テーマのセクション--> <section> <h2>別のテーマを持ったグループのタイトル</h2> <ul> <li><a href="#">テーマ1</a></li> <li><a href="#">テーマ2</a></li> </ul> </section> </main>
＜CSS＞
#title {
background-color: pink;
}
＜表示＞
クラスとIDの違い
クラスとIDの使い方はほぼ同じで違いがないように思えますが、この2つには大きな違いがあるので、理解しておきましょう。
同じHTMLファイル内で同じIDは使えない
クラスは同じページ内で複数回使うことができますが、IDはページ内で同じIDを使うことができません。そのためIDはどのページでも変わることのないレイアウトの枠組みなどに使用されます。
例）ＮＧ（同じＩＤは複数使えない）
<h1 id=”title”>クラスとIDの違い</h1>
<h2 id=”title”>同じIDは使えない</h2>
例）ＯＫ（クラスは何度でも使える）
<h1 class=”title”>記事タイトル</h1>
<h2 class=”title”>同じIDは使えない</h2>
IDにはホワイトスペース文字を含めない
クラスは半角スペースを入れることによって複数のクラス名をつけることができますが、IDは半角スペースが使えません。
例）ＮＧ（ＩＤは半角スペースが複数使えない）
<h1 id=”title big”>クラスとIDの違い</h1>
例）ＯＫ（クラスは半角スペースが使える）
<h1 class=”title big”>記事タイトル</h1>
CSSの優先順位
CSSには優先順位があります。例えば同じタグにクラスとIDで違う色を指定した場合、IDで指定した装飾が優先されます。
例）同じ<h2>タグにクラスとIDで違う色を指定してみます。
＜HTML＞4行目にクラスとID
<main> <!--記事--> <article> <h2 id="title" class="title">記事タイトル</h2> <p>この部分に記事を書きます</p> </article> <!--別テーマのセクション--> <section> <h2>別のテーマを持ったグループのタイトル</h2> <ul> <li><a href="#">テーマ1</a></li> <li><a href="#">テーマ2</a></li> </ul> </section> </main>
＜CSS＞ID「#（シャープ）」で背景色をピンクに指定。クラスで「.（ドット）」で背景色をブルーに指定。
#title {
background-color: pink;
}
.title {
background-color: blue;
}
＜表示＞
以上のようにIDで指定した方が優先され、クラスで指定した方は適用されません。従ってIDで指定しまうとクラスでは変更できないので使用の際には注意が必要です。
