HTML divタグでグループ化する方法｜使い方と例

📌

結論

<div> はレイアウトのための箱です

CSSでスタイルを当てるとき、要素をグループ化する箱が必要になります。それが <div> です。

📝 実際のコードはこちら

<div>カード1</div>
<div>カード2</div>

divとは

<div> はdivision（区分）の略で、意味を持たない汎用のブロック要素です。意味を持たないというのがポイント。<header> や <main> のようなセマンティックタグは意味がありますが、<div> は純粋にグループ化のためだけに使います。

迷ったらこのまとまりに名前を付けるなら何？と考えてみてください。名前が付くならセマンティックタグ、付かないなら <div> です。

・<div> はスタイル・レイアウトのためのグループ化要素・意味のあるまとまりにはセマンティックタグを使う・<div> はブロック要素（デフォルトで縦に積み重なる）

2つの要素をそれぞれdivで囲んでみましょう。中身は自由です。

🧪 ここで試せます ─ 壊しても大丈夫！

下のエディタで実際にコードを書いて、すぐにプレビューで確認できます。何度でもやり直せるので、思い切って色々試してみてください。

■ 演習

2つの要素をそれぞれdivで囲んでください。中身は自由です。（例：カード、ブロックなど）

詰まったらヒント

divは意味のないブロック要素です。グループ化に使います。