div要素

説明

<div>-</div>　開始タグ:必須終了タグ:必須

div要素は、様々な目的に利用できる汎用ブロック要素です。id属性およびclass属性と併用することで、スクリプトやスタイルシートのIDやクラスと関連付けて利用することができます。自身にスタイルシートなどを併用することで、HTMLを思い通りに指定することもできます。

同様の目的でインライン要素を利用したい場合には、span要素を利用します。

属性 (W3C)

<div

H3- ie3- N2-

一般属性

id class style title lang dir %events;

align="位置" (非推奨)

H3-x1 ie3- N2-
内容の水平表示位置　

詳細

left	左揃え (初期値)
center	中央揃え
right	右揃え
justify	両端揃え (複数行テキスト)

datasrc="URI"

H4- ie4-
未調査　

参照

datafld="CDATA"

H4- ie4-
未調査

dataformatas
="(plaintext|html)"

H4- ie4-
未調査

>(%block;|%inline;)*</div>

ブラウザ独自の属性 (ie N)

cols=""	N4 未調査
gutter=""	N4 未調査
nowrap	ie4- 未調査
width=""	N4 未調査

使用例

C'est la vie! 1990 LaCroix



<div align="center" style="background:#ffe4e1">C'est la vie! 1990 LaCroix</div>

センタリング

ブラウザの「互換モード」におけるセンタリングは、一般的にcenter要素、div要素などを用いて行います。


<center>

こんにちは　こんにちは　こんにちは　こんにちは

</center>


<div align="center">

こんにちは　こんにちは　こんにちは　こんにちは

</div>

ただし、<center>-</center>、<div align="center">-</div>は、HTMLの文法上非推奨なマーク付けとなります。

ブラウザの「標準モード」におけるセンタリングは、一般的にスタイルシートを用います。ブロック要素内のインライン要素に対してはtext-align:center、ブロック要素に対してはmargin:autoを用いて行います。


<div style="text-align:center">

こんにちは　こんにちは　こんにちは　こんにちは

</div>


<table border="1" style="margin:auto">

<tbody>

<tr><td>データ</td><td>データ</td></tr>

<tr><td>データ</td><td>データ</td></tr>

</tbody>

</table>

IEの「互換モード」では、margin:autoは無視されるのでブラウザの表示モードには十分注意を払ってください。

HTMLの文法上は大間違いになりますが、非推奨なマーク付けが基本的に無視される「標準モード」において、非推奨なマーク付けを禁止するStrictなDTDの宣言を行い、center要素、div要素によるセンタリングをマーク付けした際にも、IE6、IE7、N7においてセンタリングは行われます。

*1 本来的には、HTMLのバージョンを示す<!DOCTYPE>によって、マックアップ分けすべきです。

CSS2仕様書におけるクラスセレクタやIDセレクタに関する注意事項

CSSでは、クラスセレクタやIDセレクタが非常に大きな力を持っています。従って文書作成者は、体裁にほとんどなんら関係のない要素、たとえば、HTMLにおいては、div要素やspan要素などをベースとして、それらにclass属性やid属性などでスタイル情報を与えれば、独自の構造化言語を設計することができるものと考えられます。

しかしながら、文書の構造要素は世間一般に広く受け入れられている一般的な意味合いを持ちます。文書作成者は独自の構造化言語の使用を避けなければなりません。文書作成者が定めた構造化言語では、さまざまな場面で、たとえばサーチエンジンや音声ブラウザなどにおいて、全く意味を理解してもらえない可能性があります。

div要素 汎用ブロック要素 (generic language/style container)

説明

属性 (W3C)

ブラウザ独自の属性 (ie N)

使用例

センタリング

CSS2仕様書におけるクラスセレクタやIDセレクタに関する注意事項

div要素汎用ブロック要素 (generic language/style container)