divタグ

開始タグ・終了タグ・役割の解説

divタグ・・・自由度が高く大半のことに対応できる万能なhtmlタグ

まず基本となる、div(ディヴ)タグ(=<div></div>)を覚えましょう。
「div」とは、「division(分けること、分割すること)、divide(分ける、分割する)」の略で、
そのままの意味で「分割したブロックのこと」だと考えてください。

divタグは単体では特に意味を持ちませんが、主に各ブロックのレイアウトの役割を持っています。
特に意味を持っていないので逆に自由度が高く、大半のことに対応できる万能なhtmlタグです。

以下の画像を見てください。

龍弥デザインのクライアントの倉敷市児島の女性向け鍼灸院 はりきゅう処 群青様のウェブサイトです。
さて、この画像の見える範囲で、どれくらいのdivタグ(分割したブロック)をどのあたりに仕込んでいるのか??
正解は下の画像です。

正解は「ほぼ全部」でした。
実は全体を見ると、これらのdivタグのさらに外側に、この画像の範囲すべてを囲うdivタグがあります。
逆に細かいもの、今回で言えばメッセージブロックの枝のイラストなどもdivタグで実装しています。

divタグは箱のようなもの(以下:ブロック)だと考えてください。
ウェブサイトはレイアウトを行うためにブロックを生成してパズルのように組み立てる必要があり、その際の使用頻度が最も高いものがdivタグです。

また、このdivタグは、後述するhタグやpタグなどを入れ子にするカタチで包括(囲う)し、さらにこのdivタグを入れ子にすることで複雑なレイアウトを実現しています。
この入れ子の原理によって、様々なレイアウトが可能になります。