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

2015 年 2 月 20 日投稿 view: 39252

タグ：

こんにちは。
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>