ドイツ生まれの地球に優しいバイオ・ハイテク洗剤

divタグ

更新日
現在のページは約2分で読めます。

divタグとは

divタグとは、囲んだ範囲をブロック要素としてグループ化できます。2カラムレイアウトや3カラムレイアウトなどは主に複数のdivタグとCSSが用いられており、tableタグではできなかった柔軟な配置が可能になります。

配置箇所はbody要素内であり、いくつでも記述してOKです。

divタグでそれぞれをグループ化すれば、特定の箇所でのみCSSのデザインを変えるといったことも可能になります。

サンプルコード

<div>
divタグで囲んだ範囲をブロック要素としてグループ化できます。
</div>

使用例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>divタグ</title>
</head>
<body>

<h1>divタグ使用例</h1>

<div align="left">
<h2>Aグループ</h2>
<p>align属性(left)で左配置</p>
</div>

<div align="center">
<h2>Bグループ</h2>
<p>align属性(center)で中央配置</p>
</div>

<div align="right">
<h2>Cグループ</h2>
<p>align属性(right)で右配置</p>
</div>

</body>
</html>

ブラウザの見え方

なお、今回はHTML解説のため配置はalign属性で紹介しましたが、実際はdivタグにidやclass属性を指定した上でそれぞれにCSSで設定しデザインを整えます。

spanタグとの違い

divタグとspanタグは似ていますが、spanタグは囲んだ範囲をインライン要素化できます。divタグはブロック要素化できます。

まとめ

divタグとspanタグは似ていますので、使い方を間違えないよう気を付けましょう。

 

情報提供、雑談等