div

1. 基本情報

説明 関連のある要素をブロックレベルでまとめる
語源 DIVision
所属モジュール Text
所属コンテントセット Block
内容 PCDATA, Flow
内容の書式 ( PCDATA | Flow )*
関連項目 span
公式な実装 DTD

2. 属性

2-1. 一般属性

属性 属性値の型 説明
Common [属性コレクション]

XHTMLの要素が大抵持っている、一般的な属性を集めたコレクションです。

2-2. 固有属性

固有属性はありません。

3. 解説

3-1. 概要

div要素は、関連のある要素をブロックレベルで意味づけします。例えば、<div class="section">でセクションをまとめたり、<div id="menu">で唯一のメニューである事を示したりします。このように、div要素は要素やデータをまとめ、意味づけしていく為の要素ですが、XHTMLにもとから存在する意味までdiv要素でやるべきではありません。例えば連絡先はaddress要素、強調はem要素のように、用意されている意味はその要素を使うべきです。CSSで見た目を指定しておくからいいや、という話ではありません。CSSを解釈しないテキストブラウザでは表示上の違いが得られませんし、音声合成ユーザーエージェントでは視覚的情報は意味を持ちません(音声の読み上げに関する指定もCSSでできる事はできますが、そんな本末転倒な事をするくらいなら元から正しい意味づけをするべきです)。

元から用意されている意味以外のものなら、div要素で自由に表現する事ができます。div要素自体は、ブロックレベル(Blockコンテントセット)という以外に表示上の変化はありませんから、CSSなどのスタイルシートを使って好きな表現をする事が可能です。例えばdiv.section { margin : 1em 3%; }でセクションの幅を狭めてみたり、div.warning { font-weight : bold; color : black; background-color : #f66; }で注意を促してみたりできます。

3-2. 使用例

先程の例(div.warning)を使って、読者に必ず読んでほしい情報を伝える例を考えます。先のような指定ではCSSが有効になるグラフィカルブラウザでしか判りませんから、その他の環境でも意味が通じるような配慮をしておくと良いでしょう。

[プログラムコード開始]

<div class="warning">
<p class="navigation">[以下警告]</p>
<p>一般常識と良識に基づいて行動して下さい。度が過ぎると判断された場合、法的な手段に訴える事もあります。</p>
<p class="navigation">[以上警告]</p>
</div>

[プログラムコード終了]

以下警告、以上警告という部分はグラフィカルブラウザには必要なさそうですから、p.navigation { display : none; }を追加しておくといいでしょう。

[div]
Published : 2006-03-26T09:00:00+09:00
Last Modified : 2006-07-26T09:00:00+09:00
Table of Contents : 要素目次
Index : 要素索引
Verified with : Valid XHTML 1.1
Copyright © 2006  E+X.