divとは

divの使用例［HTMLソースコード］

<article>
<h1>500万円得をするホームページ作成会社.comのホームページ制作</h1>
<div class="コスト">
<p>ホームページの最大のコストはランニングコスト!!</p>
<p>ある程度の集客力を持ったホームページを維持するには、1年間で60万円もの費用が掛かることはご存知ですか？… </p>
</div>
<div class="SEO">
<h2>集客コストをゼロにする圧倒的SEO対策</h2>
<p>SEOに強いと謳っている業者も多いですが、実は…</p>
</div>
</article>

divの使用方法解説

「div要素」は、それ自体が特別な意味をもたないという特徴をもっています。少々ややこしい表現ですが、“意味をもたない要素”ということこそが最大の特徴と言える要素です。

誤解が生んだdiv病？

　これまで、「HTML4.01」や｢XHTML」でWebサイトをデザインしてきた方にとって、「div要素」はお馴染みの要素と言えるでしょう。しかし、「div」に頼りすぎていた方はいませんか？
　それ以前、「Internet Explore4」や｢Netscape4」が主流のころには、table要素レイアウトが流行した時期がありました。
まだブラウザ側のcss対応が完全でなく、また、ブラウザの独自拡張が横行していた時代です。
　それゆえ、クロスブラウザ対応を実現するために、どのようなブラウザでも問題なく表示させるために、やむを得ず、あるいは手を抜いて、「table」によるレイアウトが一般的に利用されていました。
　現在でも、画像編集ソフトからHTML書き出しを実行するとtableレイアウトで書き出されることが多いのは、このころの名残と言えます。

それからcssデザインが一般的となりましたが、こんどはHTMLの意味付けを考えずに｢tableレイアウト」を｢divレイアウト」に書き換えただけのレイアウトを行なうデザイナーが増えました。
　このようなレイアウトでは、ブラウザのレンダリング結果は同じであっても、HTMLとしてのセマンティクスをまったく配慮されていません。
　その結果、SEO効果は皆無に等しいと言えるデザインと言えます。

　本当に意味のあるWebサイトを考え、それぞれの要素に意味をつけるHTMLデザインを実現するために、正しく要素を使い分けるようにしましょう。その点を考慮して「HTML5」でサイトデザインを行なった場合、このdiv要素は利用する場面が非常に限られるはずです。

ほかの要素では区分できない場合にdiv要素を

　「div要素」の使い方の一例として、HTMLの意味付けとは別の区分けをしたいとき、あるいは、HTMLの意味付けとは別の要素としてスタイリングをしたいときなどが挙げられます。

　ただし、「header」「footer」「nav」「article」「section」「address」など、すでに大きな意味のある要素がたくさん存在します。これらの要素で適切な要素があれば、なるべく「div」以外の要素が適用できないかどうか、熟慮する必要があります。

　それらの要素でまかないきれないような区分をマークアップしたいときに、はじめて｢div要素」を使うようにしましょう。