HTMLのdivタグとは｜意味や使い方のまとめ

catnose · 2020/02/27 に最終更新

HTMLの<div>ディブタグは、とくに意味を持たないタグです。おもにデザインやレイアウトのために使います。このページでは<div>の基本的な使い方や、<span>タグとの違いなどについて解説します。

✍️「div」は、division（ディビジョン=分割の意味）の略です。読み方は「ディブ」となります。

このページの目次

divタグの基本
- divタグには「意味がない」
- divタグの使いどころ
divとspanの違い
divタグの使い方
CSSでdiv要素の配置を変える

divタグの基本

divタグには「意味がない」

基本的に1つ1つのHTMLタグは「意味」や「役割」を持っています。しかし、<div>タグと<span>タグだけは意味を持ちません。

タグ	意味・役割	解説ページ
`<p>`	段落	pタグとは
`<h1>`	見出し	h1-h6タグとは
`<li>`	リスト	liタグとは
`<a>`	リンク	aタグとは
`<table>`	表	tableタグとは
`<div>`	意味はない😸	このページ
`<span>`	意味はない😸	spanタグとは

divタグの使いどころ

ではいつ<div>や<span>を使うのかというと、CSSをあてて、デザインやレイアウトを変えたいときに使います。「意味を持たない」ため、どの場所でも使いやすいのです。

<div class="example">
  <h2>ようこそ!</h2>
  <p>このサイトの名前は…</p>
</div>

.example {
  padding: 10px;/* 内側の余白 */
  color: #FFF; /* 文字色 */
  background-color: #529fff; /* 背景色 */
}

👆たとえばこの例では、見出しや段落を囲む<div>に対してCSSで「背景を青にして、文字を白にする」という指定をしています。<div>は好きなところに、好きな数だけ使えるため、デサインやレイアウトを変更するときに大活躍します。

divとspanの違い

<div>と<span>はどちらも「意味を持たない」タグです。HTML初心者の方が混乱するのがこの2つの違いです。

違いはdisplayプロパティの値

一言でいうと、この2つは「displayというCSSプロパティの値が違う」ということになります。

😺displayは「要素をどのように配置するか（前後に改行を入れるか、中身を横に並べるかどうか…など）」を決めるプロパティです。

divタグは「display: block」

<div>タグには、あらかじめdisplay: blockというCSSがあてられています。

✍️display: blockの特徴

前後に改行が入る
幅・高さ・余白を指定できる
中に何でも入れられる

spanタグは「display: inline」

<span>タグには、あらかじめdisplay: inlineというCSSがあてられています。

✍️display: inlineの特徴

前後に改行が入らない
（基本的に）幅・高さ・余白を自由に指定できない
（基本的に）同じくdisplay: inlineの要素しか中に入れられない

👆違いはdisplayの値だけなので、たとえば<span>に対してCSSでdisplay: blockをあてると<div>と全く同じ働きになります（もちろん混乱するのでやらないようにしましょう）。

divはブロックを作るイメージ

<div>タグには、あらかじめdisplay: blockというCSSがあてられています。display: blockがあてられた要素はブロックを作り、前後には改行が入るようになります。

Hello!
<div class="example">Code Kitchenへ</div>
ようこそ

.example {
  background-color: #529fff;
}

👆青に塗られた部分が<div>要素が作るブロックを表しています。<div>の前後に改行が入っていることが分かると思います。また、<div>はデフォルトでは横に広がります。

例外もあります（たとえば、divの親要素がdisplay: flexのときには要素が横並びになります)

spanは文章の中で使うイメージ

一方の<span>タグには、あらかじめdisplay: inlineというCSSがあてられています。display: inlineの要素の前後には改行が入りません。display: inlineの要素はおもに文章の中の一部として扱われます。

Hello!
<span class="example">Code Kitchenへ</span>
ようこそ

.example {
  background-color: #529fff;
}

👆青色の部分が<span>です。前後に改行が入っていませんね。また、幅も横に広がるのではなく、テキストの長さだけの幅になっています。そのため、<span>は文章の一部分の色を変えたり、線を引いたりするときにピッタリなのです。

（従来の考え方ですが）HTMLの要素は「ブロックレベル要素」か「インライン要素」のどちらかに分類されていました。

ブロックレベル要素

「ブロックレベル要素」は、1つのブロックを作り、前後には改行が入ります（例外もありますが…）。例えば、<div>や、段落（<p>）、見出し（<h1>-<h6>）、引用（<blockquote>）などが「ブロックレベル要素」にあたります。

インライン要素

「インライン要素」は、文章の一部のようなイメージで扱われ、前後に改行は入りません。例えば、<span>や、リンク（<a>）などが「インライン要素」にあたります。

ちなみに「ブロックレベル要素」と「インライン要素」の区分はHTML5〜別の考え方に置き換えられました。しかし、考え方が置き換わっただけで、段落や見出しの前後に改行が入ることには変わりはありません。

spanの中にdivを入れない

基本的にdisplay: inlineの要素内に入れるのは、display: inlineの要素です。inlineの要素内に、blockの要素を入れないようにしましょう。

🙅よくない

<span>
  <div>~</div>
</span>

👆つまり<span>の中に<div>は入れないようにしましょう。これをやってしまうとイメージ通りに表示されないことがあります。

正しい使い方の例

display: inlineとblockのネストイメージ

イメージ的にはこんな感じです。display: blockの要素の中には何でも入れられます。display: inline要素も、display: block要素の中に入ることになります。

例えば<div>の中に<p>を入れて、その中で<span>を使ったりするわけですね。

divタグの使い方

CSSでスタイルをあてるときにはclassを使う

<div>に対してCSSでスタイルを適用するときには、クラスを指定するようにします。

HTML divにクラスを指定

