お問い合わせ
お問い合わせ
ホーム > HTML > HTMLのdivタグ使い方まとめ｜ブロック要素を理解しよう

HTMLのdivタグ使い方まとめ｜ブロック要素を理解しよう

HTML
HTMLのdivタグの使い方を解説するイメージ｜ブロック要素の構造とレイアウトを表す図
HTMLのdivタグの使い方を図解｜ブロック要素の理解がレイアウトの第一歩

HTMLのレイアウトを組むときによく使われるタグのひとつが<div>タグです。
「とりあえずdivで囲めばOK」と思っている方も多いですが、実は意味のない乱用はSEO的にも、可読性の面でも良くありません。

この記事では、divタグの正しい使い方と注意点を、初心者にもわかりやすく解説します。
ブロック要素の理解を深め、HTMLの構造をきれいに組めるようになりましょう。

divタグとは？

<div>タグは 「division（区分）」 の略で、HTML内で要素をグループ化するためのタグです。
特定の意味は持たず、主にレイアウト調整やスタイル適用のために使う汎用コンテナとして利用されます。

<div>
  <p>ここはdivタグで囲まれたコンテンツです。</p>
</div>

上記のように、<div>で囲うことでその中身全体にCSSを適用しやすくなります。

divタグの特徴

特徴内容
要素の種類ブロック要素
意味特になし（意味的な役割を持たない）
主な用途レイアウト、グループ化、CSS適用
デフォルトの表示改行を伴って縦に積み重なる

ブロック要素とは？

divタグを理解するうえで重要なのが「ブロック要素」という概念です。

ブロック要素は、1行を丸ごと占有して改行が入る要素のこと。
たとえば以下のタグもブロック要素です。

<h1>見出し</h1>
<p>段落</p>
<div>ブロック</div>

これらはすべて改行されて縦に並びます。

👉 ブロック要素とインライン要素の違いを詳しく知りたい方は
➡ HTMLのセマンティックタグ徹底解説｜意味を理解して使い分けよう

divタグの基本的な使い方

1. セクションをまとめる

複数の要素をひとつのグループとしてまとめるときに使います。

<div class="article">
  <h2>記事タイトル</h2>
  <p>本文の内容がここに入ります。</p>
</div>

CSSでまとめてスタイルを指定できます。

.article {
  background-color: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
}

2. レイアウトを作る（header・main・footerなど）

意味のあるタグが導入される前は、すべてdivでレイアウトを組んでいました。
ただし現在は、HTML5のセマンティックタグを優先しましょう。

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

👉 意味のある構造を作るにはこちらを参考に
➡ HTMLセマンティックタグ徹底解説｜初心者が迷わない使い分け方

3. CSSレイアウト（FlexboxやGrid）と組み合わせる

<div>は、FlexboxやGridの「枠」として使うのが現代的な方法です。

HTML
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
CSS
.container {
  display: flex;
  gap: 10px;
}
.item {
  background: #ddd;
  padding: 10px;
}

👉 Flexboxの基礎はこちらで解説
➡ CSSレイアウトの基本｜Flexboxを使いこなそう

divタグの使いすぎに注意！

divは便利ですが、使いすぎると次のような問題が発生します。

  • HTMLが読みにくくなる（「divだらけ」状態）
  • 構造がわかりづらく、メンテナンス性が低下
  • 検索エンジンが意味を理解しにくくなる（SEO面）

意味のあるタグ（<header>・<main>・<article>・<section>など）を優先し、どうしても汎用枠が必要なときだけdivを使うのがポイントです。

divと他のHTML要素の関係

タグ名種類主な用途意味の有無
<div>ブロック要素レイアウト・グループ化なし
<span>インライン要素テキストの一部を装飾なし
<section>ブロック要素章・区切りあり
<article>ブロック要素記事・独立したコンテンツあり

👉 <span>タグとの違いも理解しておきましょう
➡ HTMLのspanタグの使い方｜テキスト装飾の基本を解説

まとめ：divタグは「構造の箱」

項目内容
タグ名<div>
意味特になし（構造をまとめるだけ）
種類ブロック要素
主な用途レイアウト・スタイル適用
注意点意味のあるタグを優先すること

divタグは「ページを構造化するための箱」です。
使いすぎず、意味のあるタグと組み合わせて使うことで、きれいでSEOにも強いHTMLを書けるようになります。

関連記事

次は、divタグと相性抜群のCSSレイアウトを学んでみましょう！
➡ CSSレイアウト完全ガイド｜FlexboxとGridで作る現代的デザイン