KAWANO's PukiWiki Plus! - クラスの利用

クラスの利用

クラスとは

「クラス」 (class) を使えば、 同じ要素（タグ）に、それぞれ異なるデザインを設定することができます。

たとえば、「段落」という要素（p要素）を、 「普通」の段落、 「注意」用の段落、 「ワンポイント」用の段落のように、 目的や役割別にデザインを使い分けたい場合を考えてみましょう。

このように、ひとつの要素に複数のデザインを設定したい場合に、 クラスを利用します。

• クラス名「normal」：「普通」の段落用デザイン
  • 文字色は「黒」、背景色は「白」
• クラス名「notice」：「注意」の段落用デザイン
  • 文字色は「黒」、背景色は「薄い黄色」
• クラス名「one-pt」：「ワンポイント」の段落用デザイン
  • 文字色は「赤」、背景色は「白」

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

クラスを使った設定

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

CSSファイルでの設定

クラスを設定するときには、 CSSファイルで次のように設定します。

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

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

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

• アルファベット（大文字小文字の区別あり）
  • ひと文字めはアルファベット
• 数字（0〜9）
• 記号（ハイフン「-」、アンダースコア「_」、コロン「:」、ピリオド「.」）

HTMLファイルでの利用

設定したクラスを使用するには、 HTMLファイルで次のように設定します。

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

クラスの利用例(1)

たとえば、最初に説明した「段落」の説明では、 次のようにクラスを設定することができます。

p.normal {
  color: #000000;
  background: #ffffff;
}
p.notice {
  color: #000000;
  background: #ffff66;
}
p.one-pt {
  color: #ff0000;
  background: #ffffff;
}

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

<p class="normal">
それでは、見出しのタグについて説明しましょう。<br>
...
</p>
<p class="notice">
次のことに注意しましょう。<br>
...
</p>
<p class="one-pt">
ワンポイント: h1〜h6の使い方
...
</p>

クラスの利用例(1)

また、 複数の要素で同じクラスを利用することもできます。

たとえば、特定のタグを指定しない、次のようなクラスを設定しておきます。

.example {
  color: #000000;
  background: #ffff66;
}

そしてHTML文書では、次のようにして、 h2要素とp要素に設定したクラスを利用することができます。

<h2 class="example">見出しのタグの例</h2>
<p class="example">
まず、見出し１を利用してみましょう。<br>
...
</p>

次へ進んでください。