HTML DIV要素(タグ)

HTMLタグ <div> は、それ自体には何の意味も効果もありません。 開始タグと終了タグに挟まれたテキストやHTML要素に任意の属性を指定したいときに指定します。<span> タグと異なり、ブロック要素となります。

書式

<div>
  <!-- flow content -->
</div>

属性

class
CSSのクラスを指定する。空白で区切って、複数のクラスを指定することができる。
<div class="container>
  <!-- flow content -->
</div>
dir
文章の流れる方向を指定する。
id
一意な識別子
lang
言語と地域を指定する。
ondblclick
ダブルクリックされたときに実行するJavaScriptを指定する。
onclick
クリックされたときに実行するJavaScriptを指定する。
onkeydown
キーを押したときに実行するJavaScriptを指定する。
onkeypress
キーを押して離したときに実行するJavaScriptを指定する。
onkeyup
キーを離したときに実行するJavaScriptを指定する。
onmousedown
マウスのボタンが押下されたときに実行するJavaScriptを指定する。
onmousemove
マウスポインタを要素内で動かしたときに実行するJavaScriptを指定する。
onmouseout
マウスポインタを要素内から要素外に動かしたときに実行するJavaScriptを指定する。
onmouseover
要素の上にマウスカーソルを乗せたときに実行するJavaScriptを指定する。
onmouseup
マウスのボタンが離されたときに実行するJavaScriptを指定する。
style
CSSのプロパティを指定する。セミコロンで区切って、複数のプロパティを指定することができる。
title
タイトルを記述する。
xml:lang
言語を指定する。XHTMLの場合にのみ指定できる。

属性は全て省略可能です。

内容

article要素の内容にはフローコンテンツを含めることができる。具体的には次の要素である。

中央寄せ

div要素を中央寄せにするには、次のようにする。

<div style="width: 100px; margin: 0 auto;">
中央寄せ
</div>
中央寄せ

div要素を右寄せにするには、次のようにする。

<div style="width: 100px; margin-left: auto;">
右寄せ
</div>
右寄せ

横並び

div要素を横並びにするには、次のようにする。

<div style="width: 100px; float: left;">#1</div>
<div style="width: 100px; float: left;">#2</div>
<div style="width: 100px; clear: both;">#3</div>
#1
#2
#3

非表示

非表示にしたうえで余白も残さない場合は、displayをnoneにする。

<div style="display: none;">
非表示
</div>
非表示

非表示にしたうえで余白を残す場合は、visibilityをhiddenにする。

<div style="visibility: hidden;">
  非表示
</div>
非表示

HTMLタグ