HTMLの基礎③

HTMLのdivタグは、Webページのレイアウトを構築する上で重要なタグの１つで、このdivタグを使うことで、Webページを複数のブロックに分割し、それぞれのブロックを異なるスタイルで表示することができます。

目次

• divタグとは
• class属性とid属性について
• divタグのポイント

divタグとは

divタグの「div」とは「Division」の略で、区分や部分といった意味を持ちます。その意味から推測できる通り、divタグは複数のタグを１つにまとめる働きします。

以下のように囲んだ要素をグループ化するイメージです。

それぞれ独立していた３つのpタグを１つにまとめたり、pタグ・olタグなど異なるタグどうしをまとめて１つにグループ化したりために用います。

divタグはHTMLの基礎構文ルールに則って以下のように記述します。

<div>
  <!--ここにdivタグで囲む要素を書きます-->
</div>

divタグで、囲みたい要素（グループ化したい複数の要素）を囲むだけです。

以下のように、divタグ自体をまた別のdivタグで囲み、入れ子のような構造を定義することも可能です。

サンプルコード

<div class="container">
  <div class="header">
    <div class="logo">ロゴ</div>
    <div class="menu">
      <ul>
        <li><a href="#">ホーム</a></li>
        <li><a href="#">お知らせ</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </div>
  </div>
  <div class="main">
    <div class="article">
      <h2>記事タイトル</h2>
      <p>記事の内容</p>
    </div>
    <div class="sidebar">
      <h3>サイドバー</h3>
      <ul>
        <li><a href="#">リンク1</a></li>
        <li><a href="#">リンク2</a></li>
        <li><a href="#">リンク3</a></li>
      </ul>
    </div>
  </div>
  <div class="footer">
    <div class="contact">
      <p>お問い合わせはこちらから</p>
      <a href="#">お問い合わせフォーム</a>
    </div>
  </div>
</div>

このようにdivタグを入れ子にして利用することで、Webページのレイアウトを自由自在に構築することができます。

ただし、入れ子にする場合には、深すぎないように注意が必要です。適切な深さで入れ子にすることで、HTMLの構造がわかりやすくなり、メンテナンスもしやすくなります。

class属性とid属性について

HTMLのdivタグではid属性やclass属性を用いることができます。id属性、class属性はdivタグにつけるお名前のようなもので、これらの属性を使うことで、CSSやJavaScriptを使ったスタイル設定が可能になります。

id属性

• HTML内で一意の識別子をつけることができる。
• 同じページ内で同じid属性を持つ要素は存在できません。

class属性

• 複数の要素に同じクラス名をつけることができる
  →id属性の場合は同一ページで一意となるように命名
• CSSやJavaScriptなどで同じクラス名を持つ要素全てに対して同じ操作を行うことができる

divタグのポイント

ここまではdivタグの使い方・構文ルールをシステム的な観点から解説してきました。

ここからは、実際にWebページを構築する観点からdivタグの使いどころ注意点を整理して解説します。

まずはdivタグを利用する目的からご説明します。

divタグを使用する目的

• Webページのレイアウトを構築するため
• CSSやJavaScriptのスタイル設定や操作をするため

divタグの目的①：Webページのレイアウトを構築するため

divタグの１番の目的→Webページのレイアウトを構築するために利用されます。

divタグを使うことで、Webページを複数のブロックに分割し、それぞれのブロックを異なるスタイルで表示することができます。例えば、ヘッダーやフッター、メインコンテンツなど、それぞれのブロックに異なるスタイルを適用することができます。

具体的には以下のようにdivタグとclass属性などを組み合わせてコーディングするのが一般的です。

ページ全体が構造化されれば、HTMLのコードを確認するだけでレイアウトがぱっとわかるようになりますし、例えばWebページを途中で修正したいタイミングで比較的容易に変更を行うことが可能になります。

divタグの目的②：CSSやJavaScriptのスタイル設定や操作をするため

先ほど解説した通り、divタグはid属性やclass属性を付与することで、CSSやJavaScriptを使ったスタイル設定や操作を行うことを目的としています。

id属性やclass属性を使うことで、特定のdiv要素を指定することができ、スタイルを細かく設定することができます。

divタグを利用する際の注意点

divタグはWebページを構築する上で必要不可欠なタグですが、利用する際には注意点も多く存在します。

最後にdivタグを利用する際の注意点について整理して記載しておきます。

divタグを利用する際の注意点

• セマンティックな意味を持たない
  divタグはセマンティックな意味を持たないため、装飾やレイアウトのための要素として使われる。
  ※HTML5ではセマンティックな意味を持った要素が追加されており、できるだけ適切な要素を使うことが求められています。（headerタグやnavタグ、articleタグ、asideタグなど。）
• 適切なidやclassの設定を心がける
  id属性やclass属性を使うことで、CSSやJavaScriptを使ったスタイル設定や操作が可能になるものの、適切なidやclassの設定を心がける必要があります。id属性やclass属性を乱用すると、CSSやJavaScriptの処理が複雑化し、パフォーマンス低下やメンテナンス性の低下につながることがある。
• 入れ子にしすぎない
  divタグを入れ子にして使うことができるが、深すぎる入れ子になるとHTMLの構造が複雑化し、メンテナンスが困難になる。適切な深さで入れ子にすることで、HTMLの構造がわかりやすくなり、メンテナンスもしやすくなる。
• SEOに配慮する
  divタグを使いすぎると、SEOに影響が出る可能性がある。セマンティックな意味を持った適切なタグを使うことでSEO対策への配慮をする。
• 余計なdivタグを使わない
  divタグは非常に柔軟なタグであるため、レイアウトを作成するためについ使ってしまいがちですが、必要以上にdivタグを使うことは避けるべき。
  →必要最低限のdivタグを使って、シンプルでわかりやすいHTML構造を心がること。

チェックテスト