HTML5におけるDIVタグの使い方を紹介します【HTML5 実践編】

こんにちは。
WEBマーケティング部の杉尾です。
今日はHTMLマークアップに欠かせないdivのお話です。
HTML5においては、「他に適切な要素がない」ときに最後の手段として使うことが推奨されています。
実際、そのことを意識せずにHP(ホームページ)を作っていると、多用してしまいがちです。
便利ですからね。
でも、それをやってはいけないとなると、ちょっと考えてしまいますよね。
では、
どういうところにdivを使えばいいか?
また、どんな風にdivを使えばいいか?
cssの話も絡めながら紹介します。
そもそもdivって?
divは特別な意味を持たない範囲のひとかたまりです。
「特別な意味を持たない」というのは、例えばheader要素のように、『ここがheaderだよ』とコンピュータに教えていないということです。
divがあっても、コンピュータは『ここが区切りなんだな』という以外に何も理解しません。
divタグで囲んだ部分を一つの箱と考えるとわかりやすいかもしれません。
見えない線が周りにあるイメージですね。
こんな感じです。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="SceneLive"> </head> <body> <main> <div class="box_wrap"> <div class="box1"> <section> 本文1 </section> <section> 本文2 </section> </div> <div class="box2"> <section> 本文3 </section> <section> 本文4 </section> </div> </div> </main> </body> </html>
[実行結果をわかりやすく図にしもの]

(※わかりやすいように線を引き、divのclass名を書いています。実際はcssで装飾をつけないと線は出ませんし、class名は表示されません)
(※複雑にならないためにsection内の見出しは意図的に省きました)
HTML5ではフロー・コンテンツにあたるので、cssで何も指定しない場合、上下に改行が入ります。
※cssとは「カスケード・スタイル・シート」の略で、ウェブページのスタイル(装飾)を指定するための言語です。
どういうところにdivを使うか
具体的に言うとheader,footer,h1~h6,nav,article,section,aside,fieldsetなどを使えない部分です。
そもそも上記のような要素を使うのは、その部分がどんな意味を持つのかコンピュータに知らせるためです。
このような考え方をセマンティックWebと言い、HTML5ではそれに基づいた記述をすることが求められます。
ですが、divはそれ自体、特別な意味を持ちませんので、セマンティックWebの考え方から外れてしまいます。
そういった理由から、できる限りheader,footer,h1~h6,nav,article,section,aside,fieldsetのように『意味を持つ』タグを優先して使い、divの使用はその後ということになります。
で、divで何をするの?
装飾をつけてページを見やすくしたり、きれいに見せたりしたい場合に使ってください。
一番わかりやすい例はdivを使った、コンテンツの横並びです。
記事の最初に出てきたソースコードを使ってdivの横並びをしてみましょう。
※サイト制作の現場では表示速度の向上や一括化による更新のしやすさといった点から、外部のスタイルシートを使うことが推奨されます。
ですが、わかりやすいので今回はHTMLファイル内にそのまま書いています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="author" content="SceneLive"> <style type="text/css"> .box1{ background-color:#fad1b6; } .box2 { background-color:#fffff0; } .box1, .box2 { float:left; } .clear { clear:both; } </style> </head> <body> <main> <div class="box_wrap"> <div class="box1"> <section> 本文1 </section> <section> 本文2 </section> </div> <div class="box2"> <section> 本文3 </section> <section> 本文4 </section> </div> <div class="clear"></div> </div> </main> </body> </html>
ソースコード解説
divにclassをつけ、それにcssで指定しています。
8行目11行目、background-colorというcssのプロパティを使って、box1とbox2の両方に別々の色をつけています。
14行目、cssのfloat:left;はボックスを左に寄せて、次のコンテンツを右へ回りこませるという指定です。
その逆にfloat:right;はボックスを右に寄せて、次のコンテンツを左へ回りこませます。
17行目、divにclearというclassをつけ、それにclear:both;と記述していますが、これは回りこみの解除を指定するプロパティです。
cssを使ったことがない方は、「へぇ~」という感じで見ていていただいて結構です。
あくまで、『こんなことが可能です』という見本ですので。
で、実行結果が下図です。

他にも…
div(divじゃなくてもできますが)単位で指定して、Javascriptで動きをつけるなんてこともできます。
例)ボタンをつけてdiv部分を開閉させる。
まとめ
「divを使いすぎるな」というのは、HTMLでのマークアップによって文書内を複雑にしすぎるなということです。
表示速度にも関わってきますし、そうなるとユーザビリティの観点からもよくありませんからね。
ちなみに、要素を横並びにする方法は『divにfloatをかける』以外にもいくつかあります。
その辺りはいずれcssの説明をする際に、詳しく紹介します。
最後までお読みいただき、ありがとうございました。

カテゴリー