divタグについて - HTML5とCSS3をマスターするためのブログ

今回はdivタグについて勉強しました。
ここまでテキストに記載がなかったので、ネットにある知識を集めて独学で勉強しました。

divタグとは？
- div idとは？
- まとめ

divタグとは？

divタグを言葉で説明すると、特別な意味を持たない特定のブロックとなります。
もっと簡単に言うと、【こっからここまで！】という指定です。

AからBまでをまとめるためにdivタグを使う感じですね。

実際の記述方法を例に挙げます。

<h1>はじめてのdivタグ</h1>
<p>こんなの全然理解できねえよ…</p>

上記のタグを全部赤文字で表示させたいとします。そこでdivタグの登場です。

<div class="sample01">
<h1>はじめてのdivタグ</h1>
<p>こんなの全然理解できねえよ…</p>
</div>

そしてCSSで以下のように記述します

.sample01 {
color: "red";
}

ポイントはクラス名【sample01】の前に.をつけることです。あとは通常のCSSの記述でOKです。

そうすると、
はじめてのdivタグ
こんなの全然理解できねえよ…
上記のように表示させることができます。

div idとは？

同じdiv系列にdiv idというタグがあります。div classとdiv idは非常に似た性質を持っています。div classと同様に、特定の記述をマークアップするために使用しますが、div classは同一ページ内で何個も使用できます。ですが、div idの場合は同一ページ内で一つしか使用できないルールになっています。

div idのidはページ内での住所を表しているので、ページ内に同じ住所が何箇所もあったら、それは不自然ですよね。だからdiv idは同一ページ内でひとつしか使えない！って感じです。

もっと言うと、div id="sample"というタグがひとつページにあったとします。でももう一つdiv idタグを記述する必要がある場合、

div id="sample2"と記述すれば問題なく使用できます。なお、このときつけるクラス名は指定している範囲になるべく関連しているものが推奨されています。指定している範囲が、ランキングテーブルなら、

div id="ranking"とする感じですね。