* div 要素型 (HTML, XHTML 1) [4] [CODE(HTMLe)[div]] 要素型は、 [CODE(HTMLa)[[[class]]]] 属性や [CODE(HTMLa)[id]] 属性と併用することで、 [[文書]]に[[構造]]を与えるための一般的な仕組みとして用意されました。 [CODE(HTMLe)[div]] は[[ブロック水準要素]]ではありますが、 それ以外に[[表現]]上の制約はありません。 [[著者]]は、[[スタイルシート]]や [CODE(HTMLa)[[[lang]]]] 属性を使って要求を満たすことができます。 [10] 仕様書: - [[HTML 4]] -- [CODE(HTMLe)[div]] -- 14.2.3 Header style information: the [CODE(HTMLe)[STYLE]] element [5] :[[XML名前空間]]:[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] :[[開始タグ]]:必須 :[[終了タグ]]:必須 :[[内容モデル]]:[CODE(SGML)[(%[[flow]];)*]] :[[属性]]: ,属性名 ,属性値 ,既定値 ,説明 ,状態,出典 ,[CODE(HTMLa)[[[align]]]] , , , ,[HTML4] [[非推奨]] ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)[[[compact]]]],,,,非標準 ,[CODE(HTMLa)[[[datafld]]]] , , ,欄名 ,[HTML4] 予約 ,[CODE(HTMLa)[[[dataformat]]]] , , ,データ書式 ,[HTML4] 予約 ,[CODE(HTMLa)[[[datasrc]]]] , , ,データ源 ,[HTML4] 予約 ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[CODE(HTMLa)[[[onclick]]]] , , , ,[HTML4] %[[events]] ,[CODE(HTMLa)[[[ondblclick]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeydown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeypress]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onkeyup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmousedown]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseout]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseover]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[onmouseup]]]] , , , ,[HTML4] %events ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr ,[CODE(XMLa)[[[xmlns]]]],[CODE(URI)[[[http://www.w3.org/1999/xhtml]]]] 固定,[[名前空間名]],W3C 勧告,[[XHTML m12n]] [13] HTML 4 の DTD の注釈は [Q[generic language/style container]] ([Q[共通言語・様式包含子]]) と説明しています。 [[#comment]] ** 応用 [[#comment]] *** レンダリング [7] HTML 4 仕様書は、視覚的[[利用者エージェント]]の通常のレンダリング例として、次のものを挙げています。 [PRE(HTML)[

aaaaaaaaa

bbbbbbbbb
ccccc

ccccc

]PRE] を表示すると、 [PRE[ aaaaaaaaa bbbbbbbbb ccccc ccccc ]PRE] つまり、 [[CSS]] で表現すると、 [PRE(CSS)[ div { display: block; } ]PRE] [8] 非推奨の [CODE(HTMLa)[align]] 属性対応の UA は、[[既定スタイル]]として [PRE(CSS)[ div[align] { text-align: [VAR[attr(align)]]; } ]PRE] を持つと考えられます。 [9] [PRE(HTML)[
]PRE] だと表は真ん中に表示されるのでしょうか。 HTML 4 はその辺にちゃんと言及していないような気がしますが。 [[#comment]] ** メモ [1] [[yuu]] は単純に [CODE(HTMLe)[div]] が嫌いなんじゃないかと思った。 [2] [[WinIE]] は、3未満が [CODE(HTMLe)[div]] 要素型に対応していません。 (タグを無視するので [CODE(CSS)[[[display]]: [[inline]]]] になります。) [3] [[NN]] は、 2 で既に対応していて [CODE(CSS)[display: [[block]]]] になります。 (1 では未確認。) (独自拡張の [CODE(HTMLa)[[[align]]]] 属性を使うと、文字揃え位置を変更できます。) [12] [[スタイル・シート]]を使うとおおよそどんな要素にもスタイルを指定できるのですが、 [[ブロック水準要素]]であることを除いては表現上の意味を持たない [CODE(HTMLe)[div]] 要素型は特に便利です。 特に [CODE(HTMLa)[[[class]]]] 属性や [CODE(HTMLa)[[[id]]]] 属性を使って、 HTML を無限に拡張できます。 [SUP[ [HTML 4] ]] [[#comment]] ** 例 [6] 次の例は、顧客データベースに基づく HTML 文書において、 HTML 4 に存在しない「顧客」という情報をマーク付けするために [CODE(HTMLe)[div]] を用いています。 [PRE(HTML)[

Client information:

Last name:Boyera
First name:Stephane
Tel:(212) 555-1212
Email:sb@foo.org

Client information:
Last name:Lafon
First name:Yves
Tel:(617) 555-1212
Email:yves@coucou.com

]PRE] [WEAK[(HTML 4 仕様書より、改)]] [11] スタイル・シートを使って表現を指定する例 [PRE(HTML)[ DIV and Style Sheet Example

The Chieftain product range is our market winner for the coming year. This report sets out how to position Chieftain against competing products.

Chieftain replaces the Commander range, which will remain on the price list until further notice.

]PRE] [WEAK[(HTML 4 仕様書より、改)]] [CODE(HTMLe)[div]] の既定レンダリングでは [CODE(CSS)[[[display]]: [[block]]]] としか決められていませんが、 [[CSS]] などを使って具体的な表現を指定できます。 この例では、[RUBYB[要約] [abstract]]の章で文字が両端で揃えるようにと指定しています。 [[#comment]] * メモ