【HTML入門】divタグとは？特徴や使い方をわかりやすく解説

この記事ではHTMLのdivタグを使う方法について解説します！

divタグはサンプルコードや実際のコードでもとても良く見るタグですが、何に使われるかがよくわからないという初心者の方も多いのではないでしょうか。

今回の記事では、

について解説していきます。

HTMLのdivタグとは

divタグの「div」とは「Division」の略で、区分や部分といった意味を持ちます。divタグは単体では意味を持ちません。しかし、囲った部分をブロック要素としてまとめて扱うことができるようになるタグになります。

<h1>タグなら見出し、<p>タグなら段落、<img>タグなら画像といった要素とは違い、<div>タグ単体での意味合いがないのが特徴です。

では、divタグは実際どのように使用されるのか。次のセクションからdivタグの使い方などについて詳しく解説していきます。

HTMLのdivタグを使用する目的・使い方

divタグは単体では特別な意味を持たないHTMLタグですが、複数の要素をグループ化したり、レイアウトを構築したりする際に使用されます。特にWeb制作では、CSSやJavaScriptを適用するための「箱」として利用されることが多く、実務でも頻繁に登場します。
単体では意味合いを持たないdivタグを使用する目的は大きく2つです。

要素をグループ化する

divタグは、関連するHTML要素をまとめて管理するために使用されます。
例えば、商品の画像・商品名・価格を1つのグループとして管理したい場合は、divタグで囲むことでCSSやJavaScriptを適用しやすくなります。

<div class="product">
  <img src="product.jpg" alt="商品画像">
  <h3>商品名</h3>
  <p>価格：3,980円</p>
</div>

このようにグループ化することで、商品ごとに共通のデザインや機能を適用できます。

デザイン・レイアウトを構成する

divタグは、Webページのレイアウトを作成する際にもよく使用されます。
例えば、ヘッダー・メインコンテンツ・フッターなどを分けて管理する場合に便利です。

<div class="header">
  ヘッダー
</div>

<div class="main">
  メインコンテンツ
</div>

<div class="footer">
  フッター
</div>

各divタグにCSSを適用することで、レイアウトやデザインを自由に調整できます。

実務でよく使うdivタグの使用例

実際のWeb制作では、カード型レイアウトの作成にもdivタグがよく利用されます。

<div class="card">
  <img src="thumbnail.jpg" alt="サムネイル画像">
  <h3>記事タイトル</h3>
  <p>記事の概要文が入ります。</p>
</div>

