【徹底考察】divタグとは【今更聞けない】
こんにちはNNCの中里です。
本日はHTML初学者の方へ向けてdivタグについて解説したいと思います。
中級者以上の方にとっては「今更divタグ？！」という感じかもしれませんが、案外「なんとなく使っている」という方も少なくないと思いますので、皆様に興味を持っていただけるよう深掘りをしていきたいと思います！
以前にsectionとdivの違いについてもまとめているので、そっちが気になるという方は下の記事をご覧ください。
目次
そもそもdivタグとは
さて、ここから本題です。まずはdivタグについてご存知の方も多いかもしれませんがお話します。
divタグはWebページの範囲（構造）を作るためのタグです。
以下のイメージのように複数のタグをまとめてグループ化することができます。
Webページのレイアウトやデザインを作るため、HTML側でdivタグを用いて範囲を作成し、CSS側でdivタグに対するスタイル（色・大きさ・位置・余白など）の指定を行います。
元々英語の「divided（ディバイデッド）」という単語が語源となっていて、日本語では「分ける、分割する」という意味になるので、範囲を分けるために作られたタグということになりますね。
divタグの親要素になり得るタグ
HTML5 入れ子チートシートで確認すると以下のようになります。
青い背景のタグが親要素になり得るタグです。
HTML4までのdivタグの使い方
HTML4まではHTML上の多くの範囲をdivタグを使って作成しました。
ヘッダーエリア・ナビゲーションエリア・コンテンツエリア・フッターエリアなどWebページの主要となる範囲などの全てをdivを用いて作成し、個々の違いはid属性やclass属性を使って表現をしました。
下のようなイメージですね。
divのみで範囲分けをする問題点
上のような記述でもWebページの構造を作ることができたのですが、いくつかの問題がありました。
コードで見ると分かりやすいので下記の記述を見てみてください。
<div class="header">
<h1>Web Site Title</h1>
</div>
<div class="nav">
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</div>
<div class="content">
<div class="content_header">
<h2>content title</h2>
<p>content text</p>
</div>
<div class="content_left">
<h2>content title</h2>
<p>content text</p>
</div>
<div class="content_right">
<div class="content_right1">
<h2>content title</h2>
<p>content text</p>
</div>
<div class="content_right2">
<h2>content title</h2>
<p>content text</p>
</div>
</div>
</div>
<div class="footer">
<small>© 2024 STUDIO NNC All Rights Reserved.</small>
</div>divだらけで見づらい印象ですよね。
特にdivが入れ子になっていると </div></div></div> のように閉じタグが連続して現れるため、どの閉じタグがどの開始タグに対応しているかが分かりづらく、誤って必要な閉じタグを消してしまったり不要な閉じタグを残してしまったりする原因となっていました。
またdivは特に意味を持たない汎用的な範囲を指定するためのタグであったため、各範囲がどのような意味・役割を持っているかを表すことができませんでした。
このようにdivタグのみで範囲を作ってしまうと人間にとってもコンピューターにとっても分かりづらいコードになってしまいます。
HTML5からのdivタグの使い方
HTML5からはdivタグのみで範囲を作ることはせずに、よりセマンティックなタグ（header / nav / main / section / footer など）を使って範囲を作ることになりました。
セマンティック（semantic）とは、「意味の、語義の、意味論の、意味的な」という単語になるので「意味的な範囲を作る」というのがHTML5からの考え方です。
その中でdivは汎用的な範囲を作るものとして「明確な意味はないけど、レイアウトを作るためここに範囲が欲しい」という時に使われるタグとなりました。
下のようなイメージになります。
上のイメージでdivタグは2つのsectionを囲んでいますが、特に意味を持たずCSSでスタイリングをする目的のためのみに使用されています。
それ以外の範囲は明確な意味を与えたいため、divタグは使わずにセマンティックなタグを使用しています。
コードの記述も見てみましょう。
<header>
<h1>Web Site Title</h1>
</header>
<nav>
<ul>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
<li><a href="#">menu</a></li>
</ul>
</nav>
<main>
<section>
<h2>content title</h2>
<p>content text</p>
</section>
<section>
<h2>content title</h2>
<p>content text</p>
</section>
<div class="content_right">
<section>
<h2>content title</h2>
<p>content text</p>
</section>
<section>
<h2>content title</h2>
<p>content text</p>
</section>
</div>
</main>
<footer>
<small>© 2024 STUDIO NNC All Rights Reserved.</small>
</footer>セマンティックなタグを使うことでコードが見やすくなり、Webページの構造もわかりやすくなりました。
人間にとってもコンピューターにとっても理解しやすいコードですね。
このようにHTML5からはセマンティックなタグとdivタグを併用するというのがスタンダードな記述となっています。
範囲を作る際によく使用される、セマンティックなタグ一覧
| タグ | 説明 |
|---|---|
<header> | ページやセクションのヘッダーを定義する。 |
<footer> | ページやセクションのフッターを定義する。 |
<nav> | ナビゲーションリンクを含むセクションを定義する。 |
<main> | ドキュメントのメインコンテンツを定義する。 |
<article> | 自己完結型のコンテンツや記事を定義する。 |
<section> | ドキュメントのセクションを定義する。 |
<aside> | 本文とは関係のない補足情報を定義する。 |
<figure> | 図表やイラストなどのグラフィカルなコンテンツをグループ化する。 |
<figcaption> | <figure>要素内の図表やイラストなどのキャプションを定義する。 |
<details> | ユーザーがクリックすると詳細が表示される詳細情報を定義する。 |
<summary> | <details>要素のサマリー（要約）を定義する。 |
divタグの使い方は制作者によって変わる
ここまでdivタグの使い方やセマンティックなタグとの使い分け方を紹介しましたが、「絶対にこうしなければならない」という明確なルールが存在するわけではありません。（文法エラーなどは当然ありますが）
人によってはテーマなどを区切る際にsectionタグを積極的に使用せず、divタグを使用する方もいるかもしれません。
基本的な役割や使い方を理解したら、適宜最適な記述を判断をして使用していくということになります。
毎回使い方を悩んでしまうという方は、「他の人はさておき、自分はこういう時にdivを使う」と自分なりのルールを決めておくと悩まずにすむと思います！
まとめ
ここまでの内容をまとめるとdivタグの特徴は以下のようになります。
- ・Webページの範囲を分けるためのタグ
- ・特に意味を持たずCSSスタイリングのために使われる
- ・HTML5からはセマンティックなタグと併用する
- ・使い方は人それぞれになるので、適宜判断をして使用する
以上です！
いかがでしたでしょうか？今回はあえてdivタグのみにスポットを当ててお話をしてみました。
divタグの使い方・使い所で悩んでいる方の参考にしていただけたら嬉しいです！
