divタグとは？

—

by

ai
in
日々の備忘録 > web > divタグとは？

divタグの基本

divタグは、HTMLで最も汎用的に使用される要素の一つです。文書の構造を論理的に区切るための「汎用コンテナ」として機能し、特定の意味を持たない点が特徴です。

用途と役割

divタグは、主に以下のような場面で使用されます。

  • レイアウトの区分け（ヘッダー、サイドバー、フッターなど）
  • CSSによるデザインの適用対象の指定
  • JavaScriptで操作する対象要素の指定

他の要素との違い

同様にブロック要素として振る舞うタグには、sectionやarticle、navなどがありますが、これらはそれぞれ固有の意味を持ちます。一方、divは意味を持たないため、意味的に適切な要素が存在しない場合に使用するのが推奨されます。

具体的な使用例

以下は、シンプルなページレイアウトを作成する際のHTML例です。

<div class="container">
    <div class="header">ヘッダーコンテンツ</div>
    <div class="main">
        <div class="sidebar">サイドバー</div>
        <div class="content">メインコンテンツ</div>
    </div>
    <div class="footer">フッター情報</div>
</div>

CSSと組み合わせた実装例

上記HTMLに対して、CSSでレイアウトを整える例です。

.container { width: 100%; margin: 0 auto; }
.header   { background:#f0f0f0; padding:20px; }
.main      { display:flex; }
.sidebar   { width:25%; background:#e0e0e0; }
.content   { width:75%; padding:20px; }
.footer    { background:#d0d0d0; text-align:center; padding:10px; }

ベストプラクティス

  • 意味を持つ要素（section, article, nav など）が適用できる場合は、そちらを優先する。
  • クラス名は目的が分かりやすいものを付与し、スタイルやスクリプトの対象を明確にする。
  • 過度に深い入れ子構造は避け、可読性と保守性を意識する。

まとめ

divタグは、HTML文書を柔軟に区切り、CSSやJavaScriptと連携させるための重要な基礎要素です。意味的に適切なタグが無い場合に使うことで、構造を整理しつつ、デザインやインタラクションを実装できます。

Views: 3