divで囲む意味を知りたい

Question

### 前提・実現したいこと

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

div要素で囲う意味を教えてほしいです。
div要素で囲まなくてもできるという考えでした。調べてもよくわからなかったので、どうかお願いいたします。
やはり、要所要所で変わってくるのですかね。。。
どのような場合に、div要素で囲んだほうがいいかも教えてほしいです。

エラーメッセージ

該当のソースコード

/*誤ったコード*/
<div class = "header">
 <div class = "box">
  <img src = "...">
  <a href = "#" class = "login">ログイン</a>
 </div>
</div>
/*Progateでの答え*/
<header>
    <div class="container">
      <div class="header-left">
        <img class="logo" src="...">
      </div>
      <div class="header-right">
        <a href="#" class="login">ログイン</a>
      </div>
    </div>
  </header>
```ここに言語名を入力
HTML

試したこと

Webサイトにて、div要素の意味を改めて調べてみましたがどうもしっくりくるものがなかったです。
インライン要素を囲まなくてもできるのでは？と思ってしまいます。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。
Progateの道場中級編の2でつまずいています。
boxとcontainerは一緒のものです。
...には、urlが入ります。

Comments

[kai0310]

コードは画像としてではなく、テキストでMarkDownを使用して記載してください。

[shokotin]

わかりました。すみませんでした。

[miyabi_pudding]

実装したいデザイン画面がわからないとなんとも言えません。
そのデザインいかんで、divを使う必要が発生します。

Answer 1

Progateってここで時々見ますが私はよくしらないし思想とかもさっぱりわからないのですが私は「マークアップに正解はない」と思っているので
ぶっちゃけ期待した結果ができればいいと思っています。

そこをdivで囲う意味は、Progateの正解とやらのコードを書いた人しか
わからないかなと。タグの使用意図をすべて書いてあるなら…と思ったのですが
質問者がここに来て質問しに来るということは、ないということでしょうし
ない以上は想像することしかできません。

/誤ったコード/となっていますが私はそうは思いません。
Progateと違うだけでやれることやれてれば正解だと思います。
特にdivの意味付けなんて個人の裁量によるものがほとんどかなと。

横並びだけでもtableがfloatになったりinline-blockになったりflexになったり
gridになったりする以上マークアップの形もある程度ころころ変わる
もんだと思います。「Progateがそうしていたから」っていう感じで
divを増やすのではなく自分でしっかり意味付けしたタグであれば
それはそれで正解かなと思いますね。

質問とはかけ離れた話になってしまいました笑

Answer 2

ご提示のHTMLのように内部に持つ要素がひとつだけであれば、基本的に外側のdivは不要だと思います。

ただし、JavaScriptで要素を追加する、::before疑似要素を使うなど、HTMLにない要素を追加するのであれば、外側にdivが必要になってくるでしょう。
また、img要素は置換要素というものであるため、内部にCSSを効かせることができず、そういう場合にも外側にdivが必要になります。

Comments

[Lhankor_Mhy]

低評価をした方、理由を教えていただけませんか？

Answer 3

一般的に、dicタグ（ディビジョンタグ）である範囲のある要素（特定のタグやname属性が同じ要素）の装飾や振る舞い（色やセンタリング指定など）を統一したいときに囲んでおけば、飛び飛びに要素が散らばっていても見落とす心配がありません。
また、逆にdivで指定した色とは違う色をあえて狭い範囲では指定したいようなときに、内側のdivで指定すれば、外側に影響を与えません。
そのような利点があります。
pタグ（パラグラフタグ）で囲むと上下に隙間が空いてしまうので、改行や隙間が必要ないときはdivタグがふさわしいです。

Comments

[shokotin]

コメントありがとうございます！
後で色々付け加えるときがある場合は、imgやa要素などにとりあえずdiv要素で囲むといいのでしょうか？
答えていただけると幸いです。

[seastar3]

複数のimgタグやaタグに太字指定やセンタリングなどの共通の装飾を施すとき、そうします。
一つのタグに色々と属性を付け加えるのなら、直接指定した方が開発しやすいこともあるでしょう。

Answer 4

スタイルシートの定義「header-left」「header-right」が判らないのではっきりしませんが、
誤ったコードの場合、画面の幅を狭くすると「画像」と「ログイン」が折り返されて表示されませんか？

Comments

[shokotin]

コメントありがとうございます！
header-left,header-rightは、Progateが指定していたdiv要素のクラス名です。
div要素が加わっているみたいです。
私は、imgやa要素単体で行けると思ったんですが、div要素で囲んでいたのでその意味合いが分からないので、質問させていただきました。

[kuma_kuma_]

>div要素のクラス名です。
スタイルシートの指定(stylesheet.css)に「container」「logo」「login」「header-left」「header-right」の定義があると思います。
スタイルシートには形や色やフォントなどの情報を登録しておいて一つの名前でまとめておきます。
(この場合「header-left」「header-right」等)
要素にはclassでその名前を指定すればスタイルシートで定義された内容が適応されます。
このスタイルシートの情報がないと推測でしか書くことができません。

今回の場合ですとdiv要素ですので使用する場合大体表示位置を決めるのに使用します。
理由としてはdisplayがblockの為
・縦横サイズが指定できる。
・位置が指定できる。
などがあります。

各タグにはdisplayプロパティがあってimgやa要素などで違います。
細かい事は下記URLで
https://saruwakakun.com/html-css/basic/display

なおdisplay自体変更することも可能ですのでimgやa要素単体をdisplay:blockにすれば
div要素を使わないでも可能でしょうが、分かりやすくdiv要素を使う事が多いです。