Lecture/InfoDesignB2004/8th/class_id - KAWANO's PukiWiki Plus!

クラスやIDを使った設定

たとえば、「段落」という構成要素（p要素）に、「普通の段落」用と「注意」用と「例」用というように、 ひとつの要素に複数の表現を設定したい場合には、どのようにすればいいでしょう。

HTMLやCSSでは、あらかじめ用意されている構成要素に、「特定の役割」や「意味づけ」を追加することができます。それが、「クラス」や「id」という考え方です。

「クラス」を使えば、ひとつの要素に複数の意味づけをしたり、複数の要素で同じ意味づけを設定したりできます。

クラスを設定するときには、次のようにします。

要素名.クラス名 { ... }
.クラス名 { ... }

設定したクラスを使用するときには、次のようにします。

<要素名 class="クラス名">...

「クラス」を使うと、特定の要素やその他の要素に、特定のスタイルを設定することができます。

「要素名.クラス」と指定すると、指定した要素に対してクラスを設定することができます。「.クラス」と指定すると、そのクラスを指定したすべての要素に対してスタイルを設定することができます。

クラス名に使える文字には、次の制限があります。

たとえば、次のようなクラスの設定がある場合、

p.note {
  color: #ff0000;
  background: #ffeeee;
}
.example {
  color: #666666;
  background: #ffffff;
}

HTML文書では、次のように利用することができます。

<p class="note">
次のことに注意しましょう。<br>
...
</p>
<p class="example">
例: h1〜h6の使い方
...
</p>
<h2 class="example">
...
</h2>

「ID」も、特定の役割を意味づけることができます。

IDを設定するときには、次のようにします。

要素名#ID名 { ... }
#ID名 { ... }

設定したIDを使用するときには、次のようにします。

<要素名 id="ID名">...

「ID」を使うと、特定の要素に、特定のスタイルを設定することができます。

「要素名#ID」と指定すると、指定した要素に対してクラスを設定することができます。「#ID」と指定すると、そのIDを指定したすべての要素に対してスタイルを設定することができます。

ただし、クラスはひとつのHTML文書の中で何箇所でも指定できますが、 ひとつのIDは１ヶ所にしか使えません。注意してください。

ID名に使える文字には、次の制限があります。

たとえば、次のようなクラスの設定がある場合、

#note1 {
  color: #ff0000;
  background: #ffeeee;
}

HTML文書では、次のように利用することができます。

<p id="note1">
１番目の注意は次のとおりです。<br>
...
</p>

次へ進んでください。

}}