divタグとは？使い方とhtmlでグループ化する方法を解説

<div>タグとは、HTMLで要素をブロックレベルでグループ化し、まとめて扱うために使用される汎用的なHTMLタグです。<div>タグで囲まれた要素は1つのブロック要素として扱われ、レイアウトの整理や他の要素との区別に使われます。

<div>タグ自体にはセマンティックな意味はありませんが、id属性やclass属性、style属性などと組み合わせて使用することで、囲んだブロック全体に対してスタイルやレイアウトの調整をおこなうことができます。

divタグの使い方は、囲みたい要素の前後に<div>と</div>を記述するだけです。

ただし、上記のようにdivタグで囲んでも、囲んだ要素はブロック要素として扱われ、前後で改行されるだけで、特に見た目の変化はありません。

レイアウトの変更やスタイリングの適用をおこなうためには、divタグに属性を追加する必要があります。

▼ divタグに追加できる属性は、以下の３つです。

それぞれの属性の追加方法について、次の項目で詳しく説明します。

divタグにスタイルを適用するには、id属性、class属性、style属性などを使用して特定のルールを指定します。いずれかの属性を使用することでレイアウトやスタイルを変更できます。

id属性は、特定の要素に一意の識別子を付けるために使用します。同じ名前は各ページ内で一度しか使えない識別子として扱われ、スタイルやJavaScriptによる操作をおこなう際に便利です。

■ divタグにid属性を付け、文字色を変更する場合の記述例

<div id="content">〇〇〇△△△□□□</div>

div#content {
  color: red; /* 文字色を赤に変更 */
}

id="content"という識別子を持つdivタグに対して、文字色を赤に変更しています。
#contentは、特定のidを指すセレクターです。

class属性は、複数の要素に同じスタイルを適用するために使用されます。ページ内で同じスタイルを複数の要素に適用したい場合に便利です。

■ divタグにclass属性を付け、文字色を変更する場合の記述例

<div class="content">〇〇〇△△△□□□</div>

div.content {
  color: red; /* 文字色を赤に変更 */
}

class="content"というクラス名を持つdivタグに対して、文字色を赤に変更しています。contentは、classを指すセレクターです。

style属性は、HTML内で直接CSSスタイルを指定する方法です。インラインでスタイルを設定するため、個別の要素にすぐにスタイルを適用できますが、複数の要素に同じスタイルを適用したい場合には適していません。

■ divタグにstyle属性を付け、文字色を変更する場合の記述例

<div style="color:red; ">
〇〇〇△△△□□□
</div>

style属性内にCSSを直接記述して、文字色を赤に変更しています。これはインラインスタイルと呼ばれ、属性を追加した要素だけ適用されます。

divタグを使用した、以下のレイアウトの記述例をご紹介します。

• 横並びのレイアウトを作る方法
• 中央にレイアウトを作る方法
• 非表示にする方法
• スクロールを実装する方法

CSSの「float」もしくは「display」プロパティを使用することで、divタグで囲まれた複数のブロック要素を横並びに配置できます。

CSSのプロパティ「float」は、縦に並んでいた要素を横並びにできるプロパティです。
「float」プロパティでdivタグで囲まれた複数のブロック要素を、横並びに配置する記述は以下の通りです。

<div class="box-container">
　<div class="box">ボックス1</div>
　<div class="box">ボックス2</div>
　<div class="box">ボックス3</div>
</div>

.box-container { 
clear: both; /* 子要素のfloatを適切に処理するためのclearfix */ 
}
 .box {
float: left; /* 左に浮かせることで横並びにする */ 
width: 30%; /* 要素の幅を指定して、横並びのレイアウトを調整 */ 
margin-right: 5px; /* 適度なスペースを確保 */
}

CSSのプロパティ「display」は、要素の表示形式を決定するプロパティです。
「display」プロパティでdivタグで囲まれた複数のブロック要素を、横並びに配置する記述は以下の通りです。

■ display: inline-block;を使用した例

