* 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)@en[[[anticache]]]] , , , ,非標準 ,[CODE(HTMLa)@en[[[apply]]]] , , , ,非標準 ,[CODE(HTMLa)[[[class]]]] , , ,[[級]] ,[HTML4] %[[coreattr]] ,[CODE(HTMLa)@en[[[bv:ca]]]] , , , ,''非''標準 ,[CODE(HTMLa)@en[[[bv:cat]]]] , , , ,''非''標準 ,[CODE(HTMLa)@en[[[bv:closebox]]]] ,[CODE(HTML example)[[[1]]]] , , ,''非''標準 ,[CODE(HTMLa)@en[[[bv:closeboxtooltip]]]] ,[CODE(SGML)[%[[Text]];]] , , ,''非''標準 ,[CODE(HTMLa)@en[[[uicontact:cid]]]] , , , ,''非''標準 ,[CODE(HTMLa)@en[[[bv:cns]]]] , , , ,''非''標準 ,[CODE(HTMLa)@en[[[bv:commentcount]]]] ,[CODE(SGML)@en[[[NUMBER]]]] , , ,''非''標準 ,[CODE(HTMLa)[[[compact]]]] , , , ,非標準 ,[CODE(HTMLa)@en[[[uicontact:contactsize]]]] , , , ,''非''標準 ,[CODE(HTMLa)@en[[[containernodeclass]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)[[[datafld]]]] , , ,欄名 ,[HTML4] 予約 ,[CODE(HTMLa)[[[dataformat]]]] , , ,データ書式 ,[HTML4] 予約 ,[CODE(HTMLa)[[[datasrc]]]] , , ,データ源 ,[HTML4] 予約 ,[CODE(HTMLa)[[[dir]]]] , , ,[[書字方向]] ,[HTML4] %[[i18n]] ,[CODE(HTMLa)@en[[[dojoattachevent]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[dojoattachpoint]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[dojotype]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)[[[id]]]] , , ,一意識別子 ,[HTML4] %coreattr ,[CODE(HTMLa)@en[[[label]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[labelclass]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[labelnodeclass]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)[[[lang]]]] , , ,[[自然言語]] ,[HTML4] %i18n ,[CODE(HTMLa)[[[xml]]:lang]] , , ,自然言語 ,[XHTML1] ,[CODE(HTMLa)@en[[[bv:lastcns]]]] , , , ,''非''標準 ,[CODE(HTMLa)@en[[[layoutalign]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[listeners]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[metype]]]] , , , ,非標準 ,[[Windows Live Spaces]] ,[CODE(HTMLa)@en[[[movable]]]] ,[CODE(example)@en[[[True]]]] , , ,非標準 ,[[Windows Live Spaces]] ,[CODE(HTMLa)@en[[[multiinstance]]]] ,[CODE(example)@en[[[False]]]] , , ,非標準 ,[[Windows Live Spaces]] ,[CODE(HTMLa)@en[[[name]]]] , , , ,非標準 ,[[Windows Live Spaces]] ,[CODE(HTMLa)@en[[[bv:nexttooltip]]]] ,[CODE(SGML)@en[%[[Text]];]] , , ,''非''標準 ,[CODE(HTMLa)@en[[[nodedoctype]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[nowrap]]]] , , , ,非標準 ,[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)@en[[[orientation]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[orientationpreference]]]] , , , ,非標準 ,[[Windows Live Spaces]] ,[CODE(HTMLa)@en[[[placement]]]] ,[CODE(example)@en[MustBeFirst]] , , ,非標準 ,[[Windows Live Spaces]] ,[CODE(HTMLa)@en[[[bv:prevtooltip]]]] ,[CODE(SGML)@en[%[[Text]];]] , , ,''非''標準 ,[CODE(XMLa)[[QN[v:[[shape]]] [[[urn:schemas-microsoft-com:vml]]]]]] , , ,[[VML]] 形状 , ,[CODE(HTMLa)@en[[[sizemin]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[sizeshare]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[spellcheck]]]] , , , ,非標準 ,[[Firefox 2]] ,[CODE(HTMLa)@en[[[src]]]] , , , ,非標準 ,[CODE(HTMLa)[[[style]]]] , , ,スタイル情報 ,[HTML4] %coreattr ,[CODE(HTMLa)@en[[[templatecsspath]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)[[[title]]]] , , ,注釈的題 ,[HTML4] %coreattr ,[CODE(HTMLa)@en[[[toggle]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[toggleduration]]]] , , , ,非標準 ,[[Dojo]] ,[CODE(HTMLa)@en[[[valign]]]] ,[CODE(HTML example)@en[[[top]]]] , , ,''非''標準 ,[CODE(HTMLa)@en[[[width]]]] , , , ,非標準 ,[CODE(HTMLa)@en[[[wraptag]]]] , , , ,非標準 ,[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]] ** 歴史 [14] 1995年1月、[[章節]]のような見出し付き区分構造のために [[Dave Raggett]] が [CODE(HTMLe)[[[h[VAR[n]]]]]] および本体の親となる [CODE(HTMLe)[[[div[VAR[n]]]]]] を提案したのに対して、 [[Joe English]] は面倒が無いように [CODE[[VAR[n]]]] を取って [CODE(HTMLe)[[[div]]]] とすることを提案しました。更に[[内容モデル]]も見出し無し, 非[Q[階層的]]構造も扱えるように [CODE(HTMLe)[[[h[VAR[n]]]]]] を必須でない方が良いとしました。 [SRC[JOE]] [16] 1995年2月9日、 [[HTML 3.0]] [[DTD]] 案に [CODE(HTMLe)[[[div]]]] が追加されました。 [SRC[HTML3 DTD 3/24]] 3月24日版 [[DTD]] 案では次のように宣言されていました。 [PRE(SGML code)[ [CODE(comment)[]] ]PRE] また、最初 [WEAK[(で最後)]] の [[HTML 3.0]] 仕様書案 [SRC[HTML 3.0 I-D]] にも > The DIV element is used with the CLASS attribute to represent different kinds of containers, e.g. chapter, section, abstract, or appendix. と同じ説明があります。 [17] 1996年1月には、 [[HTML 3]] [[スタイル・シート]]・モジュールの [[WD]] に [CODE(HTMLe)[[[div]]]] が追加されました。 [SRC[HTML3 Style WD2]] こんな風に説明されています。 > HTML lacks an element that can group paragraphs, headers, etc. into a chapter, a section, an abstract, etc. The DIV element is added to deal with this situation. It can enclose elements so that they can be given a distinctive style as a group. [18] 1996年9月には [[HTML 3.2]] の [[WD]] [SRC[HTML 3.2 WD]] が発表されましたが、ここでは > DIV elements can be used to structure HTML documents as a hierarchy of divisions. と説明されています。また、 [[HTML 3.2]] は [CODE(HTMLe)[[[center]]]] も取り入れていますが、以前の [[ietf-html]] での議論の通り [CODE(HTMLe)[[[div]]]] で [CODE(HTMLa)[[[align]]]] が [CODE(HTML)[[[center]]]] と指定することの省略形が [CODE(HTMLe)[[[center]]]] であるとされました。 その後1997年1月に [[HTML 3.2]] は[[勧告]]となりました。 [19] '''ISO-HTML''': ところで [[HTML 3]] とほぼ同時期に進行していた [[ISO-HTML]] では、紆余曲折を経て [CODE(HTMLe)[[[div]]]] (規定) と [CODE(HTMLe)[[[div[VAR[n]]]]]] (参考) が用意されています。 [CODE(HTMLe)[[[div]]]] は [[HTML 3]] の [CODE(HTMLe)[[[div]]]] に由来するもので、 [CODE(HTMLe)[[[div[VAR[n]]]]]] は [[ISO-HTML]] の当初の案の [CODE(HTMLe)[[[b[VAR[n]]]]]] に由来するものです。 [[HTML 3]] の [CODE(HTMLe)[[[div]]]] の誕生のきっかけとなった [CODE(SGMLe)[[[div[VAR[n]]]]]] (>>14) とは異なり、見出し ([CODE(HTMLe)[[[h[VAR[n]]]]]]) ''以外''の部分が [CODE(HTMLe)[[[b[VAR[n]]]]]] になります。 ([CODE(math)[旧 [CODE(SGMLe)[[[div[VAR[n]]]]]] = [CODE(HTMLe)[[[h[VAR[n]]]]]] + [CODE(HTMLe)[[[b[VAR[n]]]]]]]]) [[HTML 4]] [[厳密DTD]] の影響から、 [[ISO-HTML]] の最終版では [CODE(HTMLe)[[[div]]]] が [CODE(SGML)[%[[flow]]]] 相当、 [CODE(HTMLe)[[[div[VAR[n]]]]]] が [CODE(SGML)[%[[block]]]] 相当の[[内容モデル]]になっています。 [20] '''HTML 4''': 1997年に [[W3C]] は亡き [[HTML 3.0]] 以来の [[HTML 3]] モジュール群と [[HTML 3.2]] を引き継ぐ [[HTML 4]] を発表しました。その中で [CODE(HTMLe)[[[div]]]] は、[Q[offer a generic mechanism for adding structure to documents]] と紹介されています [SRC[HTML 4.0 WD1]]。 以前の[Q[見出しや段落などをまとめて章節に]] という意味より拡大していることに注意して下さい。 ここに [CODE(HTMLe)[[[div]]]] は [CODE(HTMLe)[[[span]]]] と合わせて [[HTML]] の語彙の拡張の手段という意味が与えられたのです。 まあ実世界 (>>21) に幾分譲歩したと取れなくもありません。 [WEAK[なお、当初 [CODE(HTMLe)[[[div]]]] の[[内容モデル]]は [CODE(SGML)[%block]] とされています [SRC[HTML 4.0 WD1]] が、当時の [[HTML]] の [[DTD]] で [CODE(SGML)[%block]] は現在の [CODE(SGML)[%[[flow]]]] に当たるものでした。]] 実例として、次のようなものが示されています [SRC[HTML 4.0 WD1]]。 [PRE(HTML example code)[
Last name: Boyera, First name: Stephane Telephone: (212) 555-1212 Email: sb@foo.org
]PRE] ちなみに、これは次の版で[Q[改良]]されています [SRC[HTML 4.0 WD2]]。 [PRE(HTML example code)[
Last name: Boyera, First name: Stephane, Tel: (212) 555-1212, Email: sb@foo.org:,
]PRE] 更に次の版で表になりました [SRC[HTML 4.0 PR]]。 [PRE(HTML example code)[

Client information:

Last name:Boyera
First name:Stephane
Tel:(212) 555-1212
Email:sb@foo.org
]PRE] 反動(謎)で本来の semantics の方向に戻ったようにも見えます[AA[:)]] [22] 誕生の経緯や [[HTML 3]] 当時の semantics を鑑みれば、 [CODE(HTMLe)[[[div]]]] の[[内容モデル]]は [[HTML 4]] [[厳密DTD]] においては [CODE(HTMLe)[[[body]]]] や [CODE(HTMLe)[[[blockquote]]]] と同様に [CODE(SGML)[%[[block]]]] にするべきでした。 実際 [[DTD]] が複数化された1997年9月の原案 [SRC[HTML 4.0 WD2]] と11月の勧告案 [SRC[HTML 4.0 PR]] では [CODE(SGML)[%[[block]]]] とされましたが、12月の勧告 [SRC[HTML 4.0 REC1]] では [CODE(SGML)[%[[flow]]]] に戻されてしまいました。 [21] '''実世界''': [[HTML]] の仕様策定に興味がない人の多くは、まずはじめに [[Netscape Navigator]] に実装された [CODE(HTMLe)[[[center]]]] を知り、次に [CODE(HTMLe)[[[div]]]] と [CODE(HTMLa)[[[align]]]] を知りました。 [[CSS]] が実装されるのはまだ先の話で、 1995年〜1996年頃の多くの人達にとって [CODE(HTMLe)[[[div]]]] は文章を右寄せにするための[[タグ]]でしかありませんでした。 その後 [[WinIE 3]] と [[NC4]] に [[CSS]] が実装されると、 [CODE(HTMLe)[[[div]]]] は[RUBY[[[層]]] [[[レイヤー]]]]などと称して [[HTML文書]]の任意の一部分を表示領域の好きな場所に配置したり、 [[背景色]]を指定したり、その他 [[CSS]] によって表示効果を与えるための[[タグ]]とみなされるようになりました。 このような所謂 [[[CODE(HTMLe)[div]]厨]]的レイアウト手法は、 かつて (1990年代後半) は単独あるいは [[[CODE(HTMLe)[table]] layout]] と併用して[[フレーム]]の代替として、その後 (2000年代前半) は [[[CODE(HTMLe)[table]] layout]] の代替として、 批判を浴びた旧時代の[Q[レイアウト手法]]を[Q[[[エミュレート]]]]するために使われています。 [22] [[CSS]] の実装が進むにつれて旧来の [[HTML]] による[[レンダリング]]の指定は徐々に使われなくなり、 代わりに [CODE(HTMLe)[[[div]]]] が使われるようになりました。 しかし [CODE(HTMLe)[[[div]]]] の濫用と[[見出し]] ([CODE(HTMLe)[[[h[VAR[n]]]]]]) や[[段落]] ([CODE(HTMLe)[[[p]]]]) などの本来 [[HTML]] が持つ意味的要素型の不使用は [[HTML文書]]の[[アクセス可能性]]や[[利用可能性]]を著しく低下させ、 批判の対象となりました。 - [JOE] [CITE[html-wg-95q1: Re: HTML Scalability]] - [HTML3 DTD 3/24] 1995年3月24日版 [[HTML 3.0]] [[DTD]] 案 - [HTML 3.0 I-D] [CITE[Divisions]] - [HTML3 Style WD2] [CITE[HTML3 and Style Sheets]] - [HTML 3.2 WD] [CITE[HTML 3.2 Reference Specification]] - [HTML 4.0 WD1] [CITE[The global structure of an HTML document]] - [HTML 4.0 WD2] [CITE[The global structure of an HTML document]] - [HTML 4.0 PR] [CITE[The global structure of an HTML document]] - [HTML 4.0 REC1] [CITE[The global structure of an HTML document]] [[#comment]] ** 不思議解釈 [23] > 「div」に囲まれた部分は「ボックス」の意味を持ち、 前後に改行が入ります。一般的には「div」を優先して使用します。 「span」に囲まれた部分には前後に改行が入りませんので、 「テキストのカラー変更」などに使用します。 出典: [CITE[divとspan、idとclass/アオゾラウェブデザイン[Aozora Web Design][CSS/スタイルシート/style sheets]]] (2005年4月現在) [CODE(HTMLe)[[[div]]]] と [CODE(HTMLe)[[[span]]]] では [CODE(HTMLe)[[[div]]]] が[Q[一般的]]なのだそうな。 比べられるようなものでもなかろうに。 [24] '''[CODE(HTMLe)@en[div]] と文書構造''': [Q[[CODE(HTMLe)@en[div]] は文書構造に影響しない]] と言っている人がいますが、そんなはずはありません。 [CODE(HTMLe)@en[div]] そのものが文書構造の1つの単位です。 [WEAK[(本当に影響しないというのなら存在意義自体が否定されてしまいます。)]] ([[名無しさん]] [sage]) [[#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] ]] [25] [CITE[Markup Maker - Takes a simple list of page ids that you enter and converts it to a valid XHTML document | Developer Tools | Accessify]] ([[名無しさん]] [WEAK[2006-09-30 23:49:08 +00:00]]) [26] [CITE[div要素直下にインライン要素:メモランダム]] ([CODE[2007-07-09 20:54:42 +09:00]] 版) ([[名無しさん]]) [27] [CITE[Re: div 要素はなぜ「div」という名前を与えられたのか (agenda)]] ([TIME[2007-12-18 20:32:38 +09:00]] 版) ([[名無しさん]]) [[#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]] * [CODE(SGMLe)[div]] 要素型 (SGML) [15] [DFN[[CODE(SGMLe)[div]]]] は、[[章節]]のような構造を表す[[共通識別子]]として色々な [[SGML応用]] (例えば [[TEI]]) で使われています。 [[#comment]] * メモ [28] [CITE[SMIL 3.0 smilText]] ([TIME[2008-12-02 00:45:09 +09:00]] 版)