【HTML】divタグとは?

こんにちは!CODE CLUB965のKです!

今回は、Webサイトなどを作成する際によく使われるdivタグについて紹介します。

必ずと言っていいほどHTMLでは出てくるので基本をおさえておきましょう!

divタグについて

divはDivision(区分)の略です。

divタグは単体では特に意味を持ちませんが、divタグで囲った部分をブロックレベルの要素としてグループ化することができます。

グループ化することで、水平方向の位置を指定したり、指定した範囲にスタイルシートを適用したりすることができます。

位置を指定するのには、align属性を使用します。
次で説明します。

align属性を使って要素の位置を指定する

align属性の使い方の例は以下です。

ブラウザでの表示結果の位置が変わっていることが分かると思います。

コード例

<div align="center">
  この文章は中央寄りを指定しています。
</di>

<div align="right">
  この文章は右寄りを指定しています
</di>

<div align="left">
  この文章は左寄りを指定しています
</di>

ブラウザでの表示結果

この文章は中央寄りを指定しています。
この文章は右寄りを指定しています
この文章は左寄りを指定しています

最後に

divタグに説明しましたがどうでしたでしょうか?
よく見かけるタグなので使用する属性などしっかり基本をおさえておきましょう!

補足ですが、同じような意味を持つタグとして「spanタグ」があるのも頭に入れておいてください。

divタグはブロックレベルの要素としてグループ化されるので、見出しや段落、リストなどとみなされ、前後に「改行」が入ります。

一方「spanタグ」はインライン要素で文章の一部として利用されるので前後に改行が入りません。

違いはこんなところですので頭の片隅に入れておいてください。

また、spanタグについては別の記事で詳しく説明したいと思います。

ではまた!