KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/7th/class_id のバックアップ(No.1)

• バックアップ一覧
• 差分 を表示
• 現在との差分 を表示
• 現在との差分 - Visual を表示
• ソース を表示
• Lecture/InfoDesignB2005/7th/class_id へ行く。
  • 1 (2007-02-24 (土) 07:05:44)
  • 2 (2007-02-24 (土) 07:10:26)

クラスやIDを使った設定

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

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

クラスを使った設定

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

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

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

/pre>

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

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

/pre>

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

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

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

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

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

pre> p.note {

 color: #ff0000;
 background: #ffeeee;

} .example {

 color: #666666;
 background: #ffffff;

}

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

pre> <p class="note"> 次のことに注意しましょう。<br> ...

/p> <p class="example"> 例: h1〜h6の使い方 ...

/p> <h2 class="example"> ...

/h2>

/pre>

IDを使った設定

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

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

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

/pre>

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

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

/pre>

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

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

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

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

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

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

pre> #note1 {

 color: #ff0000;
 background: #ffeeee;

}

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

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

/p>

/pre>

次へ進んでください。