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に関する講座を多数開設しています。ぜひ学習してみてください。

目的別!最先端ITスキル講座

海外の人気講師によるWeb制作のベストセラ―講座

【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)
【世界で30万人が受講】フルスタック・Webエンジニア講座(2017最新版)

ウェブデザインの基礎、サーバーサイドプログラミング、モバイルアプリ開発、APIプログラミングなどを網羅的にマスターできる

最新!iOS11アプリ開発講座

【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC
【6日で速習】iOS 11 Swift 4アプリ開発入門 決定版 20個のアプリを作る ARKit,CoreML,NFC

地図検索、ARなど20個以上のアプリを作って学べる実践講座

日本を代表するデータサイエンティスト辻真吾氏による人気講座

【世界で5万人が受講】実践 Python データサイエンス
【世界で5万人が受講】実践 Python データサイエンス

データ解析の基本、可視化、統計、機械学習などデータサイエンスに関するあらゆる実践的なスキルがPythonで身に付く!

初級者から学べる人工知能講座の決定版

みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習
みんなのAI講座 ゼロからPythonで学ぶ人工知能と機械学習

初心者向けの人工知能と機械学習のコース。文字認識や株価分析なども実施

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

関連記事