<div>とはなんぞや

HTMLに触れたことのないひとのための解説を超ゆるくするよ。
HTMLは基本的に< >でできたタグというもので包まれてできてる。
様々なタグには意味があって、それを正しく書くことで、コンピューターは何が書かれているかを判断してる。
今日は<div>（ディブ）を紹介するよ。

<div>はとにかくめちゃめちゃ使う。
それ自体に特別な意味はないけど、いろんなものをしまっておく容器みたいなもの。

例えばごましおくんが、「秘伝のぬか漬け」と「秘伝の浅漬け」の二種類を作っていろいろつけたいとする。
そしたらまずぬか漬けの容器<div>を用意する。
その中に、具材を入れる。そして容器に中身をいれたら、必ずフタで閉じる。
これが閉じタグ</div>だ。

閉じタグがないとフタは開きっぱなしだから、浅漬けにしたかったものも全部入っちゃう。
閉じたら、浅漬けの容器<div>を同じように作って中身をいれたら閉じる。
閉じタグは<div>に限ったことじゃなくて、ほぼ全てのタグに必要だよ。

例えが下手くそすぎてわかりにくい

実際にこれを使ってみると、



<div class="nukaduke">
<ul>
<li>きゅうり</li>
<li>ナス</li>
</ul>
</div>

<div class="asaduke">
<ul>
<li>白菜</li>
<li>人参</li>
</ul>
</div>
となる。ul.liは今回は気にしないで！！

横にあるクラス、、ってのはなに？？

クラスはタグにつけるラベルだよ。
今回はnukaduke(ぬか漬け)と
asaduke(浅漬け)ってラベルを付けたよ。
名前は自分が好きなものをつけられるけど、あまり長い名前や、分かりにくいものは使わない。1とか2とか、数字だけのもあまり使わない。

何で名前を変える必要があるの？？

変えなくてもいいんだよ。
ただ、cssで見た目を変えたい時に、divだけだと全てのdivにその効果がかかっちゃうから、他と変えたい時はクラスをつけるんだ。
逆に、同じ効果をかけたい時は、同じクラスを付けるよ。

同じクラス名でもいいの？。

ラベルにはidとclassの二種類があるんだけど、クラスは何回でも使えるよ。
idはhtmlで一回しか使えないから、idを付ける時は他で使わないか気をつけて。

わかった。

だから、さっき作ったnukadukeと、asadukeに同じ効果をかけたかったら、tsukemonoとか同じクラス名をつけて、それに効果をかければ、１つのcssで済むんだ。
cssはなるべく綺麗で簡潔に書いた方がいいからね。

話が逸れちゃったけど、HTMLを書いていると、よく閉じタグを失敗をしてサイトが崩れるよ。
だから、なんかおかしいって思ったら、タグを怪しんでみる。
一個多かったり、一個少なかったり。
< >このカッコが書かれてないこともある。

なるほど！！でもそもそもcssってのもよく分からない！

それはまた次回ね！！！！！！！！！！！！！！！！