div要素によるグループ化div要素の機能div要素は、それだけでは、 デザイン(文字の大きさや色など)や レイアウト(揃え方など)が設定されるわけではありません。 div要素を使えば、 複数の要素をまとめて、クラスを設定することで、グループ化することができます。 次の例は、Webページの内容を 「目次」「本文の内容」「フッター」の3つにグループ化した場合です。 <div class="menu"> <h2>目次</h2> <ul>...</ul> ...> </div> <div class="contents"> <h2>第1章</h2> <p>...</p> <p>...</p> ... </div> <div class="footer"> <hr> <address>.....</address> </div> ... div要素によるオリジナル要素の設定div要素とクラスと組み合わせることで、 自分だけの意味づけをしたブロックを作ることができます。 つまり、 「見出し」「段落」などHTMLにあらかじめ定義されている要素以外に、 オリジナルの要素を定義することができます。 また、div要素は、 複数の要素に対してまとめてスタイルを設定することができます。 たとえば、上記のdiv要素を使った例に、 次のようなスタイルを指定することができます。 div.menu { background: #ffeeee; color: #ff0000; } div.contents { background: #ffeeee; color: #ff00ff; } div.footer { color: #ff0000; background: #ffff00; }
|