<div class="my-box"></div>

👆たとえばclass="my-box"とした場合…

<div class="my-box">
  <h2>ようこそ!</h2>
  <p>このサイトの名前は…</p>
</div>

.my-box {
  padding: 10px; /* 内側の余白 */
  border: solid 2px silver; /* 枠線 */
}

👆CSSでは.my-box { ~ }という形でスタイルを指定します。

✍️classの代わりにidを使うこともできますが、基本的にCSSをあてる目的ではclassだけを使うのが良いとされています。

divは何回使っても良い

<div>や<span>は何回でも使うことができます。ただし、あまり入れ子にしすぎるとHTMLの可読性が低下する（読みづらくなる）ので注意しましょう。

できる限り意味のあるタグを使う

<div>ばかりを使ってWebページを構築することもできます。しかし「段落に相当する文章は<p>タグで囲む」「メニューは<nav>タグで囲む」のように、できる限り意味を持つタグを優先して使いましょう。

✍️意味を持つタグの例

ヘッダーならheaderタグ
フッターならfooterタグ
主要なコンテンツならmainタグ
補足的なコンテンツならasideタグ
1つのセクションならsectionタグ
1つの独立した記事ならarticleタグ
メニューなどのナビゲーションならnavタグ
見出しならh1-h6タグ
段落ならpタグ

👆これらのタグは<div>でも代用できますが、意味を持つタグを使うことには以下のようなメリットがあります。

意味を持つタグを使うと…

ロボットが内容を認識しやすい 検索エンジンなどのロボット（プログラム）がページの内容を読み解くときのヒントになる
アクセシビリティの向上 障碍者向けのスクリーンリーダーなどで内容を読み解くときのヒントになる
保守性の向上 自分自身が後からソースコードを触るときに構成を理解しやすくなる

CSSでdiv要素の配置を変える

ここからはちょっとだけ具体的な例を紹介します。参考程度に読み流していただければと思います。

<div class="my-box">
  中身
</div>

.my-box {
  width: 60px; /* 幅 */
  height: 60px; /* 高さ */
  color: #FFF; /* 文字色 */
  background: #529fff; /* 背景色 */
}

👆たとえば<div>の幅と高さを「60px」に指定した例です。全体的に左寄りに表示されることが分かると思います。

divを中央寄せする

<div>自体を中央寄せにしたいときは、左右のmarginの値をautoにします。

<div class="my-box">
  中身
</div>

.my-box {
  width: 60px; /* 幅 */
  height: 60px; /* 高さ */
  color: #FFF; /* 文字色 */
  background: #529fff; /* 背景色 */
  margin-left: auto; /* 🖐 */
  margin-right: auto; /* 🖐 */
}

👆margin-left: autoとmargin-right: autoにより、<div>要素が中央寄せになりました。

✍️メモ

「margin: 上下のマージン左右のマージン;」と省略して書くこともできます。この例だとmargin: 0 auto;のようになります。
<div>に限らず、display: blockの要素を中央寄せするときはこの方法が使えます。

divの中身を左右中央寄せする

<div>の中身を左右で中央寄せする場合、いくつかの方法が考えられます。

text-align: centerを指定する方法

<div class="my-box">
  中身
</div>

.my-box {
  width: 60px; /* 幅 */
  height: 60px; /* 高さ */
  color: #FFF; /* 文字色 */
  background: #529fff; /* 背景色 */
  margin: 0 auto;
  text-align: center; /* 🖐 */
}

👆中央寄せしたい<div>の中身が「テキスト」や「display: inlineの要素」の場合には、CSSでdiv要素 { text-align: center }とすればOKです。

flexを使う方法

<div class="my-box">
  中身
</div>

.my-box {
  width: 60px; /* 幅 */
  height: 60px; /* 高さ */
  color: #FFF; /* 文字色 */
  background: #529fff; /* 背景色 */
  margin: 0 auto;
  display: flex; /* 🖐 */
  justify-content: center; /* 🖐 */
}

👆<div>要素に対してdisplay: flexとjustify-content: centerを指定すると、中が何であれ左右中央に寄せることが可能です。

divの中身をど真ん中に配置する

<div class="my-box">
  中身
</div>

.my-box {
  width: 60px; /* 幅 */
  height: 60px; /* 高さ */
  color: #FFF; /* 文字色 */
  background: #529fff; /* 背景色 */
  margin: 0 auto;
  display: flex; /* 🖐 */
  justify-content: center; /* 🖐 */
  align-items: center; /* 🖐 */
}

👆<div>要素に対してdisplay: flexとjustify-content: centerとalign-items: centerの3つを指定すると、中身をど真ん中に寄せることができます。

divを横並びにする

たとえば、HTMLで次のように<div>を複数こ並べるとします。

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

.item {
  background: #e7edf3;
  text-align :center;
}

👆全体は<div class="container">に囲まれています。この中には3つの<div class="item">が含まれています。これらの3つを横並びにしたい場合はどうしたら良いのでしょうか？

flexを使うと簡単！

アイテムを囲む要素に対してdisplay: flexを指定すると、中身は横並びになります。

<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>

/* 全体を囲むdiv */
.container {
  display: flex; /* 🖐 */
  justify-content: space-between; /* 🖐 */
}
/* 中身のdiv */
.item {
  background: #e7edf3;
  text-align :center;
  width: 31%; /* 1つ1つの要素の幅 */
}

👆justify-content: space-betweenは、「要素が複数並んでいるときに均等配置する」という意味の指定になります。1つ1つのアイテムの幅は.item { width: ◯◯ }という形で指定すればOKです。

ここで紹介した方法はあくまでも一例です。CSSでのレイアウトについて書き出すとキリがないのでこのくらいで留めておくことにします。