KAWANO's PukiWiki Plus! - Lecture/JouhouC2007/12th/div

div要素によるグループ化

div要素の機能

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

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

<div class="menu">
<h2>目次</h2>
<ul>...</ul>
...>
</div>

<div class="contents">
<h2>第１章</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;
}

次へ進んでください。