<div class="content">〇〇〇</div>
<div class="content">△△△</div>
<div class="content">□□□</div>

 .content {
display: inline-block; /* インラインブロックとして表示 */
width: 30%; /* 各要素の幅を指定 */
margin-right: 5px; /* 要素間のスペースを確保 */
vertical-align: top; /* 必要に応じて垂直位置を調整 */
}

display: inline-block;を使用することで、divタグで囲まれた複数のブロック要素を横並びに表示できます。inline-blockは、要素をインラインレベルで表示しつつ、ブロック要素のように幅や高さを設定できる特性を持ちます。

■ display: flex;を使用した例【推奨】

「display: flex;」は、現在最も推奨される方法です。flexboxを使うと、要素を簡単に横並びにしたり、整列させたりすることが可能です。

<div class="content">
　　<div class="content_item">〇〇〇</div>
　　<div class="content_item">△△△</div>
　　<div class="content_item">□□□</div>
</div>

  .content {
display: flex; /* Flexboxを適用 */
justify-content: space-between; /* 要素間のスペースを均等に */
  }
  .content_item {
width: 30%; /* 要素の幅を指定 */
}

■ display: grid;を使用した例【推奨】

CSS Grid Layoutは、2次元のレイアウトを管理するために設計されており、複雑なレイアウトでも柔軟に対応できます。横並びのレイアウトも簡単に実現できます。

<div class="container">
  <div class="box">〇〇〇</div>
  <div class="box">△△△</div>
  <div class="box">□□□</div>
</div>

.container {
  display: grid; /* Grid Layoutを適用 */
  grid-template-columns: repeat(3, 1fr); /* 3つの列を均等な幅で作成 */
  gap: 10px; /* 要素間のスペースを指定 */
}

.box {
  padding: 10px;
  background-color: lightgrey;
}

HTML4では、align属性を使用して要素を中央に揃えることができましたが、HTML5ではこの属性は非推奨となり、現在はCSSを使用してスタイルを指定します。以下では、CSSを使った中央寄せの方法を紹介します。

text-align: center;を使用することで、<div>タグ内のテキストやインライン要素を中央に揃えることができます。

<div class="centered">○○○</div>

.centered {
text-align: center; /* テキストを中央揃え */
}

▼ 表示

text-alignプロパティを使って、要素内のコンテンツを左右に寄せることも可能です。

■ 右寄せの場合

<div class="right-aligned">○○○</div>

.right-aligned {
text-align: right; /* テキストを右揃え */
}

▼ 表示

■ 左寄せの場合

<div class="right-aligned">○○○</div>

.right-aligned {
text-align: left; /* テキストを左揃え */
}

▼ 表示

CSSの「visibility」または「display」プロパティを使用することで、<div>タグで囲んだ範囲を非表示にできます。

それぞれのプロパティの動作には違いがありますので、以下で詳しく説明します。

visibilityプロパティを使うと、要素は画面に表示されなくなりますが、要素自体は文書のレイアウトに残ります。そのため、要素があった場所には空白が表示されます。

<div class="content">〇〇〇</div>

.content {
visibility: hidden; /* 要素を非表示にするが、空白は残る */
}

visibility: hidden; は、要素を目に見えなくしますが、その要素のスペースは保持されます。要素自体は存在し続け画面上には見えませんが、その位置には空白が残ります。

display: none; は、要素を完全に非表示にするプロパティです。要素はDOM（ドキュメントオブジェクトモデル）上に存在するものの、画面上では一切表示されず、スペースも確保されません。要素が存在しないかのように扱われます。

<div class="content">〇〇〇</div>

.content {
display: none; /* 要素を完全に非表示にし、空白も残らない */
}

display: none; は、要素を文書の流れから完全に削除し、要素がそこに存在しないかのように扱います。要素の位置やスペースも一切表示されません。

HTMLでスクロールバーを実装するには、CSSの「overflow」プロパティを使用します。「overflow」を使うと、要素の内容が指定した領域を超えた場合に、スクロールバーを表示できます。

