class属性

問題

師匠

下のHTMLとCSSのコードで、実行結果が出ることは、もう分かるな。

<!-- HTMLコード -->

<p>段落1</p>

<p>段落2</p>

<p>段落3</p>

<p>段落4</p>

<p>段落5</p>
/*  CSSコード  */

p {
	color:		red;
	background:	yellow;
}

段落1

段落2

段落3

段落4

段落5

弟子

はい。

師匠

次、段落2&4&5 だけ、色を変えたい。
その他(段落1&3)は、そのまま。
どうすれば良い?

弟子

さー。

師匠

知らんわな。
正解は、下。

<!-- HTMLコード -->

<p>段落1</p>

<p class="aaa">段落2</p>

<p>段落3</p>

<p class="aaa">段落4</p>

<p class="aaa">段落5</p>
/*  CSSコード  */

.aaa {
	color:		red;
	background:	yellow;
}

段落1

段落2

段落3

段落4

段落5

師匠

クラス属性 っていうのを使うんや。

クラス属性

師匠

今から説明するところ、 チョー大事
ムチャムチャ使う。

師匠

HTML要素には、 class(クラス)属性 を加えることが出来る。

師匠

で、この class属性 ってのは何かというと、種類毎にラベルをつけるようなもんや。

師匠

今、段落2&4&5だけを選択したい。
よって、段落2&4&5の要素(<p>)に、 class属性 を付ける。
class属性 の値(""の中)は、好きな名前を付けてええ。
今は、「 aaa 」という名前にした。

<p  class ="aaa">
師匠

次、CSSコード。

師匠

今までは、要素で指定しとったわけや。
下の意味は、「 すべての<p>要素の文字色を赤、背景色を黄色にしろ 」っていう意味やな。

/*  CSSコード  */

p {
	color:		red;
	background:	yellow;
}
師匠

下のコード。
「 p 」を「 .aaa 」に変更した。
意味は「 すべての aaa クラス の文字色を赤、背景色を黄色にしろ 」ということや。

/*  CSSコード  */

.aaa {
	color:		red;
	background:	yellow;
}
師匠

ちなみに、「 .aaa 」の先頭にある「 . 」は、クラスを表す

クラスの適用は要素に関係ない。

師匠

下のHTMLコードは、<h3>×2個、<p>×3個、<strong>×1個 が含まれとる。
その<h3><p><strong>の1個ずつに、aaaのクラス属性を指定した。

<!-- HTMLコード -->

<h3>見出し1</h3>       

<h3 class="aaa">見出し2</h3>

<p>段落1 テストです。</p>

<p>段落2 <strong class="aaa">テスト</strong>です。</p>

<p class="aaa">段落3 テストです。</p>
師匠

今のHTMLの木構造は、これな。

師匠

上のHTMLコードに、下の「 aaaクラスの色を変える 」CSSコードを追加すると、下の実行結果のように、aaaクラスの要素だけ色が変わったな。

/*  CSSコード  */

.aaa {
	color:		red;
	background:	yellow;
}

見出し1

見出し2

段落1 テストです。

段落2 テストです。

段落3 テストです。

見出し1

見出し2

段落1 テストです。

段落2 テストです。

段落3 テストです。

復習

  • HTMLの要素には、 class 属性で、種類毎にラベルを付けることができる。
  • CSSコードから class 属性を参照する場合、先頭に . を付ける