divとは？

divはHTMLのコードに範囲を指定したい時に使います。例えば、以下のようなHTMLのコードがあるとします。

<h1>cybergreen</h1>
<p>サイバーグリーンWEB</p>


ここで、上記の文字の色を緑にしたい、と思った時に<h1>と<p>別々にCSSで赤色を指定するのは二度手間な感じがしますよね？
どうせなら一度にまとめて赤色を指定した方が、CSSの記述量も少なくて楽です。
<h1>と<p>を一つの「かたまり・グループ」と考えれば良いのです。
そのような時にdivが使えます。以下のようにdivを記述することで、<h1>と<p>を１つのかたまり・グループとすることができます。

<div>

　<h1>cybergreen</h1>
　<p>サイバーグリーンWEB</p>

</div>

【<h1>と<p>が一つのかたまり、グループとなりました】

classとは？

classとは何なのでしょうか。これは、<div>に付ける名前だと考えてください。
例えば、<div></div>で囲まれたHTMLのコードがたくさんあると、CSSを適用するときに
どこの<div></div>にCSSを適用すれば良いのかわからなくなります。

【例1】

<div>

　<h1>cybergreen</h1>
　<p>サイバーグリーンWEB</p>

</div>

【例2】

<div>

　<h2>cybergreenとは？</h2>
　<h3>WEBサイバーグリーンとは？</h3>

</div>

【上記のように<div></div>同士で区別がつかない】
そんな時に<div>同士でも区別がつくようにするため、それぞれの<div>にclass(名前)を付けてあげましょう。
class=”付けたい名前”のように記述します。

【例3】

<div class=”sample1”>

　<h1>cybergreenとは？</h1>　　　　　
　<p>サイバーグリーンWEBとは？</p>

</div>

【例4】

<div class=”sample2”>

 <h2>CYBERGREEBとは？</h2>
　　<h3>サイバーグリーンウェブとは？</h3>

</div>

HTML div classとは？についてでした

<div>にclassを与えたことにより、<div></div>同士での区別ができるようになり、これで２つの<div>が区別できるようになりました。
他にもHTMLには多くのタグがあります。これからHTMLを学習していくと様々なタグを使うことなるでしょう！

投稿者プロフィール

kinukawahiroyasu
投稿タグ
,