<div> - ブロック要素
目次
概要
- 形式
<div>～</div>- サポート
- https://caniuse.com/mdn-html_elements_div
- カテゴリ
- フローコンテンツ
パルパブルコンテンツ
- 親要素
- フローコンテンツ を子要素に持てるもの、もしくは dl 要素
- 子要素
- dl の子要素の場合: 1つ以上の dt 要素とそれに続く dd 要素、および スクリプト要素
dl の子要素でない場合: フローコンテンツ
- タグの省略
- 開始タグ:必須 / 終了タグ:必須
- 属性
- グローバル属性
説明
div は DIVision(区分)の略です。文章をブロックに区分します。多くのブラウザでは、前後に改行が挿入されて表示されます。スタイルシートや JavaScript を適用する対象ブロックとしてよく利用されます。
類似の要素に <span> がありますが、<div> は代表的なブロック要素(一般的に前後に改行がはいる様な要素)として、<span> は代表的なインライン要素(一般的に前後に改行が入らない要素)として定義されています。
属性
- グローバル属性
- 詳細は グローバル属性 を参照してください。
- align=align
- [非推奨] H3-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=datafld
- [非推奨] e4-?
- データバインド機能を用いる際の、データソースの列名を指定します。
- dataformatas=format
- [非推奨] e4-?
- データバインド機能を用いる際の、データフォーマットを html または text のいずれかで指定します。
- datasrc=datasrc
- [非推奨] e4-?
- データバインド機能を用いる際の、データソースの ID を指定します。
使用例
HTML
<div style="border:1px solid gray; text-align:right; width:200px;">
右寄せ
</div>
表示
改行に <br> を用いるよりも、<div> を用いた方が意味的にすっきりすることがあります。
HTML
Copyright (C) 1996-2002 杜甫々<br>
最終更新：2002年3月21日<br>
https://www.tohoho-web.com/html/div.htm
↓
<div>Copyright (C) 1996-2002 杜甫々</div>
<div>最終更新：2002年10月2日</div>
<div>https://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">https://www.tohoho-web.com/html/div.htm</div>
リンク
Copyright (C) 1996-2017 杜甫々
初版:1996年9月10日 最終更新:2017年12月31日
https://www.tohoho-web.com/html/div.htm