2025年1月30日 / 最終更新日時 : 2025年2月10日 weeds お役立ち

divタグ -ブロック要素をグループ化する｜HTML辞典

<div>タグとは？

<div>タグは、HTML文書内でブロック要素をグループ化するためのタグです。
レイアウトの構成やスタイリングの適用に使用され、CSSやJavaScriptと組み合わせることで柔軟なデザインや動的な機能を実装できます。

基本情報

コンテンツモデル

フローコンテンツ（Flow Content）、パルパブルコンテンツ（Palpable Content）
ブロックレベルの要素として扱われ、他の要素をグループ化する役割を持ちます。

閉じタグの有無

<div>は開始タグ（<div>）と閉じタグ（</div>）の両方が必要です。

基本的な記述方法

<div> を使用すると、HTML要素をグループ化し、レイアウトやデザインを適用しやすくなります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>divタグの例</title>
    <style>
        .container {
            width: 80%;
            margin: auto;
            padding: 20px;
            background-color: #f4f4f4;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>セクションタイトル</h2>
        <p>このコンテンツは <code>&lt;div&gt;</code> でグループ化されています。</p>
    </div>
</body>
</html>

ポイント：

  • <div> は汎用のブロック要素で、他の要素をグループ化できる。
  • CSSを適用することで、レイアウトの管理が容易になる。
  • HTML5では、意味を持つ <section> や <article> などのタグと使い分けることが推奨される。

使用できる主な属性

<div>タグ自体には特別な意味はありませんが、一般的なHTML要素の属性を使用できます。

属性名説明例
classCSSのクラスを適用<div class="container">...</div>
id一意の識別子を設定<div id="header">...</div>
styleインラインスタイルを適用<div style="background-color: lightgray;">...</div>
data-*カスタムデータ属性<div data-user="123">...</div>

CSSを使ったデザイン変更

<div> を適切にスタイル付けすることで、見た目を整えることができます。

✅ カスタムスタイルの適用

.container {
    width: 90%;
    margin: auto;
    padding: 20px;
    background-color: #f4f4f4;
    border: 1px solid #ddd;
    border-radius: 5px;
}
<div class="container">
    <p>このボックスはCSSでスタイリングされています。</p>
</div>

<div> の適切な使用例

✅ レイアウトの構成

複数の要素をグループ化し、レイアウトを作成するのに適しています。

<div class="wrapper">
    <div class="header">ヘッダー</div>
    <div class="content">メインコンテンツ</div>
    <div class="footer">フッター</div>
</div>

✅ JavaScriptとの連携

JavaScriptを使用して動的に要素を操作する場合にも便利です。

<div id="clickable" onclick="alert('クリックされました')">クリックしてください</div>

<div> の適切でない使用例（誤った使い方）

❌ 意味のある要素を<div>で代用するのはNG

HTML5では、<section> や <article> などの意味を持つタグを使うのが推奨されます。

<!-- NG：意味のある要素を <div> で代用 -->
<div class="header">ヘッダー</div>
<div class="content">記事本文</div>
<div class="footer">フッター</div>

✅ 正しい書き方（HTML5のセマンティックタグを使用）

<header>ヘッダー</header>
<main>記事本文</main>
<footer>フッター</footer>

❌ <div> の乱用は可読性を低下させる

<div> ばかり使うと「ディブ地獄」と呼ばれる状態になり、可読性が低下します。

<!-- NG：不要な <div> の乱用 -->
<div>
    <div>
        <p>これは <div> で囲まれています。</p>
    </div>
</div>

✅ 正しい書き方（不要な <div> を削減）

<p>これは無駄な `<div>` を削減した例です。</p>

<div> と他のタグの違い

タグ役割特徴適切な用途
<div>汎用ブロック要素意味を持たないレイアウト、CSSやJSとの組み合わせ
<section>セクションの区分まとまりのあるコンテンツ記事やトピックの区切り
<article>独立したコンテンツ記事やブログなどのまとまりブログ記事、ニュース記事
<span>汎用インライン要素ブロック要素ではないテキストの部分的な装飾

使用上の注意点

✅ レイアウトやデザインのために適切に使用する

✅ 無駄な <div> の使用を避ける

  • HTMLの可読性を保つため、必要な箇所にのみ使用する。

関連タグ

  • <section> – セクションの区分け
  • <article> – 独立した記事やニュースなど
  • <header> – ヘッダー部分
  • <footer> – フッター部分
  • <span> – インライン要素のグループ化

まとめ

<div>タグは、HTML文書内でブロック要素をグループ化するための汎用的なタグ です。
レイアウトやCSSの適用、JavaScriptとの連携に役立ちますが、意味を持たないため、適切に使い分けることが重要です。
HTML5では、構造化を意識し、意味を持つタグ（<section> や <article> など）を優先するのが推奨されます。

カテゴリー
お役立ち
お役立ち

前の記事

preタグ -整形済みテキストを表示する｜HTML辞典
2025年1月30日
お役立ち

次の記事

spanタグ インライン要素をグループ化する｜HTML辞典
2025年1月30日