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

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

*div・span要素を使った設定 [#m1a64293]

**div要素とspan要素の機能 [#o5ab8c3f]
''div''要素を使うと、
複数の要素をまとめてグループ化することができます。
また、クラスやIDを使えば、独自の意味をつけることができます。
div要素は、''ブロックレベル要素''なので、
ひとつのブロックを作ることができます。
#pre(novervatim){{
<h1>第1章</h1>

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

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

...
</pre>
}}

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


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

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

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


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

}}