divタグの意味とは？htmlのdivタグの中身と正しい使い方

divタグ単体には意味はない

divタグだけでは特に意味はありませんが、重要な役割があり、HTMLではたくさん使われています。

divタグを単体で使用するとただ改行されるだけの見た目になります。意図せず改行される場合は、空のdivタグがある可能性があるので知っておくと便利です。

divタグで囲った部分をグループ化できる

divタグのメインの役割は、複数のタグを1つにまとめてグループ化できることです。pタグやリストタグなど異なるタグをまとめるのに便利です。

グループ化することによってページ全体を構造化し、レイアウト構成がしやすくなります。グループ全体にcssをあててデザインを構築していくわけです。

divタグの読み方

divタグは「ディヴ」「ディブ」と読みます。

divはdivision（ディヴィジョン）の略で、分割という意味があり、コンテンツを分割しグループ化をする働きをします。

divタグとspanタグの違い

divタグはブロックレベル要素、spanはインライン要素という違いがあります。

ブロックレベル要素とは、見出しや段落などを構成する要素で、ブロック（かたまり）として扱われます。divタグの他に、 olタグやpタグ、見出しのh1～h6タグなどがあります。

ブロック要素はブラウザで見ると、改行されるので注意してください。

インライン要素はブロック要素の中で使われる要素のことで、文章の一部として扱われます。一般的なブラウザでは改行されず、タグで囲った部分だけ強調して使うことができます。

divタグで囲んでブロックを作る

divタグの使い方は簡単で、 開始タグ<div>と終了タグ</div>で囲うことでブロック要素を作ります。

divタグで囲んだ場所にidやclassを割り当てれば一括で変更できるため、サイトデザインの変更に適しています。

また、ページ構成をわかりやすく分割する役割もあり、正しく使えば便利なタグです。

属性やcssを割り当ててデザイン変更に用いる

divタグにidやclassを割り当てたら、cssを適応して色や文字を変更することができます。

そのページ内で何度も使うものはclass属性、一度しか使わないものはid属性を割り当てます。

divタグを用いたデザイン変更は便利ですが、適切なマークアップよりも検索順位が下がるリスクもあります。そのため、多用は控えたほうが良いです。

divタグで囲った部分を中央寄せする

divタグで囲った部分を中央寄せして、装飾に活用できます。

<div align=”center”>文章</div>と記述します。

centerの部分をleftにすれば左寄り、rightにすれば右寄りにできます。

classを使ってグループ名を付けてCSSを適応する

Classを活用して、グループ名を付けて装飾することも可能です。

ここでは、Greenというグループ名を付けます。

例：<div id=”green”>文章</div>

この時にCSSで以下のように記述します。

.green{

width: 100%;

height: 100px;

background-color: green;

}

そうするとdivタグで囲った部分にCSSを適応して、背景を緑にすることが可能です。