<div>で囲むと、その中身はどうなるの？
<span>との明確な違いはありますか？
こんな質問に答えつつ、HTMLでよく使われる<div>について網羅的に解説します。
初心者にも分かりやすく、できる限り図解を用いて解説するので参考にどうぞ。記事の中身でわからないことがあれば、TwitterのDMから質問も受け付けています。
Twitterと簡単な自己紹介
SEO歴：3年
プログラミング歴：3年
スポンサードサーチ
本記事のもくじ
【divタグとは】書き方と基本情報
<div>はHTMLでよく使われるタグですが、<div>で囲っただけの要素は特に意味を持ちません。
そのため、レイアウト調整のために使われることが多く、その点は他のHTMLタグと違い少しだけ特殊です。
<div>ここに要素</div>
記述ルールは一般的なHTMLタグと同じでして、開始タグ（<div>）で始めて、終了タグ（</div>）で閉じるだけです。
<div>タグの中には、別のHTMLタグを書くこともできます。
<div>
<h1>タイトル</h1>
<p>ここに本文</p>
</div>
こんな感じです。
divタグに特に意味はない
先ほど、<div>で囲っただけの要素は特に意味を持たないと言いましたが、もう少し深堀りして解説しますね。
一般的なHTMLタグの仕組み
通常、HTMLタグはそれぞれに意味を持ちます。
<h1>ここがタイトルですよ</h1>
<p>ここに本文が入りますよ</p><h1>〜〜</h1>で囲めば、そこはタイトルに。
<p>〜〜</p>で囲めば、そこは本文になります。
<h>タグ：文字を大きくし、検索エンジンにはそこがタイトルであることを伝える
<p>タグ：段落を作り、検索エンジンにはそこがパラグラフであることを伝える
<div>の仕組み
いっぽうで<div>タグは単体では意味を持たないので、要素を囲っただけでは見た目を変えることも、検索エンジンに何かを伝えることもしません。
<div>divタグで囲みましたよ</div>
<div>見た目は変わりませんよ</div><div>〜〜</div>で囲っただけでは、何も変わらない。
<div>タグ：何も変えない。何も伝えない。
こんな感じでして、<div>だけでは何も変化しないのが特徴です。
スポンサードサーチ
divタグの使い方
こんな疑問を解消するために、<div>タグの使い方を解説していきますね。
どんなときに<div>〜</div>を使うの？
<div>を使うシーンは、大きく分けて次の2通りです。
- ページ全体を構造化するとき
- 一部のデザインやレイアウトをまとめて調整するとき
1. ページ全体を構造化するとき
HTMLでウェブサイトを作っていると、コードがどんどん膨んでいきます。
どこに何があるかが分からなくなると修正にも手間取るので、ソースコードを区分分けするときに<div>を使うと便利になります。
<div class="header">
ヘッダーの中身
</div>
<div class="content">
コンテンツの中身
</div>
<div class="footer">
フッターの中身メニュー
</div>
こうしておけば、どこにどんなソースコードが書かれているのかが一目瞭然で分かりやすくなるので、バグを見つけたときなどに修正が簡単になります。
2. 一部のデザインやレイアウトをまとめて調整するとき
<div>を使えば、1箇所のデザインやレイアウトをまとめてカスタマイズするのも簡単です。
例えば、<div class="content">の部分だけを背景ブルーにしたければ、次のように指定できます。
.content {
background: blue;
}
このように、特定のclassだけをCSSでカスタマイズすることが可能になります。
divタグには属性を書くのが一般的
上記の通り、<div>は特定の区分をグルーピングするために使うのが一般的なので、属性（class, idなど）を書くことが多いです。
<div class=”〜〜”>○△□</div>
<div id=”〜〜”>○△□</div>
この機会に、classとidの使い方も覚えてしまいましょう。使い分けは簡単です。
下記の記事で詳しく解説しているので、本記事と合わせてご参照あれ。
»【classとidの使い分け】HTML・CSSの基礎知識をわかりやすく解説します
スポンサードサーチ
【divとspanの違い】ブロックかインラインか
<div>と同じ性質を持つグルーピングタグに<span>というものがあります。
両者の違いは、”ブロック要素”なのか、”インライン要素”なのか、だけ。
結論から言えば、<div>はブロック要素、<span>はインライン要素になります。これは割と大きな違いなので、しっかり覚えましょう。
ブロック要素とインライン要素の違い
ブロック要素とインライン要素の違いは大きく分けて下記のふたつ。
- 幅と高さを調整できるか
- 前後で改行されるか
<div>はブロック要素、<span>はインライン要素なので、違いは下記のようになります。
| 幅・高さの調整 | 前後の改行 | |
| ブロック要素（div） | できる | される |
| インライン要素（span） | できない | されない |
ブロック要素（<div>）は、幅と高さを調整できます。また、要素の前後で改行されるのが特徴です。
インライン要素（<span>）は、幅と高さを調整できないし、前後に改行も含まれません。
<div>と<span>は、どうやって使い分けるの？
おすすめの使い分け方は、文章の途中で要素を囲いたいか、ひとつのブロックとして独立させたいか、で分ける方法です。
ブロックとして独立させるなら、<div>が適切。文章の中で使うなら、<span>が適切です。
ブロックとして装飾する場合（divタグ）
<div>で囲みます。※実際には、このように文章の一部を<div>で囲むことはほとんどありません。ご覧のように、<div>で囲った要素の前後には強制的に改行が入ってしまうので、文章が読みづらくなってしまうからですね。
インラインで装飾する場合（spanタグ）
<span>で囲みます。※大事な部分の文字色を変更したり、下線を引いたりする場合によく使われます。文章を装飾するなら<span>を使うと覚えておけばいいでしょう。
ブロック・インライン：中に入れられるタグ
<div>と<span>に入れられるタグの種類は決まっているので、ついでに覚えておくといいと思います。
<div>には何でも入れることができるのに対し、<span>にはインライン要素しか入れられません。
| 中に入れられるタグ | |
| <div> | div, h1~h6, p, ul, ol, li, span, img, b, strong,,,,,, とにかく全部OK |
| <span> | span, a, img,,,,など |
スポンサードサーチ
まとめ：divタグで上手にグループ化しよう
本記事のまとめです。
<div>を上手に使いこなすことで、ソースコードが見やすくなったり、指定の箇所をまとめてカスタマイズできるようになります。
ウェブサイトの全体像をイメージしながら「ここはdivで囲ったほうが良さそうだな」といった感じでコードを書き続けていくと、<div>の万能性と使いやすさがもっとわかると思います。
要素を上手にグループ化して、作業効率をあげつつ、カスタマイズを楽しみましょう。
おわり。
