HTML <div>

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

グルーピングとセクショニング
要素 説明
address 連絡先
article 独立した記事
aside コンテンツとは無関係なもの(広告等)
div 意味的ではなく視覚的な区切り
figure 図とキャプション
footer フッター
header ヘッダー
hgroup 見出し、サブタイトル及びリード文
main メインコンテンツ
nav ナビゲーション
section 意味的な区切り

書式

HTMLはタグ名、属性名及び属性値の大文字と小文字を区別しない。

<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の場合にのみ指定できる。

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

コンテンツ・モデル

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

中央寄せ

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

<div style="width: 200px; margin: 0 auto">
  The quick brown fox jumps over the lazy dog.
</div>
The quick brown fox jumps over the lazy dog.

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

<div style="width: 200px; margin-left: auto">
  The quick brown fox jumps over the lazy dog.
</div>
The quick brown fox jumps over the lazy dog.

横並び

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>
非表示

CSS

border-right
右の境界線の太さ、種類、色を指定するCSSプロパティ
<div style="border-right: medium solid gray">
  The quick brown fox jumps over the lazy dog.
</div>
The quick brown fox jumps over the lazy dog.

参考文献

Web Hypertext Application Technology Working Group (2022) "Grouping content" HTML Living Standard