HTMLのdivとはどんなタグ？
みなさんHTMLのdivを普段たくさん使っていますでしょうか？ちなみに「div」の読み方ですが、多くの人が「ディブ」と読んでいます。
HTMLを勉強している方は最初に見出しの役割を持つ「h1」や段落の役割を持つ「p」など文章上で役割のあるタグを勉強してきて、それについては例えば新聞や雑誌に置き換えてもイメージが湧きやすかったかと思います。
divタグの意味
divタグは特に意味を持たないタグです。divタグで囲った部分をブロックレベルの要素でグループ化することが出来ます。
一つサンプルコードでdivタグを使った例を紹介します。divで囲った箇所がブロックレベルで一つにまとまっているのが分かるかと思います。
<div>
<span>あ</span>
<span>い</span>
<span>う</span>
</div>
<div>
<span>え</span>
<span>お</span>
</div>divタグは先程のh1やpと違って、divタグは文章上の役割が特にないタグなので、現実世界の新聞や雑誌では示しづらいタグとなって、イメージがわかりにくいですよね。
しかしdivタグはHTMLで圧倒的に使われる頻度が多いタグでもあるのです！
使われることが多いdivタグ。なぜ？
しかしイメージがわかり使いdivタグですが、おそらくHTMLのタグの中で使われる頻度がTOP3には入るであろう人気です。
例えば当サイトのHTMLを見てみてもHTML中にはdivタグだらけです。
他のサイトを見ても、おそらくdivタグの使用頻度はかなり多いかと思います。
なぜdivタグの使用頻度が多いのかとですが、これは一つの考えですが、HTMLを作成する際には見出しであればh1〜h6、段落であればpと文章上の意味がはっきりしている場合はそれに適したタグを使いますよね。
一方でWEBサイトでは新聞などとは違いかなりデザインに自由度があり、「あれ？この部分文章上の意味を考えると何だっけ？」というケースが多く、それに適したタグを使うのは難しいです。
そのため、divの「意味がない」という特徴が逆説的に意味をなし、使われやすくなっているのだと思われます。
よく使われるdivタグの使い方
divタグはブロックレベル要素で、前後に改行が入るために、積み木のようにHTMLをデザインしたい場合や、とりあえず何かタグを適用したい場合にとても使い勝手がいいです。
例えば以下の例を見てみましょう。divタグだけでWEBサイトのレイアウトを組んでいます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div {
height: 100px;
text-align: center;
}
.header {
background-color: green;
}
.column-3 {
display: flex;
}
.left {
flex: 1;
background-color: yellow;
}
.main {
flex: 2;
background-color: red;
}
.right {
flex: 1;
background-color: purple;
}
.footer {
background-color: blue;
}
</style>
</head>
<body>
<div class="header">
ヘッダー
</div>
<div class="column-3">
<div class="left">
左カラム
</div>
<div class="main">
中央
</div>
<div class="right">
右側
</div>
</div>
<div class="footer">
フッター
</div>
</body>
</html>
いかがでしょうか？もちろんdivタグにもidやclassは使えますので、WEBサイト上の役割を
class名で表して、そのclassに対してCSSでデザインを適用しています。
このようにサイトのレイアウトを組みたい時に、文章上の意味を考えながらタグを使うよりも、divタグでとりあえず置いておいて、デザインを先に作っていくというやり方はとても早く出来ますし、CSS部分に集中できるため開発も素早く出来ます。
まとめ
今回はHTMLのdivタグの意味についてご紹介してきました。divタグとは何かわかっていただけましたでしょか？
divタグはWEBサイトで本当によく利用されるタグで、今回見てきたようにdivタグだけでレイアウトを組んだり、極論divタグだけでもサイトを作ることは可能です。
使い勝手が良すぎるためにdivを多用しすぎて、開発上よくないと言われるコードになることもありますが、divタグを使うことによって開発効率が格段にあがりますので、ぜひdivタグを上手く使えるようになりましょう！