KAWANO's PukiWiki Plus! - Lecture/JouhouC2008/9th/class_id の変更点

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

TITLE:クラスとdiv・span要素の利用
*クラスとdiv・span要素の利用 [#m1a64293]
TITLE:クラスの利用
*クラスの利用 [#m1a64293]

**div要素とspan要素の機能 [#o5ab8c3f]
''div''要素を使うと、
複数の要素をまとめてグループ化することができます。
また、クラスと組み合わせれば、オリジナルの要素（意味づけ）ができます。
div要素は、''ブロックレベル要素''なので、
ひとつのブロックを作ることができます。
#pre(novervatim){{
<h1>第1章</h1>
**クラスとは [#w75794a1]
「''クラス''」 (class) を使えば、
同じ要素（タグ）に、それぞれ異なるデザインを設定することができます。

COLOR(red):<div class="section1">
<h2>第１節</h2>
<p>...</p>
<p>...</p>
COLOR(red):</div>
たとえば、「段落」という要素（p要素）を、
「普通」の段落、
「注意」用の段落、
「ワンポイント」用の段落のように、
目的や役割別にデザインを使い分けたい場合を考えてみましょう。

COLOR(red):<div class="section2>
<h2>第２節</h2>
<p>...</p>
<p>...</p>
COLOR(red):</div>
このように、''ひとつの要素に複数のデザインを設定したい''場合に、
クラスを利用します。
-クラス名「normal」：「普通」の段落用デザイン
--文字色は「黒」、背景色は「白」
-クラス名「notice」：「注意」の段落用デザイン
--文字色は「黒」、背景色は「薄い黄色」
-クラス名「one-pt」：「ワンポイント」の段落用デザイン
--文字色は「赤」、背景色は「白」

...
}}

''span''要素を使うと、
文章中に、HTMLには用意されていない、
オリジナルの要素（意味づけ）ができます。
span要素は、''インラインレベル要素''なので、
指定した部分は改行されません。
このように、HTMLやCSSでは、
あらかじめ用意されている構成要素に、
「COLOR(red):''特定の役割''COLOR(black):」や
「COLOR(red):''意味づけ''COLOR(black):」
を追加することができます。
それが、「''クラス''」という考え方です。


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

***CSSファイルでの設定 [#rba8c62c]

クラスを設定するときには、
CSSファイルで次のように設定します。
#pre(novervatim){{
<p>
これからはCOLOR(red):<span class="note">COLOR(black):Webカメラによる授業参観COLOR(red):<span>COLOR(black):ができるかもしれません。
</p>
COLOR(blue):要素名.クラス名 COLOR(red):{ COLOR(black):... COLOR(red):}
COLOR(blue):.クラス名 COLOR(red):{ COLOR(black):... COLOR(red):}
}}

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

**div・span要素とクラスの組み合わせ [#v6c355a5]
上の例にはすでに書かれていますが、
div要素やspan要素にクラスを指定することで、
HTMLの構成要素として定義されていない（定義できない）
部分に対しても、スタイルを設定することができます。
クラス名に使える文字には、次の制限があります。
-アルファベット（大文字小文字の区別あり）
--ひと文字めはアルファベット
-数字（0〜9）
-記号（ハイフン「-」、アンダースコア「_」、コロン「:」、ピリオド「.」）

div要素にクラスを指定すれば、
複数の要素に対してまとめてスタイルを設定することができます。
span要素にクラスを指定すれば、
特定の部分にだけスタイルを設定することができます。

たとえば、上記のdiv要素とspanをを使った例に、
次のようなスタイルを指定することができます。
***HTMLファイルでの利用 [#a70e3fc1]
設定したクラスを使用するには、
HTMLファイルで次のように設定します。
#pre(novervatim){{
COLOR(blue):.section1 COLOR(red):{
  background: #ffeeee;
  color: #ff0000;
COLOR(red):<COLOR(blue):要素名 COLOR(red):class="COLOR(blue):クラス名COLOR(red):">COLOR(black):...
}}


***クラスの利用例(1) [#f2251c76]
たとえば、最初に説明した「段落」の説明では、
次のようにクラスを設定することができます。
#pre(novervatim){{
COLOR(blue):p.normal COLOR(red):{
  color: #000000;
  background: #ffffff;
COLOR(red):}
COLOR(blue):.section2 COLOR(red):{
  background: #ffeeee;
  color: #ff00ff;
COLOR(blue):p.notice COLOR(red):{
  color: #000000;
  background: #ffff66;
COLOR(red):}
COLOR(blue):.note COLOR(red):{
COLOR(blue):p.one-pt COLOR(red):{
  color: #ff0000;
  background: #ffff00;
  background: #ffffff;
COLOR(red):}
}}

HTML文書では、次のように利用することができます。
#pre(novervatim){{
COLOR(red):<COLOR(blue):p COLOR(red):class="COLOR(blue):normalCOLOR(red):">
それでは、見出しのタグについて説明しましょう。<br>
...
</p>
COLOR(red):<COLOR(blue):p COLOR(red):class="COLOR(blue):noticeCOLOR(red):">
次のことに注意しましょう。<br>
...
</p>
COLOR(red):<COLOR(blue):p COLOR(red):class="COLOR(blue):one-ptCOLOR(red):">
ワンポイント: h1〜h6の使い方
...
</p>
}}

***クラスの利用例(1) [#h9b6c77c]
また、
複数の要素で同じクラスを利用することもできます。

たとえば、特定のタグを指定しない、次のようなクラスを設定しておきます。
#pre(novervatim){{
COLOR(blue):.example COLOR(red):{
  color: #000000;
  background: #ffff66;
COLOR(red):}
}}

そしてHTML文書では、次のようにして、
h2要素とp要素に設定したクラスを利用することができます。
#pre(novervatim){{
COLOR(red):<COLOR(blue):h2 COLOR(red):class="COLOR(blue):exampleCOLOR(red):">見出しのタグの例</h2>
COLOR(red):<COLOR(blue):p COLOR(red):class="COLOR(blue):exampleCOLOR(red):">
まず、見出し１を利用してみましょう。<br>
...
</p>
}}



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