KAWANO's PukiWiki Plus! - Lecture/JouhouC2007/12th/div の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• Lecture/JouhouC2007/12th/div へ行く。

*div要素によるグループ化 [#m1a64293]

**div要素の機能 [#o5ab8c3f]
''div''要素は、それだけでは、
デザイン（文字の大きさや色など）や
レイアウト（揃え方など）が設定されるわけではありません。

div要素を使えば、
複数の要素をまとめて、クラスを設定することで、グループ化することができます。
次の例は、Webページの内容を
「目次」「本文の内容」「フッター」の３つにグループ化した場合です。

#pre(novervatim){{
COLOR(red):<div class="menu">
<h2>目次</h2>
<ul>...</ul>
...>
COLOR(red):</div>

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

COLOR(red):<div class="footer">
<hr>
<address>.....</address>
COLOR(red):</div>

...
}}

**div要素によるオリジナル要素の設定 [#v6c355a5]
div要素とクラスと組み合わせることで、
自分だけの意味づけをしたブロックを作ることができます。
つまり、
「見出し」「段落」などHTMLにあらかじめ定義されている要素以外に、
オリジナルの要素を定義することができます。

また、div要素は、
複数の要素に対してまとめてスタイルを設定することができます。

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


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