divとは？HTML初心者にもわかりやすく役割と使い方を解説

HTMLを見ていると、やたらと出てくる「div」。文字を囲んでいるのは分かっても、何のためにあるの？と止まりやすいタグです。

こんにちは、『ゴイノワ』のナギです。わたしも最初は、divで囲むと何が変わるのかが気になりました。画面だけ見ても、何も起きないことがあるんですよね。

先に答えると、divはHTMLの中に複数の要素をひとまとまりにするための箱を作るタグです。ここをつかむと、役割がかなり見えてきます。

divとは何をするタグ？

divは、HTMLで使う汎用的なコンテナです。見出しや文章、画像などを囲み、それらを一つのまとまりとして扱いたいときに使います。

「division」に由来する名前で、区分や分割といった感覚に近い言葉です。ただし、divそのものに「記事」「メニュー」といった特定の意味はありません。

箱に入れたからといって、それだけで色や大きさが変わるわけではありません。この「囲んだだけでは目立った変化がない」という点が、最初は少し分かりにくいところです。

なぜわざわざdivで囲むの？

divが便利になるのは、囲んだ範囲をまとめて扱いたいときです。たとえば、商品名、写真、価格、ボタンを一つの商品欄として扱う場面を想像してみてください。

それぞれをdivで囲んでおけば、classやidを付けてCSSを適用したり、JavaScriptからその範囲を扱ったりできます。Web制作で頻繁に登場する理由はここです。

わたしなら、divを単なる改行用のタグとは覚えません。「ここからここまでを一組として扱いたい」ときに置く箱、と考えたほうが使いどころまでつながります。

divだけでは何も変わらない？

ここで一度止まりたいのが、divを書けば自動的に枠や背景色が付くわけではないことです。MDNでも、divはCSSなどで指定されるまで内容やレイアウトに固有の効果を持たないとされています。

たとえば、文章をdivで囲んだだけなら、ブラウザ上では大きな違いを感じないことがあります。そこでclassを付け、CSSから背景色や余白などを指定すると役割が分かりやすくなります。

divは装飾そのものを担当するタグではありません。HTMLで範囲をまとめ、その範囲にCSSなどから働きかける、と分けて考えると混乱しにくいです。

divとspanは何が違う？

divを調べると、一緒に出てきやすいのがspanです。どちらも特定の意味を持たない汎用的な要素なので、「結局どっちを使うの？」となりやすいところ。

ざっくりつかむなら、divは複数の要素を含む大きめのまとまり、spanは文章の一部分など小さな範囲を囲む場面でよく使われます。

タグ	よく使う場面
div	画像や文章などをまとめて一つの範囲にしたいとき
span	文章中の一部分などを指定したいとき

たとえば商品カード全体ならdiv、その中の商品名の一語だけ色を変えたいならspan、と考えるとイメージしやすいでしょう。実際にはCSSの指定方法によって表示は変えられます。

sectionとはどう使い分ける？

もう一つ迷いやすいのがsectionです。どちらもページの一部を囲めるので、HTMLを始めたばかりだと同じものに感じても不思議ではありません。

違いの芯は、その範囲に意味があるかどうかです。sectionは文書の一つの区画として意味を持たせたい場面で使い、divはより汎用的な箱として使われます。

MDNでは、articleやnavなど、より適した意味を持つ要素がある場合はそちらを使い、適するものがない場合にdivを使うという考え方が示されています。ここは勢いで全部divにしたくないんですよね。

実際のHTMLではどう書く？

書き方そのものはシンプルです。開始タグの<div>と終了タグの</div>で、ひとまとめにしたい内容を囲みます。

たとえば「プロフィール」という範囲に名前と自己紹介文があるなら、その二つを同じdivの中に入れられます。さらにclassを付ければ、その範囲をCSSから指定できます。

コードを読むときも、divを見つけたら「何を囲んでいるんだろう」と終わりの</div>まで追ってみるのがおすすめです。箱の中身を見る感覚ですね。

divで迷ったら箱を思い出そう

divとは、HTML内の複数の要素を一つの範囲としてまとめるための汎用的なタグです。div自体が「これは記事です」といった意味を持つわけではありません。

spanとの違いに迷ったら、大きなまとまりを囲むのか、文章中などの小さな範囲を囲むのかを見るとつかみやすくなります。意味を持つ専用タグがないかも見ておきたいところです。

次にWebページのHTMLを見る機会があったら、divを一つだけ探して、どこからどこまでを囲んでいるか追ってみてください。実物を一つ見るだけでも、「箱」という感覚がかなり具体的になりますよ。