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

web開発

2016/06/03

web開発

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

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

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

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

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

 

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>を1つのかたまり・グループとすることができます。

<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>同士での区別ができるようになった】

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

 

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は同じ名前を1ページ中で何度でも使えるが、idは1ページ中に1度しか使えない。」

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

<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は同じ名前を2回以上使うことは出来ない】

idは同じ名前を2回以上使うことは出来ません。【悪い例】のように、「demo」というid名を2回(以上)使うことはできないのです。

demo1, demo2のように名前を変えることが必要です。

classとidの違いについてはよくある疑問として挙げられるので、これを機にしっかり覚えておきましょう。

いかがでしたか?今回でHTMLのdiv classについて大体理解できたのではないでしょうか。

udemyでもHTMLに関する講座を多数開設しています。ぜひ学習してみてください。

  

【75%OFF 2,400円!】HTMLを含むサイトコーディングを自宅からオンラインでマスター!

実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

実践Webサイトコーディング講座 | HTML5とCSS3を使って、カフェのサイトやWebメディアサイトを作ってみよう

HTMLとCSSの基礎がわかっている方が、実践的なWebサイトコーディングを身につけるコースです。

動画で学習する

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事