XHTML/CSS・トップ | CSS基礎知識・目次

●クラス名とID名について

■クラス名について

 class属性とクラスセレクタを多用すると、スタイルシートを学ぶ時にややもすると敷居が高くなると言いましょうか、理解する上で妨げになる嫌いはあります。( id属性、IDセレクタも含めて・・・)しかし、スタイルシートを極めるには欠かせない手法であるのも確かです。また、どうしても使わざるを得ないケースが出てきます。ここではなるべくわかりやすく解説してみたいと思います。

 CSSのほうはクラス名の入ったクラスセレクタとして記載し、HTML(XHTML)文書のほうでは、クラス名を属性値としたclass属性で指定します。クラスセレクタの使い方は二通りあります。

※要素・属性・属性値などの用語の意味につきましては「HTMLの要素、タグ関連の用語」をご参照ください。

 「要素名 +ピリオド + 任意のクラス名」 と 「ピリオド + 任意のクラス名」の方法があります。前者は特定の要素名に対して適用させる方法で、後者はすべての要素名にスタイルを適用させることができます。

■「要素名.クラス名」の例

【CSS】

h3.sample {
  color: #ff0000
}
h4.model {
  color: #0000ff
}

【HTML(XHTML)】

<h3 class="sample">レベル3の見出し文字が#ff0000(赤色)です。</h3>

<h4 class="model">レベル4の見出し文字が#0000ff(青色)です。</h4>

【クラス名とID名で使える文字】

 上のsample、modelがクラス名で作者が任意の名前を付けます。使える文字は半角英数字とハイフン( - )、アンダーバー( _ )などです。後述のID名も同じです。ハイフンとアンダーバーはクラス名の最初と最後に使用できないのはほかのファイル名のときと同じです。数字も先頭には使えません。XML(XHTML含む)では要素名と属性名は小文字で書く決まりがあります。classと idは属性名なのでCLASSというように大文字は使えないことになります。また、クラス名とID名はXHTML文書とCSSで対比されます。つまり、XHTMLとCSSで合わせる必要があります。XHTMLの属性値とCSSのセレクタの大文字小文字についても当サイトは小文字使用を推奨します。

※筆者が実際にあったケースで、どうしても反映されないクラスセレクタがありました。クラス名にすべて数字を使っており、先頭に数字を使っていたというわけです。数字を先頭に使ってしまうケースは意外と多いので注意したいものです。

■「.クラス名」の例

※以下の sample1〜3は本来、作者が任意の名前を付けます。

【CSS】

.sample1 {
  color: #ff0000
}
.sample2 {
  color: #0000ff
}
.sample3 {
  color: #800080
}

【HTML(XHTML)】

<h3 class="sample1">レベル3の見出し文字が#ff0000(赤色)です。</h3>

<h3 class="sample2">レベル3の見出し文字が#0000ff(青色)です。</h3>

<p class="sample3">段落の文字が#800080(紫色)です。</p>

 クラスセレクタ(およびIDセレクタ)をスタイルシートで記載する場所は、作者がわかりやすい位置に指定すると良いでしょう。CSSの書式は後(下)から指定したほうが優先的に反映されるのでそれさえ、注意していれば特に問題はありません。また、"プロパティ : 値"の部分は、セミコロン( ; )で区切り、複数指定することができます。(「CSSの基本的な書式」参照)

■ID名について

 id 属性、IDセレクタも同じように使うことができます。クラス名との違いはピリオド( . )の代わりに#を付けること、classの代わりにidを使うことです。また、IDセレクタは1枚のHTML(XHTML)文書の中でid属性を設定した要素に対して、スタイルを指定しますが、同じID名は1枚のHTML(XHTML)文書の中で一個所(一対)しか使えません。実際はクラス名と同じように複数の属性値として、ID名を使っても反映されますが、ここは素直に忠告に従いましょう。同じID名を持つ属性値を1枚のHTML文書の中で2つ以上は使わないほうが無難だと思います。(言い換えれば、ID名を指定する数だけ用意すれば幾らでも使えることになります。)

※#は、シャープ(♯)と似ていますがわが国ではナンバー記号、番号記号、または井桁と呼ばれています。

 制作者、ユーザースタイルシート(用意した場合ですが)、ブラウザがかちあったときに、条件が同じで、クラスセレクタとIDセレクタが競合したときはIDセレクタのスタイルが優先されます。

■「ID名」の例

【CSS】

#sample {
  color: #ff0000
}

【HTML(XHTML)】

<p id="sample">ここだけの文字が#ff0000(赤色)です。</p>

「クラス名とID名の使い方」サンプルがありますので、併せてご参照ください。

XHTML/CSS・目次 | 対象とクラス・目次

Copyright (C) 2004-2007 http://www.xml.vc/