HTMLを学んでいると必ず出てくるのがdivタグです。
でも「divって何？」「何に使うの？」と疑問に思う初心者は多いでしょう。
結論から言うと、divタグはWebページの中で“見えない箱”を作るための基本的なタグです。
この“見えない箱”にテキストや画像をまとめることで、ページのデザインやレイアウトを自由に整えることができます。
目次
divタグのイメージ：お弁当箱で考えるとわかりやすい！
たとえば、お弁当の中に
- 卵焼き
- ウインナー
- ブロッコリー
- ハンバーグ
を入れると「おかず」という一つのまとまりになりますよね。
これと同じように、divタグはWebページの要素をひとまとめにする「お弁当箱」のような役割を持っています。
See the Pen red by VA-Rie (@VA-Rie) on CodePen.
divタグの役割
1. デザインをまとめて整える
divで要素を囲むと、グループごとに色や余白、背景などのスタイルをCSSで一括して指定できます。
divにクラス名（おかず）をつけてCSSで背景色を薄い茶色に変えることができました。
See the Pen Untitled by VA-Rie (@VA-Rie) on CodePen.
2. レイアウトを作りやすくする
複数の要素を横並びにしたり、中央に寄せたりする際にdivは欠かせません。
特にflexboxやgridレイアウトと組み合わせることで、ページ構成を自由自在に整えることができます。
divタグの使い方の実例
ご飯とおかずをグループ化する例
See the Pen ご飯とおかずをグループに by VA-Rie (@VA-Rie) on CodePen.
このようにcontainerというdivの中に「ご飯」と「おかず」をまとめることで、CSSで横並びにしたり、デザインを一括して適用できるようになります。
まとめ
- divとは？ → Webページで使う“透明なお弁当箱”
- 要素をまとめることで、デザインやレイアウトをしやすくなる
- CSSと組み合わせることでWeb制作が効率的にできる
次回は、divをさらに活用するためのflexbox（フレックスボックス）を使ったレイアウト方法を解説します！
コメント