HTMLの<div>タグを学ぼう

<div>タグってなに？

おおまかに言うと：

<div>タグは、ウェブページを作るときに使う「箱（はこ）」です。この箱にいろんなものを入れることができます。

たとえるなら：

ウェブページを家だとすると、<div>タグはその家の中にある「部屋（へや）」みたいなものです。部屋の中に家具（かぐ）やおもちゃを置くように、<div>タグの中に文字や画像、他のタグなどを置くことができます。

どうやって使うの？

基本の形：

こんな感じで書きます。

<div>
  ここにいろんなものを入れられます。
</div>

例：

たとえば、文字を入れたり、他のタグを入れたりします。

<div>
  こんにちは、これは'<div>'タグの中にある文字です。
</div>

少し複雑な例：

<div>タグの中に他のタグも入れることができます。

<div>
  <h1>これは見出しです</h1>
  <p>これは段落です。</p>
</div>

この例では、<div>タグの中に<h1>タグと<p>タグが入っています。こんなふうに、<div>タグは中にいろいろなタグをまとめるために使うことができます。

なんで使うの？

ウェブページをきれいにするため：

ウェブページを作るときに、内容を整理（せいり）するのに役立ちます。たとえば、ページの上の部分、真ん中の部分、下の部分などに分けたいときに、それぞれを<div>タグで囲むことで整理しやすくなります。

スタイルをつけるため：

<div>タグに特定のスタイルをつけて見た目をかっこよくすることもできます。例えば、<div>タグに背景色をつけたり、枠線をつけたりできます。

<div style="background-color: lightblue; border: 1px solid black;">
  これは背景が水色で、黒い枠線がある`<div>`です。
</div>

まとめ

<div>タグはウェブページの中で、いろんな要素をまとめたり、スタイルをつけたりするための「箱（はこ）」です。これを使うことで、ページを整理整頓して、見やすくすることができます。