Web を作るとき（コーディングをするとき）div をよく使いますよね！今回の記事では、この div とはいったい何者なのか、どんなときに使うべきなのかなどについて、初心に帰って調べてみました。
div は何の略？
意味は？
div は、「ディヴ（ディブ）」と読みます。
division（ディヴィジョン：名詞）や divide（ディヴァイド：動詞）を略したものと考えられます。意味はいずれも「分割」とか「分割する」といった“分ける”的な意味です！
単語
division：分割、区分、部門、師団、除算（weblio）
※名詞や動詞についての微妙なニュアンスについては、本記事のテーマとはズレてくるので割愛します。。
コーディングを行い、何かのアイテムを作るとき（例えば『記事へのリンク』とか『サイドバーのプロフィール』など作るとき）にとりあえず何気なく div で囲むのではなくて“分割する”んだみたいな心持ちで div で囲むことで、なんだかちゃんとコードを書けている気がします！
“分割する”というと日本語的にはなんとなく直線のイメージですが、
ブロックで囲む行為もある意味分割していますので、この辺は柔軟なイメージで飲み込むのがいいですねぇ。
どうしても解せないという人は、division は「区分」や「部門」という意味で覚えてしまうとイメージしやすいような気がします。
div 要素の
セマンティックな意味は
特に無い！
div 要素自体には、実は特定の意味は無いようです。
コンテンツなどをグループ化する汎用的なコンテナとして使用されることが多いです。あえて意味をつけるのであれば「汎用的なブロック要素」という感じがしっくりくるのかなぁと思います。
汎用的ということは、
他の汎用的ではないブロック要素があるの？
それは何？
ってことになりますが、例えば header 要素や footer 要素、nav 要素なんかがそれにあたるかと思います。
なので、
ヘッダーやフッターなど、意味を持たせることができるブロックには div ではなく、header 要素や footer 要素のようなセマンティックな意味ある要素で囲ってあげるのが、より良いコードと言えると思います。何も考えずにとりあえず何でもかんでも div で囲ってしまうのはイマイチっですね。
究極的には div の無いコードが望ましいと言えるのでしょうか？！
div 要素の display プロパティは
block
display: block;
div 要素の display プロパティは、
初期値としてdisplay: block;が設定されています。
つまり div は「ブロックレベル要素」ということですね！
ただし最近では、（HTML5 では、）「コンテンツ・モデル」という概念が主流で、「ブロックレベル要素」と「インライン要素」の概念は廃止されたみたいです。でも今回はこちらはいったんスルーします。気になる方はググってみてください！
要は、div は、
display: block;
ってこと！
div 要素の使いどころ
div 要素の使いどころは、ここだ！ということは特になく、あらゆるコンテンツで汎用的に使える要素です。
様々な要素でできているコンテンツをひとまとめに「グループ化するとき」なんかによく使います。そしてもちろん“グループ化されたコンテンツ”をさらにグループ化したりもしますね。
コンテンツをグループ化するのに囲った div を“ラッパー”や“インナー”などとして、任意の class 名をつけて CSS でスタイリングしたりするテクニックはよく見かけます。
確かにセマンティック的には意味は無いですが、それをいいことに div に div を重ねた煩雑なコードにしてしまうと、今度は逆に人間にとって見づらくなりますし、何よりコーディング時の間違いにもつながります！
div 要素内に直接テキストは入れない
HTML で多用する div 要素ですが、直接テキストを入れるという使い方は基本的にしません。
もしテキストを入れる場合には、div 内に例えば p 要素や h1~6 要素などで囲ったテキストを入れるのが良いでしょう。というのも div 要素そのものには意味は無いので、マークアップ言語的によろしくない文法になっているという感じだと思います。
表示自体は問題なく表示されるので、私たち人間にが見る分には問題なさそうですが、クローラーのようなロボット的にはイマイチな状態で、無意味なテキストがあるというのは SEO の観点からも望ましくありません。
div 要素の高さが微妙にズレるときは
line-height を見たら解決するかも？
これは私の経験からの内容なのですが、
例えば div 要素で囲ったコンテンツの高さが想定通りにならないときってありませんか？特に height を指定せずに内包する要素に依存する可変する構造にしたときなど、たまにズレる気がします。
カチッと height で固定してしまえば普通に揃うのですが、、何でもかんでもレスポンシブにしたい病を患っている人にとっては許しがたきズレですよね！
一つの解決策として、
line-height の値を見てみてはいかがでしょうか！
See the Pen DIV_line-height by MATSUDAI (@matsudai) on CodePen.
div 要素の line-height の初期値はブラウザに依存した値が設定されますので、調整してあげると解決するかもしれません！
まとめ
div というのは、HTML のコードで、コンテンツをグループ化する目的で使用する汎用的な要素ということですね。セマンティック的には特に意味がなく、柔軟に使用できる反面、むやみやたらに使ってしまうとイマイチなコードになってしまうので、上手に使いたいですね。
出典
weblio. 「divisionとは 意味・読み方・使い方」. https://ejje.weblio.jp/content/division, 2024年2月15日閲覧。
