こんにちはNNCの中里です。
本日はHTMLで範囲を作る際に使用するdivタグについて紹介をします！

基本的な考え方・使い方から、sectionとdivタグの違いなどの応用的な使い方まで分かりやすく解説をします。

そもそもdivタグとは

divタグはWebページの範囲（構造）を作るためのタグです。
以下のイメージのように、<div>〜</div>の記述で複数のタグをまとめてグループ化することができます。

Webページのレイアウトやデザインを作るため、HTML側でdivタグを用いて範囲を作成し、CSS側でdivタグに対するスタイル（色・大きさ・位置・余白など）の指定を行います。

元々英語の「divided（ディバイデッド）」という単語が語源となっていて、日本語では「分ける、分割する」という意味になるので、範囲を分けるために作られたタグということになりますね。
headerやnavのように意味などは持たず、レイアウト作成のために自由な範囲を指定する際に用いられます。

divタグの親要素になり得るタグ

HTML5 入れ子チートシートで確認すると以下のようになります。

青い背景のタグが親要素になり得るタグです。

HTML4までのdivタグの使い方

HTML4まではHTML上の多くの範囲をdivタグを使って作成しました。

ヘッダーエリア・ナビゲーションエリア・コンテンツエリア・フッターエリアなどWebページの主要となる範囲などの全てをdivを用いて作成し、個々の違いはid属性やclass属性を使って表現をしました。

下のようなイメージですね。

divのみで範囲分けをする問題点

上のような記述でもWebページの構造を作ることができたのですが、いくつかの問題がありました。

コードで見ると分かりやすいので下記の記述を見てみてください。

   <div class="header">

       <h1>Web Site Title</h1>

   </div>

   <div class="nav">

       <ul>

           <li><a href="#">menu</a></li>

           <li><a href="#">menu</a></li>

           <li><a href="#">menu</a></li>

           <li><a href="#">menu</a></li>

       </ul>

   </div>

   <div class="content">

       <div class="content_header">

           <h2>content title</h2>

           <p>content text</p>

       </div>

       <div class="content_left">

           <h2>content title</h2>

           <p>content text</p>

       </div>

       <div class="content_right">

           <div class="content_right1">

               <h2>content title</h2>

               <p>content text</p>

           </div>

           <div class="content_right2">

               <h2>content title</h2>

               <p>content text</p>

           </div>

       </div>

   </div>

   <div class="footer">

       <small>© 2024 STUDIO NNC All Rights Reserved.</small>

   </div>

divだらけで見づらい印象ですよね。

特にdivが入れ子になっていると </div></div></div> のように閉じタグが連続して現れるため、どの閉じタグがどの開始タグに対応しているかが分かりづらく、誤って必要な閉じタグを消してしまったり不要な閉じタグを残してしまったりする原因となっていました。

またdivは特に意味を持たない汎用的な範囲を指定するためのタグであったため、各範囲がどのような意味・役割を持っているかを表すことができませんでした。

このようにdivタグのみで範囲を作ってしまうと人間にとってもコンピューターにとっても分かりづらいコードになってしまいます。

HTML5からのdivタグの使い方

HTML5からはdivタグのみで範囲を作ることはせずに、よりセマンティックなタグ（header / nav / main / section / footer など）を使って範囲を作ることになりました。

セマンティック（semantic）とは、「意味の、語義の、意味論の、意味的な」という単語になるので「意味的な範囲を作る」というのがHTML5からの考え方です。

その中でdivは汎用的な範囲を作るものとして「明確な意味はないけど、レイアウトを作るためここに範囲が欲しい」という時に使われるタグとなりました。

下のようなイメージになります。

上のイメージでdivタグは2つのsectionを囲んでいますが、特に意味を持たずCSSでスタイリングをする目的のためのみに使用されています。

それ以外の範囲は明確な意味を与えたいため、divタグは使わずにセマンティックなタグを使用しています。

コードの記述も見てみましょう。

   <header>

       <h1>Web Site Title</h1>

   </header>

   <nav>

       <ul>

           <li><a href="#">menu</a></li>

           <li><a href="#">menu</a></li>

           <li><a href="#">menu</a></li>

           <li><a href="#">menu</a></li>

       </ul>

   </nav>

   <main>

       <section>

           <h2>content title</h2>

           <p>content text</p>

       </section>

       <section>

           <h2>content title</h2>

           <p>content text</p>

       </section>

       <div class="content_right">

           <section>

               <h2>content title</h2>

               <p>content text</p>

           </section>

           <section>

               <h2>content title</h2>

               <p>content text</p>

           </section>

       </div>

   </main>

   <footer>

       <small>© 2024 STUDIO NNC All Rights Reserved.</small>

   </footer>

セマンティックなタグを使うことでコードが見やすくなり、Webページの構造もわかりやすくなりました。

人間にとってもコンピューターにとっても理解しやすいコードですね。

このようにHTML5からはセマンティックなタグとdivタグを併用するというのがスタンダードな記述となっています。

範囲を作る際によく使用される、セマンティックなタグ一覧

divタグの使い方は制作者によって変わる

ここまでdivタグの使い方やセマンティックなタグとの使い分け方を紹介しましたが、「絶対にこうしなければならない」という明確なルールが存在するわけではありません。（文法エラーなどは当然ありますが）

人によってはテーマなどを区切る際にsectionタグを積極的に使用せず、divタグを使用する方もいるかもしれません。

基本的な役割や使い方を理解したら、適宜最適な記述を判断をして使用していくということになります。

毎回使い方を悩んでしまうという方は、「他の人はさておき、自分はこういう時にdivを使う」と自分なりのルールを決めておくと悩まずにすむと思います！

divタグを横並びにするには

divタグはブロック扱いの要素になるため、前後に改行が発生し初期の状態は上下に並びます。
複数のdiv同士を横並びにするためには親要素にdisplay:flexを指定しましょう！

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

display:flexについて学びたい方はこちらの記事をご覧ください。
もうdisplay:flexで悩まない！初心者向けCSSレイアウト徹底解説

divタグを中央に揃えるには

divタグに横幅の指定をすると画面の左に配置されます。
div要素を中央に揃えるにはmarginの指定で左右の値をautoにしましょう！

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

div要素内のテキストを中央揃えにするにはtext-align:centerを使います！

複数のdivタグの見た目を変えたい場合

1ページ内にdivタグを複数作成し、それぞれのdivタグの見た目を変えたい場合はclass属性で名前をつけることで、cssから個別の命令を出すことが可能です。

個々のdivの見た目を変えたいのにcssで要素名セレクタを指定してしまうと、すべてのdivが同じ見た目になってしまうので注意してください！

See the Pen Untitled by NNC STUDIO (@NNC-STUDIO) on CodePen.

まとめ

ここまでの内容をまとめるとdivタグの特徴は以下のようになります。

• ・Webページの範囲を分けるためのタグ
• ・特に意味を持たずCSSスタイリングのために使われる
• ・HTML5からはセマンティックなタグと併用する
• ・使い方は人それぞれになるので、適宜判断をして使用する
• ・横並びにする場合は親要素にdiplay:flexを指定
• ・複数のdivタグの見た目をそれぞれ変更する場合はclass属性を使用

以上です！

いかがでしたでしょうか？今回はあえてdivタグのみにスポットを当ててお話をしてみました。

divタグの使い方・使い所で悩んでいる方の参考にしていただけたら嬉しいです！

おまけ – sectionとdivの違い

以前にsectionとdivの違いについてもまとめているので、違いが気になるという方は下の記事をご覧ください。