要素の内容が横方向に領域を超えた場合、スクロールバーを表示するには、overflow-xプロパティを使用します。また、white-space: nowrap; を指定して、内容が折り返されず横に続くようにすることが必要です。

<div class="content">〇〇〇</div>

.content {
overflow-x: auto; /* 横方向にスクロールバーを表示 */
white-space: nowrap; /* テキストを折り返さずに1行で表示 */
}

overflow-x: auto; は、横方向に内容がはみ出した場合にのみスクロールバーを表示します。white-space: nowrap; は、テキストや要素が折り返されないようにするため、内容が長い場合は横に続いて表示されます。

要素の内容が縦方向に領域を超えた場合にスクロールバーを表示するには、overflow-yプロパティを使用します。

<div class="content">〇〇〇</div>

.content {
overflow-y: auto; /* 縦方向にスクロールバーを表示 */
height: 100px; /* 高さを指定して、はみ出す部分にスクロールバーを表示 */
}

overflow-y: auto; は、縦方向に内容がはみ出した場合にのみスクロールバーを表示します。height を指定し、内容がはみ出した場合にスクロールが発生するようにします。

divタグを使用する際の注意点は以下の4つです。

1. 入れ子を深くしすぎない
2. id属性やclass属性、style属性を付けずに使用しても意味がない
3. セマンティックな要素を使わず、全てdivで作ることは避ける
4. divタグはインライン要素の中で使用できない

それぞれの注意点について詳しく解説します。

divタグを使用する際の1つ目の注意点は、入れ子を深くしすぎないことです。divタグを入れ子構造で使用することは可能ですが、入れ子を深くしてしまうと終了タグがどの開始タグに対応しているか分かりにくくなってしまいます。

入れ子の多用はできる限り避けるようにし、分かりやすい構造にすることを心掛けましょう。

divタグは、id属性やclass属性、style属性などの属性を付けずに使用しても意味がありません。何の属性も付けずに使用する場合、他のセマンティックなタグ（例：<header>、<footer>、<nav>）を使用した方が、HTMLの構造や内容の意味が明確になります。

divタグはセマンティックな意味を持たないため、すべての構造をdivタグで作ると、HTML文書の意味が曖昧になります。divはあくまで汎用的なグループ化用の要素であり、特定の意味や役割を持つ要素ではないため、文章やコンテンツの構造がGoogleや他の検索エンジンに正しく理解されない可能性があります。

<h2>、<article>、<section>などを使うことで、そのコンテンツの意味や役割が明確に伝わります。たとえば、<h2>で囲んだコンテンツは「見出し」として認識され、検索エンジンはその内容をより正確に把握できます。

divタグはブロック要素なので、<span>や<a>などのインライン要素の中に直接使用できません。ブロック要素はインライン要素内に挿入できないため、HTMLの構造が壊れてしまいます。

divタグと似たタグとして、spanタグやhタグ、pタグ、tableタグなどがあります。

それぞれのタグとdivタグの違いについて、詳しく解説します。

「spanタグ」と「divタグ」の違いは、以下の2つです。

インライン要素を指定するか、ブロック要素を指定するかです。spanタグにスタイル属性を付けるとその範囲だけが影響を受けますが、divタグにスタイル属性を付けるとdivタグで囲われたすべてが影響を受けます。

divタグではwidth・heightの指定や上下のmargin・paddingの指定が可能ですが、spanタグでは指定しても効果は反映されません。spanタグでwidthやheight、上下のmargin・paddingを指定する場合には、「display:block」を記述してブロック要素にする必要があります。

divタグと同様にブロック要素を形成するタグとして、hタグ・pタグ・tableタグがあります。

今回は、divタグについて解説しました。レイアウトの変更やスタイリングの適用、JavaScriptとの連携などさまざな用途で使用されるHTMLタグです。要素の前後に<div>と</div>を記述することで、囲った範囲をブロック要素としてまとめて扱うことができるようになります。

本記事で解説したdivタグの使い方、記述例、使用する際の注意点を参考に、divタグを活用してみましょう。