divってなに？HTMLの”見えない箱”を優しく解説！

webページを作っていると、よく出てくるタグ「div」。でも、「これって一体何？」と思ったことありませんか？
最初にHTMLを学び始めたとき、私も「divって意味がない箱？」と戸惑いました。けれど、実はこの「div」こそ、webページを整理したり、デザインを当てたりするための、とっても大事な存在なんです！

divとは

webをつくるとき、いろんな文字や画像をきれいに並べたり、グループにまとめたりする必要があります。
ここで活躍するのが「div」です。
これを一言で言うと、「見えないお弁当箱」なんです。
たとえば、お弁当の中に
・卵焼き
・ウィンナー
・ブロッコリー
・ハンバーグ
を入れておかずだけ（一つのまとまり）のお弁当ができました！

htmlコードで書くと

web表示させるとこのように表示されますが、

実はこのようにひとまとまりのグループができています。

divを使う理由

「囲むだけなら、なくて良いのでは？」と思うかもしれません。でも。divにはとても大切な役割があります。

1 見た目をまとめて整えるため

divで囲うと、まとめてデザイン（色・余白・形）をつけられます！

2 レイアウトを整えるときに便利

複数の要素を横に並べたり、中央に寄せたりするとき、divがあると、flexboxなどのレイアウト手法を使いやすくなリます。　　　　＊flexboxについては次回学習します。

おかず要素の上にご飯グループを作ります。

ご飯要素とおかず要素ができました。

横並びにするには一つの箱に入れなければならないので、divを追加してクラス名コンテナ（container）を作り、ご飯要素とおかず要素をコンテナの中に入れてあげます。

CSSでご飯要素にも色をつけて分かりやすくします。

ご飯要素にも色がついたので分かりやすくなりました。

今は、ご飯が上、おかずが下に縦に並んでいますが、横並びにしてみましょう！

CSSでcontainerの中の要素を横並びにする命令が　display:flex　です。

まとめ

・divはwebページで使う「透明なお弁当箱」
・要素をまとめて、デザインやレイアウトをしやすくする

次回はこのdivの中身を綺麗に並べる方法として、flexbox（フレックスボックス）を使ったレイアウト方法を学習します！