目次
DIVタグって何？
ども。Dadです。
今回はHTML用語の解説です。CSSやJavaScriptの話ではなく「HTMLの話」なので、そこだけ最初に押さえておいてくださいね。
Webページを作る時、「ここからここまでを1つのまとまりにしたい」って思うことありませんか？例えば、ヘッダー部分とか、サイドバーとか、記事の本文とか。
そんな時に活躍するのが「DIV（ディブ）タグ」です。
DIVは「Division（区分・分割）」の略で、Webページを「箱」のように区切って整理するためのHTMLタグです。言ってみれば、ページ全体を整理整頓するための「収納ボックス」みたいなものなんです。
リアルな世界で例えるなら、部屋の中に「リビングスペース」「ダイニングスペース」「作業スペース」と間仕切りを作るようなもの。それぞれの空間を明確に分けて、インテリアや照明を変えることができますよね。DIVタグも、まさにそんな役割を果たしています。
DIVタグの基本
DIVタグの特徴を整理してみましょう。
1. ブロックレベル要素
DIVタグで囲んだ部分は、自動的に前後で改行されます。つまり、縦に積み重なるイメージです。
例えば、こんな感じ。
<div>最初のボックス</div>
<div>次のボックス</div>
<div>3つ目のボックス</div>これを表示すると、3つのDIVは縦に並びます。横並びにしたい場合は、CSSで調整します（でも今回はHTMLの話なので、CSSの説明は省略）。
2. 意味を持たない「汎用的な箱」
DIVタグ自体には、「見出し」とか「段落」といった意味はありません。ただの「箱」です。
これが良いところでもあり、後で説明する「困ったこと」でもあります。
3. クラスやIDで目印をつける
DIVタグは、classやidという属性をつけて使うことがほとんどです。
<div class="header">ヘッダー部分</div>
<div class="sidebar">サイドバー部分</div>
<div id="main-content">メインコンテンツ</div>こうすることで、「このDIVはヘッダー用」「このDIVはサイドバー用」と区別でき、CSSでデザインを適用する時にも便利です。
DIVタグの使い方
実際にどんな場面でDIVタグを使うのか、具体例を見てみましょう。
レイアウトの大枠を作る
Webページ全体を「ヘッダー」「メインコンテンツ」「サイドバー」「フッター」のように大きく区切る時に使います。
<div class="container">
<div class="header">
<h1>サイト名</h1>
</div>
<div class="main">
<h2>記事タイトル</h2>
<p>記事の本文...</p>
</div>
<div class="sidebar">
<h3>関連記事</h3>
</div>
<div class="footer">
<p>© 2026 MoreGreen Lab</p>
</div>
</div>このように、DIVで大きな枠組みを作ることで、ページ全体の構造が見えやすくなります。
コンテンツをグループ化する
関連する要素をまとめて、1つの「まとまり」として扱いたい時にも使います。
<div class="product">
<h3>商品名</h3>
<p>商品の説明文</p>
<p class="price">2,000円</p>
</div>こうすることで、「この商品情報はひとかたまり」という扱いができます。複数の商品を並べる時も、同じ構造のDIVを繰り返せばOKです。
装飾用の箱として使う
「この部分全体に背景色をつけたい」「この範囲だけ枠線で囲みたい」という時にも、DIVで囲んでCSSを適用します。
<div class="info-box">
<p>重要なお知らせがここに入ります。</p>
</div>こんな感じで、DIVは「デザインを適用する範囲を決める目印」としても使われます。
DIVタグの「困ったこと」
DIVタグ、めちゃくちゃ便利なんですが、実は困ったこともあります。
DIVだらけになりがち
DIVは汎用的すぎるので、ついついなんでもDIVで囲んでしまいがちです。その結果、こんなコードになることも...
<div class="header">
<div class="logo">
<div class="logo-image">...</div>
</div>
<div class="nav">
<div class="nav-list">...</div>
</div>
</div>これを「DIV地獄」とか「DIVスープ」なんて呼ぶこともあります。コードが読みにくくなるし、「このDIV、何のためにあるんだっけ？」と混乱する原因になります。
SEOやアクセシビリティに弱い
DIVには意味がないので、Googleなどの検索エンジンが「これはヘッダーだな」「これは記事だな」と判断しにくいんです。
DIVだけだと意味構造が伝わりにくくなるため、結果として検索エンジンやスクリーンリーダー（画面の内容を音声で読み上げるソフト）にページ構造が伝わりにくくなります。
そこで登場するのが、次に紹介する「意味を持った仕切りタグ」たちです。
他の「仕切り」タグたち
DIVが「意味を持たない汎用的な箱」なのに対し、これらのタグは「意味を持った箱」として使われます。これらはHTML5で広く使われる、意味を持った要素です。
header（ヘッダー）
ページやセクションのヘッダー部分を表します。ロゴやナビゲーションメニューなどを含めることがあります。
<header>
<h1>サイト名</h1>
<nav>ナビゲーションメニュー</nav>
</header>DIVで<div class="header">とするより、<header>とする方が「ここはヘッダーです」と明確に示せます。
body（ボディ）
Webページの「見えている内容全体」を包み込む、一番大きな入れ物です。文字や画像、リンク、フォームなど、ブラウザに表示される要素は基本的にすべてこの中に入ります。
<header>
</header>
<body>
<div>
</div>
</body>
<footer>
</footer>footer（フッター）
ページやセクションのフッター部分を表します。著作権表示や連絡先などを配置します。
<footer>
<p>© 2026 MoreGreen Lab. All rights reserved.</p>
</footer>section（セクション）
文章の意味的なまとまり（セクション）を表します。見出しとセットで使われることが多いです。
<section>
<h2>第1章</h2>
<p>ここに第1章の内容が入ります。</p>
</section>DIVと違って「ここは1つの章（セクション）です」という意味があります。
article（アーティクル）
独立した記事やコンテンツを表します。ブログ記事やニュース記事などに使います。
<article>
<h2>ブログ記事のタイトル</h2>
<p>ここに記事の本文が入ります。</p>
</article>「この部分だけを取り出しても、単独で成立するコンテンツ」に使います。
aside（アサイド）
サイドバーや補足情報を表します。メインコンテンツとは別の補足的な内容を配置します。
<aside>
<h3>関連記事</h3>
<ul>
<li>記事1</li>
<li>記事2</li>
</ul>
</aside>nav（ナビゲーション）
ナビゲーションメニューを表します。サイト内のリンク集を配置します。
<nav>
<ul>
<li><a href="/">ホーム</a></li>
<li><a href="/about/">会社概要</a></li>
</ul>
</nav>main（メイン）
ページのメインコンテンツを表します。1ページに1つだけ使います。
<main>
<h1>ページタイトル</h1>
<p>メインの内容...</p>
</main>じゃあDIVは使わない方がいいの？
いいえ、そんなことはありません。
意味のあるタグが使える場面では、そちらを優先した方がいいです。でも、「純粋にレイアウトのためだけの箱」や「デザイン適用のための目印」としては、DIVを使って全く問題ありません。
例えば、こんな使い分けです。
<header>
<div class="container">
<h1>サイト名</h1>
<nav>メニュー</nav>
</div>
</header><header>で「ここはヘッダーです」と意味を示し、その中の<div class="container">で「レイアウト調整用の箱」として使う。こんな風に組み合わせるのが現代的な使い方です。
まとめ
DIVタグは、Webページを整理整頓するための「万能な箱」です。
部屋の間仕切りのように、ページを区切ってまとめる。CSSでデザインを適用する目印にする。そんな役割を果たしています。
ただし、DIVだけだと「意味が伝わりにくい」ので、header、footer、section、articleなど、意味を持ったタグと組み合わせるのが現代の主流です。
Webに興味がなかった方も、「HTMLって部屋の間仕切りみたいなものか」と思えば、少し親しみが湧いてきませんか？
最初は全部DIVでも大丈夫。慣れてきたら、少しずつ意味のあるタグに置き換えていく。そんなステップで学んでいけば、気づいた時には立派なHTML使いになっていますよ。
ではまた。
