HTMLのdiv classとは？５分でわかる事例付き解説

HTMLを勉強し始めると、div classというコードを目にすることが多くなると思います。

しかし、本記事を読んでいる人は、「HTMLのdiv classって何なの？」「div classってどんな時に使うの？」と疑問に感じているのではないでしょうか。

今回はそう感じている人のために、「HTMLのdiv classとは」、「div classの使い方」などを具体例を用いて５分程度でわかる解説をご用意しました。

また最後には、よくある疑問として挙げられる、div classとdiv idとの違いについても解説します。

本記事を読み終えた頃には、HTMLのdiv classについて完璧に理解できているようになっているでしょう。ぜひ最後までお読みください。

INDEX

HTML div classとは？
HTML div classの使い方
HTML div classとdiv idの違い

HTML div classとは？

HTMLのdiv classとは何なのでしょうか。ここでは、HTMLの簡単なコードを例に挙げ、divとclassを別々に解説していきます。
※HTMLについては、HTMLとは？これを読めば初心者でも必ずHTMLが書ける！をお読みください。

divについて

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

<h1>Hello HTML</h1>

<p>Hello CSS</p>

ここで、上記の文字の色を赤にしたい！と思った時に、<h1>と<p>別々にCSSで赤色を指定するのは二度手間な感じがしますよね？

どうせなら一度にまとめて赤色を指定した方が、CSSの記述量も少なくて楽です。

そのためには、<h1>と<p>を一つの「かたまり・グループ」と考えれば良いのです。

そのような時にdivが使えます。以下のようにdivを記述することで、<h1>と<p>を１つのかたまり・グループとすることができます。

<div>

<h1>Hello HTML</h1>

<p>Hello CSS</p>

</div>

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

classについて

では、classとは何なのでしょうか。これは、divに付ける名前だと考えてください。

例えば、<div></div>で囲まれたHTMLのコードがたくさんあると、CSSを適用するときに、どこの<div></div>にCSSを適用すれば良いのかわからなくなります。（一口にdivと言ってもどのdivかの区別がつかない。）

<div>

<h1>HTMLとは？</h1>

<p>CSSとは？</p>

</div>

<div>

<h2>Rubyとは？</h2>

<h3>PHPとは？</h3>

</div>

【<div></div>同士で区別がつかない】

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

<div class=”sample1”>

<h1>HTMLとは？</h1>

<p>CSSとは？</p>

</div>

<div class=”sample2”>

<h2>Rubyとは？</h2>

<h3>PHPとは？</h3>

</div>

【divにclassを与えたことにより、<div></div>同士での区別ができるようになった】

これで２つのdivが区別できるようになりました。

＼文字より動画で学びたいあなたへ／

Udemyで講座を探す＞

HTML div classの使い方

ここでは、上記のHTMLコードを例にdiv classの使い方を解説します。

例えば上記のHTMLコードにおいて、class名がsample1の<h1>と<p>の文字の色を赤にしたい時は、次のようにCSSを記述します。
※CSSについては、CSSとは？これを読めば初心者でもCSSが書ける！をお読みください。

【CSS】

.sample1{

color:red;

}

【結果】

HTMLとは？

CSSとは？

ここで注意するポイントは、クラス名の前に「.(ドット)」が付くことです。これさえ気をつければ後はCSSを記述するだけです。

HTML div classとdiv idの違い

HTMLでは、div classと似たようなものとして、div idというのがあります。

この違いも重要なので、しっかり覚えておきましょう。違いはとてもシンプルです。

「classは同じ名前を１ページ中で何度でも使えるが、idは１ページ中に１度しか使えない。」

これも具体例で解説していきます。

<div class=”demo”>

<h1>HTMLとは？</h1>

<p>CSSとは？</p>

</div>

<div class=”demo”>

<h2>Rubyとは？</h2>

<h3>PHPとは？</h3>

</div>

【classは同じ名前を何回も使える】

classは上記のように同じ名前(demo)を何回使っても問題はありません。

では、idの具体例を見てみましょう。

【良い例】

<div id=”demo1”>

<h1>HTMLとは？</h1>

<p>CSSとは？</p>

</div>

<div id=”demo2”>

<h2>Rubyとは？</h2>

<h3>PHPとは？</h3>

</div>

【悪い例】

<div id=”demo”>

<h1>HTMLとは？</h1>

<p>CSSとは？</p>

</div>

<div id=”demo”>

<h2>Rubyとは？</h2>

<h3>PHPとは？</h3>

</div>

【idは同じ名前を２回以上使うことは出来ない】