複数のクラスを指定する

動物分類ゲーム

師匠

ほな、ゲームや。
この中で、哺乳類は どれ?

<!-- HTMLコード -->

<ul>
	<li>ゾウ</li>
	<li>トカゲ</li>
	<li>イルカ</li>
	<li>金魚</li>
	<li>ニワトリ</li>
	<li>カモノハシ</li>
</ul>
  • ゾウ
  • トカゲ
  • イルカ
  • 金魚
  • ニワトリ
  • カモノハシ
弟子

ゾウ と イルカ でしょ。

師匠

ファイナル・アンサー?

弟子

はい。

師匠

ブーーーーッ。

弟子

イルカは 哺乳類ですよ!

師匠

分かっとるがな。
お前の間違いは、「カモノハシ」や。
カモノハシも哺乳類なんや。

弟子

ちぇっ。

師匠

ネクスト・くえすしょん!

弟子

まだ、やるんですか・・・?

師匠

あ、その前に、哺乳類の動物に「 mammal 」のクラスを付けとけ。

弟子

あっ、はい。
こんな感じで。

<!-- HTMLコード -->

<ul>
	<li class="mammal">ゾウ</li>
	<li>トカゲ</li>
	<li class="mammal">イルカ</li>
	<li>金魚</li>
	<li>ニワトリ</li>
	<li class="mammal">カモノハシ</li>
</ul>
  • ゾウ
  • トカゲ
  • イルカ
  • 金魚
  • ニワトリ
  • カモノハシ
師匠

ついでに、mammalクラスの文字を、赤(red)にしよう。

弟子

こうですか?

/*  CSS : 文字を赤にする  */

.mammal {
	color:		red;
}
  • ゾウ
  • トカゲ
  • イルカ
  • 金魚
  • ニワトリ
  • カモノハシ
師匠

せやな。

師匠

ネクスト・くえすしょん! (再)

弟子

まだ、やるんですか・・・? (再)

師匠

この中で、卵を生む動物は?

弟子

哺乳類以外だから、「トカゲ、金魚、ニワトリ」でしょ。当然。

師匠

ファイナル・アンサー?(再)

弟子

はい。 (再)

師匠

ブーーーーッ。 (再)

弟子

。。。
卵を産まないから、 哺乳類 って呼ぶんですよ!

師匠

「カモノハシ」は卵を産むんや。
アホめ。

弟子

そんな訳ないじゃないですかー!

師匠

ググってみ。
真実が分かる。
アホめ。

【お願い】 読者の皆様へ、 これから 心を入れ替えて 真面目に クラスの複数指定を説明するので、去らないでください。。。

師匠

あんまりフザケとると、マジメな読者が去りそうやから、ちゃんとやるで。

弟子

(あんたが勝手に フザケとるだけやろ?)

師匠

卵を産む動物に、「egg」クラスを付ける。

弟子

はい。

<!-- HTMLコード -->

<ul>
	<li class="mammal">ゾウ</li>
	<li class="egg">トカゲ</li>
	<li class="mammal">イルカ</li>
	<li class="egg">金魚</li>
	<li class="egg">ニワトリ</li>
	<li class="mammal">カモノハシ</li>
</ul>
  • ゾウ
  • トカゲ
  • イルカ
  • 金魚
  • ニワトリ
  • カモノハシ
弟子

カモノハシは 既に「 mammal 」クラスが設定されています。
これに「 egg 」クラスを設定するには、どうしたら良いのですか?

師匠

せやろ。
カモノハシは「哺乳類」であり、かつ「卵を産む」動物でもあるんや。
そういう2つ以上の分類に入る場合、 2つ以上のクラスを指定 することになるな。
その説明をするために、動物分類クイズをやったんや。
決して、遊んどったんやないで。

弟子

(どう見ても遊んどるやん。)

師匠

複数のクラスを指定する場合、スペースでつないで、複数指定する
今の場合、class="mammal egg"と指定するんや。

<!-- HTMLコード -->

<ul>
	<li class="mammal">ゾウ</li>
	<li class="egg">トカゲ</li>
	<li class="mammal">イルカ</li>
	<li class="egg">金魚</li>
	<li class="egg">ニワトリ</li>
	<li class="mammal egg">カモノハシ</li>
</ul>
  • ゾウ
  • トカゲ
  • イルカ
  • 金魚
  • ニワトリ
  • カモノハシ
師匠

「 egg 」クラスの背景色を黄色にしてみる。

/*  CSSコード  */

.mammal {
	color:		red;
}

.egg {
	background:	yellow;
}
  • ゾウ
  • トカゲ
  • イルカ
  • 金魚
  • ニワトリ
  • カモノハシ
師匠

そうすると、哺乳類は赤色の文字、卵から生まれる動物は黄色い背景色、哺乳類であり 卵から生まれるカモノハシは、赤い字に黄色い背景色になったな。

師匠

3つ以上のクラスを指定する場合でも同じや。
スペース で連結させる。
スペースを「 , 」と間違いやすいので、注意やで。

復習

  • 複数のクラス属性を指定する場合、スペースで連結させる