この記事では「HTMLのdivタグ」について解説します。
Webサイトを制作する際に、最も多く使われるタグの一つがdivタグです。divタグは非常に汎用性が高く、何回でも使える便利なタグです。この記事はdivタグについて深堀りした内容になっています。Web制作に欠かせないdivタグについて、一緒に学習していきましょう。
- HTMLのdivタグの使い方と基礎知識
プログラミング学習でこのような経験はありませんか？
- 目標に向けて何を学べば良いかわからない
- 調べても解決策が見つからない
- 現場レベルのスキルが身につくのか不安
これらの悩みは、学習環境を整えることで全て解決することができます。
ZeroPlus Gateでは、30日間無料で最適な学習環境を提供しています。
- なんでも相談できる専属メンター
- いつでも技術相談ができるプロ講師
- 元IT企業CTO監修のカリキュラム
条件なしでこのレベルの環境を無料で提供しているのはZeroPlus Gateだけです。
ただし、無料サービスの提供には参加者の数に制限があります。
少しでも興味がある方は、以下のリンクからサービスの詳細をご覧ください。
HTMLのdivタグとは
divタグは、単体では意味を持たないタグです。divタグで囲まれた要素はブロック要素としてグルーピング（グループ化）されます。
divタグの名前由来は、divided（ディバイデッド）の単語が由来となっています。（dividedは、「分けられた、別れた、分配された」という意味です。の意」）
基本書式
<div></div>
<!-- クラス属性を付与する場合 -->
<div class=”class_name”></div>
<!-- id属性を付与する場合 -->
<div id=”id_name”></div>divタグは単体で使用することができます。また、class属性やid属性などを付与してCSSでスタイルを適用することができます。
<div></div>
<div class="box"></div>
<div id="id"></div>
<div style="background: red;"></div>div {
width: 300px;
height: 300px;
background: lightcoral;
}
.box {
background: orange;
}
#id {
background: blue;
}出力結果
See the Pen html-div-基本 by ZeroPlus (@zeroplus-programming) on CodePen.
divタグはclass属性やid属性の他にも、htmlファイル上のstyle属性を使用してスタイルを適用することができます。
divタグはグルーピングできる
divタグの大きな特徴は、divタグ自体が「意味を持たない」ので、どこでも使えるという点です。
見出しやインライン要素などをdivタグで囲ってグルーピングして、CSSでまとめてスタイルを適用することができます。さらにdivタグは意味を持たないため、好きな部分で好きな数だけ使うことができます。
例えば次のHTMLとCSSでは、big-boxクラスが付与されたdivタグの中に、pタグやboxクラスの要素がグルーピングされています。
<div class="bigbox">
<p>テキストが入ります</p>
<div class="box"></div>
</div>.bigbox {
width: 200px;
height: 200px;
background: orange;
}
.box {
width: 100px;
height: 100px;
background: blue;
margin: auto;
}出力結果
See the Pen html-div-グルーピング by ZeroPlus (@zeroplus-programming) on CodePen.
このようにdivタグは、divタグに囲まれた要素をグルーピングすることができます。
divタグとspanタグの違い：ブロック要素とインライン要素
divタグはspanタグ同様に、タグ自体に意味を持ちません。そしてdivタグとspanタグはどちらも、何回でも使うことができます。
ではこの2つの違いは何でしょうか？
それは、displayプロパティの値の違いにあります。
divタグはブロック要素で、spanタグはインライン要素です。
divタグの中にspanタグを記述することはできますが、spanタグの中にdivタグを入れることは基本的にありません。
<div class="box">
<span class="span">インライン要素</span>
</div>.box {
width: 200px;
height: 200px;
background: orange;
display: flex;
}
.span {
width: 120px;
background: blue;
margin: auto;
}出力結果
See the Pen div-span by ZeroPlus (@zeroplus-programming) on CodePen.
イメージ的には、ブロック要素は箱のイメージで、インライン要素はテキストのような小さなまとまりのイメージです。
ブロック要素とインライン要素の違いについては、下記の記事で詳しく解説しています。
divタグの中で使えるタグ
divタグは汎用性が非常に高く、基本的になんでも入れることができます。同じdivタグに入った要素はグルーピングされます。
divタグでグルーピングできるものdivタグ（divタグの中にdivタグ)、pタグ、h1~h6タグ、ulタグ、liタグ、olタグ、spanタグ、
imgタグ、brタグ、aタグ....など
逆にspanタグの場合は、グルーピングできるものが限られます。
spanタグでグルーピングできるもの
spanタグ、aタグ、imgタグなど
まとめ
divタグについて解説しました。divタグは普段何気なく使っていますが、突き詰めると汎用性が非常に高い便利なタグであることがわかります。インライン要素の中で使うことがないことには注意してください。
HTMLには様々なタグの種類があり、タグ一つでも覚えることがたくさんあります。少しずつ学習を進めていきましょう。
Web制作は、その他にも学ぶべき知識が数多くあります。
Web制作初学者がWeb制作を学習するにあたって、押さえておくべき知識・技術は「Web制作学習ロードマップ」の記事にまとめています。どこまで勉強すればいいか分からない、次はどんなスキルを勉強すればいいか分からない、という方はぜひ参考にしてみてください！
HTMLのdivタグまとめ
- divタグ自体は、特に意味を持たないタグ
- class属性やid属性を付与することができる
- divタグはブロック要素
- インライン要素の中にブロック要素は基本的に入れることはない
