HTML辞書ホームへ
HTML要素 辞書 by Sentaro
<div>
ディビジョン（Division）要素。汎用的なコンテナとして、コンテンツをグループ化するために使用されるブロックレベル要素です。
info
概要
<div> 要素は、他の要素のフローティング、スタイリング（$\text{CSS}$ 適用）、またはスクリプト操作（$\text{JavaScript}$ 適用）を目的として、複数の要素をグループ化するための汎用コンテナです。
意味的な役割（セマンティクス）を持たないため、より適切なセマンティック要素（$\text{<header>}$、$\text{<nav>}$、$\text{<article>}$ など）が存在する場合は、そちらの使用が推奨されます。
play_circle
デモ (静的表示)
HTML (Source)
<div style="background-color: #f0f0f0; padding: 10px;">
<h3>グループ化されたコンテンツ</h3>
<p>これは div 要素内に含まれています。</p>
</div>
<br>
<div style="border: 2px solid #005AC1; padding: 10px;">
<p>別のスタイリングされた div。</p>
</div>
Preview (Result)
グループ化されたコンテンツ
これは div 要素内に含まれています。
別のスタイリングされた div。
list
属性 (Attributes)
| 属性名 | 説明 |
|---|---|
| class | $\text{CSS}$ や $\text{JavaScript}$ で特定の $\text{div}$ を選択し、スタイルや振る舞いを適用するために最も一般的に使用される属性です。 |
| id | ドキュメント内で一意の識別子を付与し、$\text{CSS}$ や $\text{JavaScript}$ で特定要素を操作するために使用されます。 |
| style | インラインで $\text{CSS}$ スタイルを適用するために使用されます。（通常は $\text{CSS}$ ファイルの使用が推奨されます。） |
| role | 要素のセマンティックな意味を補強するために $\text{ARIA}$ 属性と組み合わせて使用されることがあります。（例: $\text{role="tabpanel"}$） |
code
実用例
1. レイアウトのためのコンテナ
<div class="main-container">
<div class="sidebar">サイドバー</div>
<div class="content">メインコンテンツ</div>
</div>
2. JavaScriptによる動的コンテンツのグループ
<button onclick="toggleElement()">表示/非表示を切り替える</button>
<div id="hidden-section" style="display: none;">
<p>ボタンで表示されるコンテンツ</p>
</div>
3. Flexbox/Gridの親要素
<div style="display: flex; gap: 10px;">
<div>項目 1</div>
<div>項目 2</div>
<div>項目 3</div>
</div>
lightbulb
知っておくべき重要事項
info
セマンティクスを意識した使用
$\text{<div>}$ は「意味を持たない」要素です。文書のアウトラインや構造を形成する際は、$\text{<header>}$、$\text{<nav>}$、$\text{<main>}$、$\text{<article>}$、$\text{<section>}$ などのセマンティックな $\text{HTML5}$ 要素を優先的に使用してください。$\text{<div>}$ は、これらの要素で対応できない、純粋なスタイリング目的のグルーピングのために使用するのが最善です。
$\text{<div>}$ は「意味を持たない」要素です。文書のアウトラインや構造を形成する際は、$\text{<header>}$、$\text{<nav>}$、$\text{<main>}$、$\text{<article>}$、$\text{<section>}$ などのセマンティックな $\text{HTML5}$ 要素を優先的に使用してください。$\text{<div>}$ は、これらの要素で対応できない、純粋なスタイリング目的のグルーピングのために使用するのが最善です。
accessibility_new
過剰な $\text{div}$ の使用 (Div Soup) を避ける
すべてのコンテンツを $\text{<div>}$ で構成すると、コードが読みにくくなり、支援技術（スクリーンリーダーなど）による構造理解が困難になります。可能な限り、コンテンツの性質を最もよく表す $\text{HTML}$ 要素を選択しましょう。
すべてのコンテンツを $\text{<div>}$ で構成すると、コードが読みにくくなり、支援技術（スクリーンリーダーなど）による構造理解が困難になります。可能な限り、コンテンツの性質を最もよく表す $\text{HTML}$ 要素を選択しましょう。