HTML <div>

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

書式

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要素の内容にはフローコンテンツを含めることができる。具体的には次の要素である。

• テキスト
• <a>
• <abbr>
• <address>
• <aside>
• <audio>
• <b>
• <bdo>
• <bdi>
• <blockquote>
• <br>
• <button>
• <canvas>
• <cite>
• <code>
• <data>
• <datalist>
• <del>
• <details>
• <dfn>
• <div>
• <dl>
• <em>
• <embed>
• <fieldset>
• <figure>
• <footer>
• <form>
• <h1>
• <header>
• <hgroup>
• <hr>
• <i>
• <iframe>
• <img>
• <input>
• <ins>
• <kbd>
• <label>
• <main>
• <map>
• <mark>
• <math>
• <menu>
• <meter>
• <nav>
• <noscript>
• <object>
• <ol>
• <output>
• <p>
• <picture>
• <pre>
• <progress>
• <q>
• <ruby>
• <s>
• <samp>
• <script>
• <section>
• <select>
• <small>
• <span>
• <strong>
• <sub>
• <sup>
• <svg>
• <table>
• <template>
• <textarea>
• <time>
• <ul>
• <var>
• <video>
• <wbr>

中央寄せ

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

• 幅を指定する
• 左右のマージンを自動にする

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

右寄せ

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

• 幅を指定する
• 左のマージンを自動にする

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

非表示

非表示にしたうえで余白も残さない場合は、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