<div> ブロック要素の汎用コンテナ

なんにでも使える魔法の箱、div要素

師匠

ここから、「 (3) CSS基礎(中編) 」や!
ますます、 アクセル全開 で行くで!!

弟子

どこに?

師匠

まず、<div>要素や!
その前に、恒例の復習!

師匠

<h1><h6>は何や?

弟子

見出し。 (分からない人は、こちら

師匠

<p>は?

弟子

段落。 (分からない人は、こちら

師匠

<a>は?

弟子

ハイパーリンク。 (分からない人は、こちら

師匠

<strong>は?

弟子

重要性の強調。 (分からない人は、こちら

師匠

<img>は?

弟子

画像。 (分からない人は、こちら

師匠

<ol>とか<ul>は?

弟子

リスト(箇条書き)。 (分からない人は、こちら

師匠

<table>は?

弟子

テーブル(表)。 (分からない人は、こちら

師匠

そうや。

要素(タグ)には意味がある

師匠

今、お前が言うたように、要素(タグ)には意味があるんや。
よって、関係ない場所に、関係のない要素(タグ)を入れたらアカンのや。

師匠

たとえば、下のHTMLコードがある。

<!-- HTMLコード -->

<p></p>
<p>イヌ</p>
<p>ネコ</p>

イヌ

ネコ

師匠

これを、 魚と哺乳類に 分けたい。

師匠

その場合、class属性を指定する方法がある。

<!-- HTMLコード -->

<p class="fish"></p>
<p class="mammal">イヌ</p>
<p class="mammal">ネコ</p>
/*  CSSコード  */

.fish {
	background: plum;
}

.mammal {
	background: palegreen;
}

イヌ

ネコ

師匠

上でもええけど、下みたいに表示したいとする。
どうやって、下の結果を表示するか、が課題や。

イヌ

ネコ

師匠

まず、外枠を表示せとるから、CSSのborderプロパティを使っとるのは、分かるな。
問題は、 何に対して CSSを適用させるか、や。

弟子

<p>要素じゃないんですか?
こんな感じで。

<!-- HTMLコード -->

<p class="fish"></p>
<p class="mammal">イヌ</p>
<p class="mammal">ネコ</p>
/*  CSSコード  */

.fish {
	border:	7px solid plum;
}

.mammal {
	border:	7px solid palegreen;
}

イヌ

ネコ

弟子

あれ?
「イヌ」と「ネコ」が分かれちゃった。

師匠

「イヌ」と「ネコ」は、それぞれが独立した<p>要素なんや。
この場合、「イヌ」と「ネコ」をまとめる、 なんらかの要素 が必要や。

師匠

木構造で書くと、今は こうなってる。

師匠

この<body>要素と<p>要素の間に、<p>要素を束ねる何らかの要素(図中では <○○> )が必要なわけや。

師匠

この要素には、何を使ったらええと思う?

弟子

さー・・・、<h1>とかですか?

師匠

そんな使い方はできへん。
今まで照会した要素は、全部 意味を持つ んや。
よって、ここでは使えない。

師匠

そこで、必要なのは、 意味を持たない要素 なんや。
意味を持たない要素は、2つある。
<div><span>や。

汎用コンテナ

師匠

<div><span>は、 汎用コンテナ と呼ばれる。
「 汎用 」の意味は、「 何にでも使える 」
「 コンテナ 」は、「 入れ物 」や。
よって、汎用コンテナ = 何にでも使える入れ物、やな。

師匠

上の例でも、「魚」「哺乳類」を分ける入れ物(コンテナ)として、<div>を使う。

師匠

コードは下や。

<!-- HTMLコード -->

<div class="fish">
	<p></p>
</div>

<div class="mammal">
	<p>イヌ</p>
	<p>ネコ</p>
</div>
/*  CSSコード  */

.fish {
	border:	7px solid plum;
}

.mammal {
	border:	7px solid palegreen;
}

イヌ

ネコ

師匠

もっと言うと、「鯵」「イヌ」「ネコ」に<p>要素を使っているのは、おかしい。
<p>は 段落なんや。
段落っていうのは、「私は今日・・・しました。明日は・・・です。」みたいに、句読点を含んだ複数の文の集まりなわけや。
よって、ここも「なんにもで使える入れ物<div>」を使う

<!-- HTMLコード -->

<div class="fish">
	<div></div>
</div>

<div class="mammal">
	<div>イヌ</div>
	<div>ネコ</div>
</div>
/*  CSSコード  */

.fish {
	border:	7px solid plum;
}

.mammal {
	border:	7px solid palegreen;
}
イヌ
ネコ
師匠

これが正しい書き方や。

汎用コンテナの使い過ぎに注意

師匠

今、言うたように「 汎用コンテナは何にでも使える 」。

師匠

そうすると、見出しや 段落にすべきところも、全て汎用コンテナにするヤツがが出て来る。

師匠

何回も言っているけど、「見た目はCSSで設定する」。
よって、<div>要素を、 見出しらしく 見せたり、 段落らしく 見せることもできるわけや。

師匠

そうすると、わざわざ 見出し<h1>や 段落<p>を使わないで、全部 汎用コンテナ<div>で作っても、問題なさそうやな。

師匠

読むのが人間だけなら、たぶん それでもええやろ。

師匠

ただし、Google様のような、検索エンジンも読むわけや。
で、検索エンジンは、「ココは見出しやな」「ココは段落やな」と、要素を見て判断するわけや。

師匠

よって、Google様にちゃんと読んでもらいたければ、 適切な場所に 適切な要素を使う ことが必要や。

復習

  • <div><span> : 汎用コンテナ = なんにもで使える入れもの
ここで終わり。続きは いずれ。(⇒ 目次)