KAWANO's PukiWiki Plus! - Lecture/JouhouC2010/9th/div_span の変更点

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

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

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

COLOR(red):<div class="section1">
<h2>第１節</h2>
<p>...</p>
<p>...</p>
COLOR(red):</div>

COLOR(red):<div class="section2>
<h2>第２節</h2>
<p>...</p>
<p>...</p>
COLOR(red):</div>

...
}}

''span''要素を使うと、
文章中に、HTMLには用意されていない、
オリジナルの要素（意味づけ）ができます。
span要素は、''インラインレベル要素''なので、
指定した部分は改行されません。
#pre(novervatim){{
<p>
これからはCOLOR(red):<span class="note">COLOR(black):Webカメラによる授業参観COLOR(red):<span>COLOR(black):ができるかもしれません。
</p>
}}


**div・span要素とクラスの組み合わせ [#v6c355a5]
上の例にはすでに書かれていますが、
div要素やspan要素にクラスを指定することで、
HTMLの構成要素として定義されていない（定義できない）
部分に対しても、スタイルを設定することができます。

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

たとえば、上記のdiv要素とspanをを使った例に、
次のようなスタイルを指定することができます。
#pre(novervatim){{
COLOR(blue):.section1 COLOR(red):{
  background: #ffeeee;
  color: #ff0000;
COLOR(red):}
COLOR(blue):.section2 COLOR(red):{
  background: #ffeeee;
  color: #ff00ff;
COLOR(red):}
COLOR(blue):.note COLOR(red):{
  color: #ff0000;
  background: #ffff00;
COLOR(red):}
}}


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