.card {
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

このようにクラス名を付与したdivタグに対してCSSを指定することで、複数の要素へ共通のデザインを適用できます。

divタグを使う時の注意点

divタグは非常に便利なHTMLタグですが、使い方を間違えるとコードが複雑になり、保守性や可読性が低下する原因になります。特に初心者の方は、あらゆる要素をdivタグで囲んでしまいがちです。しかし、HTMLにはそれぞれ役割を持ったタグが用意されているため、適切に使い分けることが重要です。

divタグを必要以上にネストしない

ネストとは、要素の中に別の要素を入れることです。divタグを何重にも入れ子にすると、コードの構造が分かりにくくなり、修正や管理が難しくなります。

<div class="wrapper">
  <div class="container">
    <div class="content">
      <div class="text">
        記事本文
      </div>
    </div>
  </div>
</div>

このような構造は、どのdivタグが何の役割を持っているのか分かりづらくなります。

<main class="content">
  <p>記事本文</p>
</main>

不要なdivタグを減らすことで、HTMLの構造がシンプルになり、保守しやすいコードになります。

意味のあるタグがある場合はdivタグを使わない

divタグは意味を持たない汎用的なタグです。そのため、役割が明確な要素には専用のHTMLタグを使用することが推奨されています。

<div class="header">ヘッダー</div>

<div class="navigation">
  メニュー
</div>

<div class="footer">
  フッター
</div>

<header>ヘッダー</header>

<nav>
  メニュー
</nav>

<footer>
  フッター
</footer>

このようなタグは「セマンティックタグ」と呼ばれ、要素の意味を検索エンジンやブラウザへ正しく伝える役割があります。

SEOやアクセシビリティを意識する

Googleなどの検索エンジンは、HTMLの構造を解析してページ内容を理解しています。そのため、すべてをdivタグで構成するよりも、<header>、<main>、<section>、<article>、<nav>などの意味を持つタグを適切に使用した方が、コンテンツの構造を伝えやすくなります。

divタグは便利なタグですが、「意味のあるタグが存在しない場合に使用する」という考え方が大切です。HTMLの構造を整理しながら適切に活用しましょう。

HTMLのdivタグとspanタグとの違い

今回解説をしている<div>タグと同じように<span>タグも、タグ単体での意味を持ちません。

<span>タグは、<span>要素</span> というようにスタイルを適応したい要素をタグで囲んで使います。以上の点から、<div>タグと<span>タグはよく似ているので混同することが多いです。

<div>タグと<span>タグの主な違いは以下の2点です。

デフォルトの表示方法

<div>タグは通常、改行を含むブロック要素です。つまり、デフォルトでは要素が新しい行に表示されます。

一方、<span>タグはインライン要素であり、テキストの一部としてフローに組み込まれます。つまり、デフォルトでは要素は同じ行に表示されます。

スタイルとレイアウト

<div>タグはブロック要素であるため、幅や高さ、余白などのスタイルやレイアウトを変更することができます。

一方、<span>タグはインライン要素であるため、テキストの一部をスタイル付けすることが一般的です。

ブロックレベル要素とは、HTML 4.01まで存在した要素（タグ）の分類の一つで、ページ内の配置（レイアウト）上、意味のある一つのまとまりとみなされるもの。
引用：IT用語辞典 e-Words

インライン要素とは、HTML 4.01まで存在した要素（タグ）の分類の一つで、文章などの一部を構成する断片的な内容を表すもの。
引用：IT用語辞典 e-Words

HTMLのdivタグを横並びにする方法

先ほど、<div>タグはブロック要素であるため、幅や高さ、余白などのスタイルやレイアウトを変更することができると説明しました。

以下で、実際にCSSのFlexBoxという機能を利用して横並びのレイアウトを作る方法を解説します。

<div class="content">
　　<div class="content_item">りんご</div>
　　<div class="content_item">みかん</div>
　　<div class="content_item">ぶどう</div>
　　<div class="content_item">バナナ</div>
　　<div class="content_item">メロン</div>
</div>

実行結果
りんご
みかん
ぶどう
バナナ
メロン

この縦並びになっているアイテムを横並びにします。

.content {
　　display: flex;
}

実行結果
りんごみかんぶどうバナナメロン

それぞれのアイテムの親クラスであるcontentクラスにdisplay: flex; という設定を加えただけで簡単に横並びのレイアウトを作ることができました。

gapで要素同士の間隔を空ける

横並びにしただけでは、要素同士が詰まって見えることがあります。その場合は、gapプロパティを使って間隔を調整しましょう。

.content {
  display: flex;
  gap: 16px;
}

gapを指定すると、子要素同士の間隔を簡単に調整できます。余白用のmarginを個別に設定するよりも、シンプルで管理しやすい方法です。

justify-contentで横方向の配置を調整する

横並びにした要素を中央寄せにしたい場合は、justify-contentを使用します。

.content {
  display: flex;
  gap: 16px;
  justify-content: center;
}

justify-content: center;を指定すると、横並びの要素全体を中央に配置できます。

align-itemsで縦方向の位置をそろえる

横並びにした要素の高さが異なる場合は、align-itemsで縦方向の位置を調整できます。

.content {
  display: flex;
  gap: 16px;
  justify-content: center;
  align-items: center;
}

align-items: center;を指定すると、子要素を縦方向の中央にそろえられます。

実務で使いやすい横並びレイアウトの例

以下は、カード型の要素を横並びにする実用的なコード例です。

<div class="card-list">
  <div class="card">
    <h3>カード1</h3>
    <p>説明文が入ります。</p>
  </div>

  <div class="card">
    <h3>カード2</h3>
    <p>説明文が入ります。</p>
  </div>

  <div class="card">
    <h3>カード3</h3>
    <p>説明文が入ります。</p>
  </div>
</div>

.card-list {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: stretch;
}

.card {
  width: 200px;
  padding: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

このように、display: flex;に加えてgapやjustify-content、align-itemsを組み合わせることで、実務でも使いやすい横並びレイアウトを作成できます。

挫折することなくエンジニアを目指すなら

独学？スクール？

これからHTMLやCSSなどプログラミング言語の学習を始めようと考えている方、または最近学習を始めた方がいらっしゃるかと思います。

ただ、実際学習を始めるとなると

このように不安な気持ちになる方もいますよね。

たしかに、何かわからないことが出てきたとき、エラーが解決できないとき、誰かに相談できる環境がないことが理由でプログラミング言語の学習を挫折する方が多くいます。

実際にプログラミング言語初学者が挫折をする1番の理由は「不明点が発生した際に気軽に相談できる環境がない」という実態があります。

それだけ学習する環境が大事だということです。

そんな背景があるからこそ、プログラミングの勉強をする際にスクールを選ぶ方が多いのが事実です。

プログラミングスクールに通う理由は他にもあり

まとめ

divタグは囲った部分をブロック化して、デザインを一括適応できる便利なタグです。classやidを割り当てれば、cssに記述した内容を適応できます。ブロック化できるため、ページ構成を分かりやすくできるのも魅力です。

とはいえ、divタグの多用はあまり良くないとされており、適切な場面での使用が求められます。正しくdivタグを活用して、デザインを整えることが大事です。