<div>汎用要素

<div>タグは、それ自体に特別な意味を持たない汎用的な要素です。 <div>は、複数の要素をグループ化したい場合などに利用されます。

一般的にはid属性、class属性と共に利用され、ページレイアウトなどの設定をする際にcssでのスタイルの適用先として使用される事が多いタグです。

またdiv要素の使い方として、HTMLの意味づけとは別に区分けをしたい場合、または意味づけとは別に要素としてスタイリングをしたい時などに使用します。

<div>は多くのHTML文書でよく使われますが、HTML5では<article><nav><section>など、大きな意味のある要素が多く存在しています。

ですので、やみくもにdiv要素を使う事は避け、他に適切な要素がないか熟慮し、ない場合の最終的な手段としてdiv要素を使用した方がいいでしょう。 また適切な要素があるにも関わらず<div>を使用しているようなレイアウトでは、ブラウザのレンダリング結果は同じでも、HTMLとしてのセマンティクスを全く配慮していない事となります。 その結果seo効果が全くないようなデザインとなってしまうので、注意して下さい。

例えば、ナビゲーション部分なら<nav>、章・節・項などの区切りであれば<section>、メインコンテンツには含まれない補足的な情報であれば<aside>などを使用してマークアップします。

HTML5での変更点

HTML5のdiv要素では、HTML4.01で用意されていたalign属性が廃止されています。

書式

  • <div 属性="値">~</div> ……… 汎用要素

使用した時の例

<article>
  <h4>今日のスイーツ</h4>
  <div class="sample1">
    <p>今日はチーズケーキを作って見ました!</p>
  </div>  
  <div class="sample2">
    <p>明日は何を作るか考え中です。</p>
    <p>でもたまには簡単に作れるクレープもいいかなって思います。</p>
  </div>  
</article>
div.sample1 {background: #ccc;}
div.sample2 {margin-top:10px; border:solid 1px red;}

ブラウザ上の表示例

今日のスイーツ

今日はチーズケーキを作って見ました!

明日は何を作るか考え中です。

でもたまには簡単に作れるクレープもいいかなって思います。

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

形式 <div>~</div> カテゴリ フローコンテンツ
親要素 フローコンテンツが期待される場所 子要素 フローコンテンツ
開始タグ 必須 終了タグ 必須
グローバル属性 accesskey / class / contenteditable / contextmenu / dir / draggable / hidden / id / lang / spellcheck / style / tabindex / title / translate
対応ブラウザ Internet Explorer8~ , Google Chrome14~ , Firefox6~ , Opera11.5~ , Safari5.1~