<DIV>囲んだ部分をグループ化する(ブロック要素)

<DIV>は、複数の要素をグループ化したり、ブロックレベルの範囲を任意に設定するためのタグです。 テキスト画像などの要素を<DIV>~</DIV>で囲むと1つの範囲(グループ)として扱う事ができ、囲まれた範囲はブロックレベル要素となります。

また<DIV>内には、他のブロックレベル要素やインライン要素、またはテキストなどを含める事ができます。

<DIV>タグ自体は特に意味を持ってなく、このタグを配置しただけでは表示上の変化はありませんが、align属性で位置を変更したり、class属性、id属性と併せて使用する事で、グループ化した部分にまとめてスタイルシートを適用する事などができます。

ちなみにブロックレベル要素とは、見出し・段落・リスト・テーブルのように「ひとまとまりの範囲を示す要素」の事です。 一般的にはこれらの前後に改行が入った状態で表示されます。詳しくは「ブロックレベル要素の特徴」に記載していますので、ご覧ください。

なおインライン要素でグループ化したい場合には<SPAN>タグを使用します。

使用した時の例

<div align="right">
<p>グループ化した部分です。</p>
<p>divにcssを設定するとどちらのpにも反映されます</p>
</div>

ブラウザ上の表示例

グループ化した部分です。

divにcssを設定するとどちらのpにも反映されます

書式

  • <div>~</div> ・・・・・・ 特定の範囲をグループ化する

属性

align="left" 表示位置の指定
  • center・・・中央揃え
  • left・・・左寄せ(初期値)
  • right・・・右寄せ
  • justify・・・両端揃え

対応ブラウザなどのデータ

形式 <div>~</div> カテゴリ フローコンテンツ / パルパブルコンテンツ
親要素 子要素にフローコンテンツを含める要素 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
分類 ブロックレベル要素
汎用属性 accesskey / class / dir / id / lang / style / tabindex / title
対応ブラウザ Internet Explorer3~ , Google Chrome1~ , Firefox1~ , Opera1~ , Safari1~

HTML5での状況と関連情報

HTML5では、align属性が廃止。テキストの位置を変えたい場合はcssのtext-alignプロパティを使用して下さい。