【HTML div】divタグとは？使い方を基礎から徹底解説｜HTML＆CSS入門
「<div>タグとは何か？」と質問されたらはっきりと答えられる自信はありますか？
本記事では、<div>タグの意味から始まり、使い方、classとidの違いなどにも解説します。
<div>タグの使い方を解説する際には、HTML&CSSのコードを用いて解説します。
コピペで動かせるので、実際に自分で手を動かしてみてください。
<div>タグWebサイトのレイアウトを決定する際に必須のタグです。しっかりと学びましょう！
HTMLのタグについて知りたい方はコチラの記事を参考にしてください。
エンジニアメンター
divタグ – 囲んだ要素をグループ化するタグ
HTMLには、段落を表す<p>タグや見出しを表す<h1>タグなど数多くのタグがあります。
これらのタグの一つである<div>タグは、他のタグとは違い<div>タグ単体では意味を持ちません。
しかし、<div>タグは囲んだ要素をグループ化する役割を持ちます。
<div>タグはHTMLの各要素をグループ化することで、Webサイトのレイアウトを構成する際に使用したりもするので、非常に重要なタグの一つとなっています。
zrWebサイトのレイアウトを構成する際に<div>タグを使う、といきなり説明されてもイメージがしにくいでしょう。
そこで、こちらのサイトを例にとって説明したいと思います。
一般的なWebサイトの一つですが、HTMLでこのページを書く際には<div>タグを使って以下のようなグループに分けて作業をします。
<div>タグのclass属性に名前をつけることで、それぞれのグループにグループ名をつけることが可能です。
（詳しい使い方は次節以降で解説するので、今は読み飛ばしてもらって構いません。）
上の例では、header, main-visual, four-generationのように3つのグループに分けています。
このようなグループ分けによりコードが書きやすくなったり、CSSでデザインをしやすくなるというメリットがあります。
さらに、大枠のレイアウトを作るだけではなく、細部のデザインも<div>タグごとにグループに区切って行います。
同じサイトから具体例を紹介します。
ここからはGoogleChromeのデベロッパツールを使用します。
Chromeで開いたページ上で右クリックし、［検証］を選択 。
もしくは、ショートカットキーで
Mac：command⌘ + option + I
Windows：F12
で開くことができます。
Chromeをお使いの方は、ぜひお手元の環境でも試してみて下さい！
実際にデベロッパツールを使用すると以下のような画面が得られます。
（左側が普段表示されているブラウザでの表示で、右側が対応するHTMLです。）
サイト上部のメニューバーがどのようなHTMLコードで記述されているかを確認してみましょう。
メニューバーを構成するHTMLを赤く着色しています。
更に、メニューバーとしてグループ化した枠の中に個々のメニューを表すコード書いていることを確認して見ましょう。
先程の赤枠の中に黄色で着色してある部分が、メニューを表すコードです。
バーの右側部分に「無料相談をしてみる」というリンクがあります。
この部分を示す<a>タグで記述されたコードが、下の図の赤枠のなかで青で着色された部分のコードです。
これも、メニューバーを示す<div>タグの中で書かれていることを確認して下さい。
細部のデザインも<div>タグを使用すれば、グループ化して効率的にコードを書けるということが確認できました。
これから、<div>タグの使い方を実際にHTMLコードを見せながら丁寧に説明していきます。
コードはコピペで動くので、ぜひご自分のパソコンでも実行しながら記事を読んでみて下さい。
もしdivタグについてエンジニアの方々に質問できる環境が欲しければ、我々が運営するプログラミングスクール「DMM WEBCAMP」への参加も考えてみましょう!
divタグの使い方
<div>タグを使ってグループ化する際に抑えておきたいポイントはたったの2つです。
- divタグでグループ化したい要素を囲む
- classを使ってグループに名前を付ける
あとは、グループ化した要素にCSSで自分好みのデザインを施すだけです。
実際に上の2ステップを再現したHTMLのコードで、<div>タグの使い方を見ていきましょう。
具体例で学ぶdivタグの使い方
こちらがHTMLのコードです。
green, yellow, redというテキストそれぞれdivタグで囲み、classを用いて「Green」「Yellow」「Red」というグループ名を付けました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプル</title>
</head>
<body>
<div id="Green">
green
</div>
<div id="Yellow">
yellow
</div>
<div id="Red">
red
</div>
</body>
</html>
ブラウザ上での表示画面
これでもグループ化はできています。しかし、これではわかりにくいでしょう。
そこで、それぞれのグループにCSSで幅（width）と高さ（height）とグループ名が対応する色と同じ背景色を与えてみましょう。
.Green{
width: 100%;
height: 100px;
background-color: green;
}
.Yellow{
width: 100%;
height: 100px;
background-color: yellow;
}
.Red{
width: 100%;
height: 100px;
background-color: red;
}
ブラウザ上での表示画面
<div>タグによるグループ化が視覚的にイメージしやすくなったのではないしょうか。
（CSSコードは<div>タグでグループ化した領域の高さを100pxにし、幅を画面いっぱいに広いげるという意味を持ちます。）
<div>タグはこのグループ化を用いて、Webページのレイアウトを構成する際にも使用されます。
繰り返しになりますが、HTML&CSSにおいて非常に大きな役割を持つ重要なタグの一つです。
<div>タグの使い方をある程度理解した後は、CSSを勉強ことをオススメします。
HTMLだけでは色がなく、味気のないWebページになってしまいます。
CSSを勉強するときに役立つ記事を貼っておくので、気になる方はぜひ読んでみてください。
【初心者向け】CSS（スタイルシート）基本の書き方を５ステップで解説
align属性をしてして要素を左右に寄せる方法
divタグでグループ化した要素はalignという属性を指定することで、囲んだ要素を左右や中央に寄せたりすることが出来ます。
先ほど紹介したコードを使って、3つのテキスト「green」「yellow」「red」をそれぞれ左・中央・右に寄せてみましょう。
CSS「text-align」を理解【効かない場合の対処方法】
<div class="Green" align="left"> green </div> <div class="Yellow" align="center"> yellow </div> <div class="Red" align="right"> red </div>
ブラウザ上での表示画面
classとidの使い方
divタグで囲んだ要素にグループ名を与える方法は2つあります。
- classによる命名
- idによる命名
classによる命名の仕方は間<div>タグの使い方で説明しているので割愛します。
idによる命名の仕方
idによる命名もclassとほとんど変わらないので、理解しやすいと思います。
先ほど掲載したコードではclassを用いてグループ名をつけていますが、これをidで命名しているHTMLのコードがこちらになります。
<div id="Green"> green </div> <div id="Yellow"> yellow </div> <div id="Red"> red </div>
始めのHTMLファイル（sample.html）の各<div>タグ内のclassをidに変更しているだけです。
次にCSSのコードがこちらになります。
#Green{
width: 100%;
height: 100px;
background-color: green;
}
#Yellow{
width: 100%;
height: 100px;
background-color: yellow;
}
#Red{
width: 100%;
height: 100px;
background-color: red;
}
classで命名したグループはドット（.）で参照してましたが、idで命名したグループはシャープ（#）参照します。（CSSの変更点もこれだけです。）
ブラウザ上で表示される結果は全く変わらないので掲載しません。
（コピペで動くので気になる方はご自分のPCで実行してみて下さい。）
classとidの違い
ここからは今までの内容より少しだけ難しくなってきますが、丁寧に解説するので安心してついてきてください。
これまでの説明ではまるでclassとidは同じもののように思えてしまいます。
しかし、それは誤りでclassとidは根本的な違いがあります。
W3Cが提供しているHTMLの仕様書ではclassとidは以下のように説明されています。（平易な日本語に訳しています。）
class：要素にグループ名を与える。複数の要素に同じclass名をつけることが可能。
（複数のグループ名を与えるときはグループ名をスペースで区切ぎる。）
id ：要素に名前を付ける。この名前は文章の中で一意（唯一無二）であり、重複はしてはいけない。
＊）W3C・・・「World Wide Web Consortium」の略。Web技術の標準化を行う非営利団体。
しかし、一度登場するだけか/ 複数回登場するかという点だけではclassとidの違いを説明するには不十分です。
まずは、classとidそれぞれの語源を把握しましょう。
class・・・分類、種類
id(identity)・・・個性、独自性、身元
以上の点を踏まえて、次の様にclassとidの命名の一例を示します。
<div class="animals dog">
<div id="puchi">プチ</div>
<div id="pechi">ぺチ</div>
<div id="pochi">ポチ</div>
</div>
<div class="animals cat">
<div id="nyan">ニャン</div>
<div id="myu">ミュウ</div>
<div id="myon">ミョン</div>
</div>
<div class="animals hamster">
<div id="hamu-kichi">ハム吉</div>
<div id="hamu-zou">ハム蔵</div>
<div id="hamu-tarou">ハム太郎</div>
</div>
animals（動物）とcat（猫）、dog（犬）、hamster（ハムスター）はどれもグループ名として扱えるのでclass、「ポチ」「ニャン」「ハム吉」などはそれぞれの固有の名前を示しているのでidで管理しています。
いま、それぞれの包含関係は上の図のようになっています。
枠で囲えるものはclass、点で表すものはidで命名するという考え方でも分かりやすいかもしれません。
しかし、classとidの違いを厳密にこだわる必要はないです。
特に、HTML＆CSSを学び始めたような入門者の方や勉強のために個人で書くだけならそこまでこだわる必要はありません
上の図でいうと何を枠ととらえ、何を点ととらえるかは状況や人によって違います。
例えばcreature（生き物）、animals（動物）、human（人間）をグループとみなした場合には、dog（犬）やcat（猫）を点とみなすことが可能になります。
考えるときりがないので、2つの使い分けについては開発チームごとに独自の基準を設けたりします。
これまでの解説を一通り理解出来たら、下の表だけは頭に入れて記事を読み進めてしまいましょう。とてもシンプルです。
| 複数命名 | 重複命名 | |
|---|---|---|
| class | 〇 | 〇 |
| id | × | × |
「複数命名」というのは、class属性に2つの名前を与えることを表します。
「重複命名」というのは、異なる要素に同一の名前を与えることを表します。
【HTML初心者入門】classの意味は？idとの違いは？使い方も解説！
divとspanの違い – ブロック要素とインライン要素
<span>タグも<div>タグと同じように、このタグ単体では意味を持ちません。
<span>要素</span> というようにスタイルを適応したい要素をタグで囲んで使います。
以上の点から、<div>タグと<span>タグはよく似ているので混同することが多いです。
<div>タグと<span>タグの主な違いは以下の2点です。
- <div>タグで囲んだ要素は前後に改行が入るが、<span>タグでは入らない
- <div>タグで囲んだ要素はCSSで幅（width）や高さ（height）が調節できるが、<span>タグではできない
どうしてこのような違いが生まれるのでしょうか？
それは、<div>タグで囲んだ要素はブロック要素であることに対し、<span>タグで囲んだ要素はインライン要素であるという違いがあるからです。
（少し難しく言うと、CSSのdisplayプロパティがblockであるかinlineであるかという違いがあります。）
ブロック要素は前後に改行が入り、幅や高さを調節することができます。
インライン要素は改行されず、幅や幅や高さを調節することができません。
ブロック要素とインライン要素、CSSのdisplayプロパティについて詳しく知りたい方はこちらの記事を参考にしてみて下さい。
【要素理解がカギになる】CSSのdisplayをマスター
spanタグについて使い方などを詳しく知りたい方はこちらの記事をオススメします。
HTML｜spanの使い方【初心者必見！基本から応用までを解説】
【参考】<section>タグと<article>タグ
冒頭では、<div>タグを「囲んだ要素をグループ化するタグという説明をしました。
これから紹介する<section>タグと<article>タグも「グループ化」という点では<div>タグと似ています。
<div>タグを理解するための必須項目ではないので、ここまで読み進めて少し疲れたという方は読み飛ばしてもらっても構いません。
<section>タグ
<section>タグは意味的につながりのある見出しをグループ化するときに使います。
意味的につながりのある見出しをグループ化する事ができます。
<article>タグ
<article>タグは、サイトのコンテンツで独立しているものをくくる際に使用します。
<article>タグを使用する際の判断基準は、<article>タグで囲んだ要素が独立してコンテンツとして成立するかどうかです。
<div>, <section>, <article>タグの使い方まとめ
今までの解説を振り返って、<div>タグ・<section>タグ・<article>タグの3つの使い方を簡易的にまとめておきます。
- <div>タグ：class名を用いてグループ化し、Webページのレイアウトを構成する
- <section>タグ：文書の中でつながりのある見出しをまとめ>
- <article>タグ：文書の中で独立しているコンテンツを囲む
まとめ
最後に、<div>タグを理解するためのポイントをまとめてみましょう。
- <div>タグは要素を囲んでグループ化する
- グループ化した要素にclass名で名前を付ける
- 記事の中で一意に定まる唯一無二のものにはidで名前を付ける
- <div>タグは主にWebページのレイアウトを決める際などに使う
この4点を抑えておけば<div>タグを理解したといっても良いでしょう。お疲れさまでした！
なお、今回読んでいただいたような知識をDMM WEBCAMPでは短期間で効率的に学ぶことができます。
ぜひご利用ください。
