<div> - ブロック要素

トップ > HTMLリファレンス > <div>

概要

項目説明
形式<div>~</div>
サポートH3 / e3 / Ch1 / Fx1 / Sa1 / Op1 / N2 / i1
カテゴリフローコンテンツ, パルパブルコンテンツ
親要素フローコンテンツ を子要素に持てるもの
子要素フローコンテンツ
タグの省略開始タグ:必須 / 終了タグ:必須

説明

<div> は特に意味は持ちませんが、汎用的なブロック要素として、スタイルシートを適用したり、JavaScfript で操作するのによく用いられます。

同様なタグに <span> がありますが、<div> はブロック要素(一般的に前後に改行がはいる様な要素)として、<span> はインライン要素(一般的に前後に改行が入らない要素)として定義されています。

属性

【固有属性】
属性意味
align=alignH3-H4T/e3/Ch/Fx/Sa/Op/N2/i1。表示位置を指定します。HTML5 では廃止されました。代わりにスタイルシートの text-align を使用してください。
  center:中央表示(H3/e3/Ch/Fx/Sa/Op/N2/i1)
  left:左寄せ(H3/e3/Ch/Fx/Sa/Op/N2/i1)(既定値)
  right:右寄せ(H3/e3/Ch/Fx/Sa/Op/N2/i1)
  justify:両端揃え(H3/e6)
【データバインド関連属性】
属性意味
datafld=dataflde4-?。データバインド機能を用いる際の、データソースの列名を指定します。
dataformatas=formate4-?。データバインド機能を用いる際の、データフォーマットを html または text のいずれかで指定します。
datasrc=datasrce4-?。データバインド機能を用いる際の、データソースの ID を指定します。
【一般属性】
属性意味
accesskey=keyH4/e4/Ch2/Fx2/Sa3/Op12/N6/i1。アクセスキーを指定します。
class=classH4/e3/Ch1/Fx1/Sa1/Op1/N4。クラスを指定します。
contenteditable=boolH5/e55/Ch11/Fx3/Op10.6/Sa3.2。要素を編集可能にします。
dir=dirH4/e5/Ch5/Fx4/Sa6/Op25/N6。文字の表示方向を指定します。
hiddenH5/e/Ch/Fx/Sa/Op。要素を非表示にします。
id=idH4/e3/Ch/Fx/Sa/Op/N4。ID を指定します。
lang=langH4/e4/Ch/Fx/Sa/Op/N6。言語を指定します。
spellcheck=boolH5。スペルをチェックします。
style=styleH4/e3/Ch/Fx/Sa/Op/N4。スタイルシートを指定します。
tabindex=nH4/e4/Ch/Fx/Sa/Op/N6。タブインデックスを指定します。
title=titleH2/e2/Ch/Fx/Sa/Op/N6。タイトルを指定します。
translate=titleH5。翻訳可否を指定します。

使用例

HTML
<div style="border:1px solid gray; text-align:right; width:200px;">
 右寄せ
</div>
表示
右寄せ

改行と<div>

改行に <br> を用いるよりも、<div> を用いた方が意味的にすっきりすることがあります。

HTML
Copyright (C) 1996-2002 杜甫々<br>
最終更新:2002年3月21日<br>
http://www.tohoho-web.com/html/div.htm
   ↓
<div>Copyright (C) 1996-2002 杜甫々</div>
<div>最終更新:2002年10月2日</div>
<div>http://www.tohoho-web.com/html/div.htm</div>
   ↓
<div class="copyright">Copyright (C) 1996-2002 杜甫々</div>
<div class="lastmodified">最終更新:2002年10月2日</div>
<div class="url">http://www.tohoho-web.com/html/div.htm</div>

関連項目

<span><style>

Copyright (C) 1996-2011 杜甫々
初版:1996年9月10日 最終更新:2015年1月24日
http://www.tohoho-web.com/html/div.htm