この記事では、HTMLのdivタグについて解説しています。divタグは、複数のタグを１つにまとめる役割を担い、ページ全体のレイアウトを決定するタイミングや、見た目を整えたい場面で頻繁に利用されます。
ただし、ページの見た目上の変化を観察することが難しいため、きちんと理解しきれていない人もいるのではないでしょうか？
実は、divタグは実際の利用シーンをイメージ・確認することで簡単に理解することが可能です。
このページでは・・・
- divタグとは？
- divタグの書き方・使い方・利用シーン
- class/id属性による命名とその必要性
について解説しています。
HTML勉強中の方や、企業のWeb担当者の方であれば絶対に知っておきたい内容ばかりですので、是非最後までご覧ください。
それでは早速解説を始めます。
divとは？
divタグの「div」とは「Division」の略で、区分や部分などの意味を持ちます。したがって、その意味から推測できる通り、divタグは複数のタグを１つにまとめる働きを持ちます。
言い換えれば、囲んだ要素をグループ化するのです。
例えば、それぞれ独立していた３つのpタグを１つにまとめたり、pタグ・olタグなど異なるタグどうしをまとめて１つにグループ化したりすることが可能です。
divタグ単体では意味を持たない
divタグは、グループ化をすることが目的のタグなので、それ単体で利用しても意味を持ちません。言い換えれば、divタグを設置しても文字の大きさや色などが変わることは無いのです。
では、なぜdivタグが多用されるのでしょうか？次の章では、実際にdivタグを利用するシーンを確認しつつ、divタグが担う重要な役割を解説していきたいと思います。
divタグの使い方
コーディング方法は、HTMLの基本構文ルールと同じです。
<div>
～囲みたい要素～
</div>
divタグで、囲みたい要素（グループ化したい複数の要素）を囲むだけです。
また、divタグ自体をまた別のdivタグで囲み入れ子構造を定義することも可能です。
このように指定することで、複数のグループ化された要素を定義することが可能です。
divタグの目的と利用シーン
ここまでで、divタグの意味や使い方・書き方を解説してきましたが、ここからは実際にdivタグを利用するタイミングや、目的について整理しておきたいと思います。
簡単に整理すると、divタグの目的と利用シーンは以下の通りです。
- 目的 ⇒ ページ全体の構造化
- 利用シーン ⇒ レイアウト / デザインの指定
目的：ページ全体の構造化
divタグを設置する目的は、ずばり「ページ全体の構造化」です。
実際のWebページの制作過程では、HTMLのソースコードが数千行以上に膨れていく場合が多数存在するため、著しく可読性が低下していってしまいます。（読みづらいので修正も難しいですし、バグの検知も難しいです。）
ここで、ページ全体をある程度に分類し、区分分けをしていくことでページ全体の構成・構造をまとめる必要性が出てきます。ここで利用されるのが、divタグです。
※class属性についてはページ後半で解説します。
ページのレイアウトに合わせて、divタグを設置し、さらに必要であればdivタグを細かく入れ子構造にして利用します。
ページ全体が構造化されれば、HTMLのコードを確認するだけでレイアウトがぱっとわかるようになりますし、例えばWebページを途中で修正したいタイミングで比較的容易に変更を行うことが可能になります。
利用シーン：レイアウト / デザインの指定
divタグは、レイアウトやデザインの指定を行う際に利用されます。
レイアウトやデザインはHTMLではなくCSSで指定します。CSSでは、タグごとにフォントの色や大きさ・配置などを指定します。ただ、もし今回学習したdivタグを対象してしまったらどうなるでしょうか？答えは、ページに存在するdivタグすべてのデザインが変更されてしまう、ということになります。
そこで、divタグを利用する際にあらかじめ「お名前」をつけてあげて、CSSではこの「お名前」ごとにデザインを変更できるようにしておくのが通常の使い方です。
ここで「お名前」を与える役割を担うのが「class属性」「id属性」です。
※「属性」というワードにピンとこない方はこちらのページをご覧ください。
classによる命名
HTMLにおける属性付与のコーディングルールと同一です。
<div class="class name">
・・・・・
</div>
idによる命名
<div id="id name">
・・・・・
</div>
上記によって、divタグに固有の名称を付与することができます。divタグについての基本ルールは以上です。