KAWANO's PukiWiki Plus! - Lecture/InfoDesignB2005/7th/class_id の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/InfoDesignB2005/7th/class_id へ行く。

*クラスやIDを使った設定 [#m1a64293]

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

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


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

クラスを設定するときには、次のようにします。
#pre(novervatim){{
COLOR(blue):要素名.クラス名 COLOR(red):{ COLOR(black):... COLOR(red):}
COLOR(blue):.クラス名 COLOR(red):{ COLOR(black):... COLOR(red):}
</pre>
}}

設定したクラスを使用するときには、次のようにします。
#pre(novervatim){{
COLOR(red):<COLOR(blue):要素名 COLOR(red):class="COLOR(blue):クラス名COLOR(red):">COLOR(black):...
</pre>
}}

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

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

クラス名に使える文字には、次の制限があります。
-アルファベット（大文字小文字の区別あり）
--ひと文字めはアルファベット
-数字（0〜9）
-記号（ハイフン「-」、アンダースコア「_」、コロン「:」、ピリオド「.」）


たとえば、次のようなクラスの設定がある場合、
#pre(novervatim){{
COLOR(blue):p.note COLOR(red):{
  color: #ff0000;
  background: #ffeeee;
COLOR(red):}
COLOR(blue):.example COLOR(red):{
  color: #666666;
  background: #ffffff;
COLOR(red):}
</pre>
}}
HTML文書では、次のように利用することができます。
#pre(novervatim){{
COLOR(red):<COLOR(blue):p COLOR(red):class="COLOR(blue):noteCOLOR(red):">
次のことに注意しましょう。<br>
...
</p>
COLOR(red):<COLOR(blue):p COLOR(red):class="COLOR(blue):exampleCOLOR(red):">
例: h1〜h6の使い方
...
</p>
COLOR(red):<COLOR(blue):h2 COLOR(red):class="COLOR(blue):exampleCOLOR(red):">
...
</h2>
</pre>
}}

**IDを使った設定 [#n4ba5b78]
「ID」も、特定の役割を意味づけることができます。

IDを設定するときには、次のようにします。
#pre(novervatim){{
COLOR(blue):要素名#ID名 COLOR(red):{ COLOR(black):... COLOR(red):}
COLOR(blue):#ID名 COLOR(red):{ COLOR(black):... COLOR(red):}
</pre>
}}

設定したIDを使用するときには、次のようにします。
#pre(novervatim){{
COLOR(red):<COLOR(blue):要素名 COLOR(red):id="COLOR(blue):ID名COLOR(red):">COLOR(black):...
</pre>
}}

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

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

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

ID名に使える文字には、次の制限があります。
-アルファベット（大文字小文字の区別あり）
--ひと文字めはアルファベット
-数字（0〜9）
-記号（ハイフン「-」、アンダースコア「_」、コロン「:」、ピリオド「.」）


たとえば、次のようなクラスの設定がある場合、
#pre(novervatim){{
COLOR(blue):#note1 COLOR(red):{
  color: #ff0000;
  background: #ffeeee;
COLOR(red):}
</pre>
}}
HTML文書では、次のように利用することができます。
#pre(novervatim){{
COLOR(red):<COLOR(blue):p COLOR(red):id="COLOR(blue):note1COLOR(red):">
１番目の注意は次のとおりです。<br>
...
</p>
</pre>
}}



&br;
&navi2(Lecture/InfoDesignB2005/7th,next);進んでください。
----
#navi2(Lecture/InfoDesignB2005/7th,prev,toc,next)

}}