*div要素によるグループ化 [#m1a64293] **div要素の機能 [#o5ab8c3f] ''div''要素は、それだけでは、 デザイン(文字の大きさや色など)や レイアウト(揃え方など)が設定されるわけではありません。 div要素を使えば、 複数の要素をまとめて、クラスを設定することで、グループ化することができます。 次の例は、Webページの内容を 「目次」「本文の内容」「フッター」の3つにグループ化した場合です。 #pre(novervatim){{ COLOR(red):<div class="menu"> <h2>目次</h2> <ul>...</ul> ...> COLOR(red):</div> COLOR(red):<div class="contents"> <h2>第1章</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) |