<div> 要素

POINT !

<div> 要素のポイント！

• 特別な意味を持たない汎用ブロック要素。
• CSSによるレイアウトやスタイリングの土台として使用する。
• 意味のある要素（section, article等）が当てはまらない場合に使用。

概要

div は Division の略で、コンテンツを論理的なまとまりに分けるために使われます。セマンティックな意味を一切持たないため、デザインを当てるための「箱」として非常に優秀です。

具体的な役割

要素をグループ化してCSSを適用したり、JavaScriptでの操作対象にしたりする際に使用します。

利用例

レイアウトの構築

フレックスボックスなどのコンテナとしてよく使われます。

Try it Copy

CSS Style

.flex-container { display: flex; gap: 10px; background: #eee; padding: 10px; }
.item { background: white; padding: 10px; border: 1px solid #ccc; }

HTML Structure

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
</div>