|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |

セレクタの選択

id セレクタにするか class セレクタにするかを理解しよう

id セレクタと class セレクタとでは利用目的が違う

セレクタの指定方法には、ID 名とクラス名、という二通りの任意のスタイル名を用いることができます。

CSS では ID 名(以降 id セレクタ) もクラス名 (以降 class セレクタ) も似たような使い方であるせいか、 id と class をまったく同じ意味だと思って使用したり、面倒だからと id セレクタあるいは class セレクタのどちらか一方だけに限定して使用してしまっている場合もあります。

しかし、 id セレクタと class セレクタでは、その利用目的において大きな違いがあるので注意が必要です。

id セレクタ (要素名#id名)

Web ページ内で唯一の要素にスタイルを適用したい場合に使用します。

要素名にシャープ(#)と任意の id 名を付け、(要素名#id名) となることで識別します。

要素名は指定しなくてもかまわないが、id 名は文書 (ページ) 内で唯一の要素を指すので、同じ id 名を使って複数の要素にスタイルを適用することはできません。

たとえばページをレイアウトする際、「header (ヘッダ)」、「main (本文)」、「footer (フッタ)」 という大きなブロックに分けたときには、以下のように id セレクタを使用するのが適しています。

  • CSSソース:
    • #header { . . . . . }
    • #main { . . . . . }
    • #footer { . . . . . . }
  • XHTMLソース:
    • <div id="header"> ○○○ </div>
    • <div id="main"> ◎◎◎ </div>
    • <div id="footer"> △△△ </div>

なぜなら、これらの大きなブロックは1ページで何度も登場することはないからです。

class セレクタ (要素名.class名)

Web ページ内で複数の要素にスタイルを適用するために使用します。

要素名にドット(.)と任意の class 名を付け、(要素名.class名)となることで識別します。

また要素名は指定しなくてもかまわない。その場合は、違う要素でも同じ class 名をもっていれば同じスタイルが適用されます。

次の例は、p 要素と ul 要素の両方に同じスタイルが適用されることを示しています。

  • CSSソース:
    • .name { font-weight : bold ; }
  • XHTMLソース:
    • <p class="name">12月の予定</p>
    • <ul class="name">
      • <li>忘年会</li>
      • <li>クリスマス会</li>
    • </ul>

一つの要素に複数の class セレクタを同時に指定することもできます。その場合、class 名と class 名の間はスペースで区切ります。

次の例では、2種類の class セレクタの定義が p 要素に適用されます。

  • CSSソース:
    • .name { font-weight : bold ; }
    • .sign { text-align : right ; }
  • XHTMLソース:
    • <p class="name sign">12月の予定</p>

また、複数の class に対して同時にスタイルを定義することもできます。その場合、CSSの記述では class 間にはスペースを入れません。

  • CSSソース:
    • .name.sign { font-weight : bold ; text-align : center ; }
  • XHTMLソース:
    • <p class="names sign">12月の予定</p>

なお、Internet Explorer 6 は複数の class 指定には対応していない、との記述が見られますが、確認しておりません。

ページトップへ

まとめ

Web ページのすべてにおいて、class セレクタだけで指定してもスタイルは適用できます。しかし、id セレクタと class セレクタを適切に使い分ければスタイル設定が理解しやすくなりますし、メンテナンスもやりやすくなります。

なお、スタイル適用の優先順位を決めるにあたって、id セレクタは class セレクタよりも優先度は高くなります。

また、id セレクタは Web ページ内でアンカーとして使用できます。

用語解説のアイコン

id セレクタのアンカー指定

id 属性は HTML4 の規格から新たに登場した属性です。従来はウェブページ内の特定箇所を参照する方法は a 要素の name 属性による目的地アンカーのみに限られていましたが、id 属性は他の要素に指定してもウェブページ内の特定箇所をリンク先(終点アンカー)として参照させることが可能です。

なお、XHTML1.0 では name 属性は廃止予定とされ、id 属性を参照できないブラウザとの後方互換のために id 属性と name 属性の両方を同じ値で設定することが認められています。しかし、XHTML1.1 では完全に廃止され、XHTML1.1 以降の規格においては要素の識別に id 属性のみを使用することになります。

例えば、当ページにおいても、ページトップにある H1 タグにラベルをつけアンカーとし、ページ最下部の文字列 ”トッへ” からそこへ飛ぶようにリンクを設定しておりますが、そのマークアップは次のとおりです。

  • XHTMLソース:
    • <h1><a name="top" id="top">CSSの基本</a></h1>
    •  
    • <p class="return2top"><a href="#top">トップへ</a></p>

ページトップへ

|    | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  |