divタグとは

この記事の目的
今やビジネスにおいてコンピュータ・情報・通信などを中心とする「IT用語」に対する知識は欠かせません。
あまり馴染みがない各分野のIT用語を、なるべく専門用語を使わずに解説していきます。

この記事の対象読者
Web制作を始めたばかりの人。
自社のWebマーケティングを任された人。
専門用語についていろいろ知りたい人。
Webマーケティングを行なっているが、言葉の定義を再確認したい人。
など、Webに限らずDXに携わるすべての方に。

divタグとは

HTMLのdivタグのdivは「division」の略で、要素をグループ化してデザインやレイアウトのために使用します。HTMLの他のタグは段落を表すpタグや見出しを表すh1タグなどそれぞれ意味や役割を持っています。しかしdivタグは他のタグとは違い、意味を持ちません。

上記はHTMLタグのごく一部ですが、divタグは他に適切なタグがない場合の最後の手段として使用します。

divタグの使い方

divタグはCSSでデザインやレイアウトを調整する際に使用します。

使用する際は、開始タグ<div> と 終了タグ </div>を使ってコンテンツを囲うようにして使用します。

<div class=”example”> 　
< h1>見出し</h1>
　<p>文章です。</p>
</div>

上記使用例では、見出しを表示するためのh1タグと、段落を意味するpタグを一括りにしています。ここでh1タグとpタグを囲うdivに対してCSSを使用することでデザインやレイアウトを変更できます。

ただし、他にdivタグよりふさわしいタグがある場合は、そちらを優先的に使うようにしましょう。

classを指定してCSSを使う

divタグに対してCSSを当てる場合はclassを指定します。

<div class=”example”> 　
< h1>見出し</h1>
　<p>文章です。</p>
</div>

この例の場合、CSSを当てるには

.example {
  padding 20px;
  background-color: #blue;
}

上記のようにclassを指定してCSSを当てます。

spanタグとの違い

divタグと同じくspanタグも意味を持たないタグです。しかしdivタグとspanタグには明確な違いがあります。

ブロック要素とインライン要素の違い

divタグとspanタグのの違いはdisplayプロパティの値が「block」か「inline」かの違いです

ブロック要素

ブロック要素はレイアウトの一つのまとまりとして扱われる要素です。

ブロック要素の特徴はmargin、paddingなどの余白やwidth、heightなどのサイズを指定できます。またブロック要素の前後には改行が入ります。

インライン要素

インライン要素は文章の一部（インライン）として扱われる要素です。

インライン要素はmargin、paddingなどの余白やwidth、heightなどのサイズを指定できません。また前後に改行が入らず、子要素にできるのは同じインライン要素のみで、ブロック要素を子要素として入れることはできません。例えばspanの中にdivは入れられません。

使用上の注意

divタグはできる限り他に適切なタグ（articleタグやheaderタグなど）を使用してください。適切なタグが無い場合に限り使用します。

なぜできるだけ意味を持つタグを使うべきなのか

例えばpタグの代わりにdivタグを使用してもブラウザ上で見る限り何ら変わりはありません。

ではなぜ意味のあるタグを優先的に使用するべきなのでしょうか。それはユーザーのためではなく「検索エンジン（のクローラ）」、「スクリーンリーダー」などのHTMLを読むプログラムのためです。意味を持つタグを適切に配置することで、プログラムが文書構造を理解しやすくなります。また自分を含めた人間の技術者に対して、ソースコードの可読性が高くなり、保守性の向上に繋がります。このような良い影響が回り回って、より質の高いコンテンツがユーザーに提供されます。

まとめ

今回はdivタグについて解説いたしました。divタグは特定の意味を持たず、要素をグループ分けするためのタグです。その存在意義はデザイン・レイアウトを指定するためにあります。divタグは気軽に使える反面、できるだけ文脈にふさわしい意味を持つ他のタグを優先的に使うのが良いとされています。