HTMLとCSSを使ったWEBサイトの実践的な作り方を紹介。

基礎15. セレクタの種類(要素セレクタ、idセレクタ、classセレクタ)

      2017/07/11   hatano

要素セレクタ(タイプセレクタ)

要素を直接指定するセレクタです。指定した要素すべてが対象となるためCSSのリセットや初期設定や16章で解説する子セレクタ、子孫セレクタで対象の絞りこみに使用します。


p{
  color: #333333;
}

idセレクタ

id属性で指定した値(名前)をセレクタで指定します。セレクタで指定する時は、名前の前に#(シャープ)を付けます。


<p id="sec">段落</p>


#sec{
	color: #333333;
}

id属性は、すべての要素で使用できます。名前は命名ルールに違反していなければ自由につけることができます。1枚のWEBページ内で同じid名は1度しか使えません。ただしページが違えば使用できます。
下記のような指定はできません。


<p id="sec">ブロック1</p>
<p id="sec">ブロック2</p>

id属性はページ内でのリンクに使用できます(アンカーリンク)下記のようにaタグのhref属性の値にid名を記述するとid属性で指定した場所までジャンプします。


<a href="#sec">id属性「sec」にリンクします</a>

別のページのid属性にリンクする場合はページ名の後にid名を記述します。


<a href="index.html#sec">id属性「sec」にリンクします</a>

classセレクタ

class属性で指定した値(名前)をセレクタで指定します。セレクタで指定する時は、名前の前に . (ピリオド)を付けます。


<p class="sec">段落</p>


.sec{
  color: #333333;
}

class属性は、すべての要素で使用できます。class名は、命名ルールに違反していなければ自由につけることができます。HTML内で同じclass名を何度も使用できます。下記のように記述すると特定のp要素だけCSSを適用できます。


<p class="sec">段落</p>
<p>段落</p>
<p class="sec">段落</p>

class属性は、半角スペースで区切ると複数の値を指定することができます。下記は「sec」と「block」という値を指定した場合です。


<p class="sec block">段落</p>

idセレクタとclassセレクタの比較

id属性とclass属性の違いは下記のようになります。

  id属性 class属性
HTML内に同じ名前の指定 -
サイト内リンクのアンカーに使用 -
複数の値の指定 -

idセレクタとclassセレクタを組み合わせる

idセレクタとclassセレクタは同時に指定できます。またidセレクタとclassセレクタが同じ値でも指定できます。ただし指定が分かりづらくなるので目的(アンカーリンク、CSSとの紐付け)を明確にして使い分けましょう。


<!-- idセレクタとclassセレクタを同時に指定 -->
<div id="sec" class="sec01">セクション</div>

<!-- idセレクタとclassセレクタの値が同じ -->
<div id="sec" class="sec">セクション</div>

まとめ

  • 要素セレクタは要素を指定できる
  • idセレクタ、classセレクタは名前を付けて指定できる
  • idセレクタはページ内で同じ名前は使えない
  • classセレクタは同じ名前をいくつも指定できる
  • idセレクタはページ内リンクの指定に使える