クラスの概念

■クラスの概念

次にクラス(class)を指定してみます。

クラスとはその段落の名前のよなもので、簡単に言えば名札です。

例を出します。ある教室に2人の生徒がいました。2人とも"ｐ(ピー)"という名前だとすると、「ｐさん、起立！」といわれれば二人とも立ちます。二人の名前が"ｐ1"、"ｐ2"さんだったとすると、「ｐさん、起立！」といわれれば二人とも立ちますが、「ｐ1さん、起立！」といわれたらｐ1さんしか立ちません。この1とか2がクラスにあたるわけです。

p要素の文がたくさんあるときにクラスがなければ、 p要素で指定した文は全てに同じスタイルが適用されてしまいます。

クラスを指定することのメリットは1段落ごと、1文字ごとについて個々のスタイルを適用することができるということです。

さっき作った二段落の文章にクラスを適用します。pのあとに半角スペースいれてからクラス名を定義してください。クラス名は自分で定義できます（＝好きな名前をつけてください）。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML4.01 Transitional//EN">
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=shift_jis">
<meta http-equiv="description" content="初心者が作るページです。">
<meta http-equiv="keywords" content="wakabagari,若葉狩り">
<title>Wakabagari(若葉狩り)</title>
<link rel="stylesheet"type="text/css" href="stylee.css" media="all">
</head>
<body>
<img src="sho1.gif" alt="wakabagari" width="280" height="50">
｜<a href="">HOME</a>｜<a href="">PROGRAMING</a>｜<a href="">TRAVEL</a>｜<a href="">DISEASE</a>｜<a href="">BBS</a>｜
<h1>Wakabagari</h1>
<img src="fuukei1.jpg" alt="風景写真" width="500" height="180">
<h2>意味</h2>
<p class="a1">
若葉狩りというのは紅葉狩りの若葉バージョンです。つまり、若葉を見に行くみたいなのりです。ただ、本来の意味は別のところにあります。それは何かというと、みなさんは自動車につける若葉マークをご存知でしょうか？あれって初心者がつけますよね？ここまでくればわかるでしょう。すべてにおいて初心者なので、HPにくること＝若葉狩りにくることみたいになるでしょう？それがこのサイト名の意味です。
</p>
<h2>目的</h2>
<p>
目的はというと、特にはないです。が、あえていえば、紅葉マークをつけることでしょうかね。自動車だってはじめは若葉マークだけど 1年後にマークははずれ、高齢者になると紅葉マークになるでしょう？それと一緒ですね。
<p class="a2">
<address>Copyright(C)2007 Wakabagari all rights reserved.</address>
</body>
</html>

クラスを指定することで上の例では「a1」と「a2」に別々のスタイルを適用できるようになります。

p.a1 {
　　　 font-size:0.875em;
}
p.a2 {
　　 font-size:0.875em;
}

スタイルシート(この講座ではstylee.css）内は上のようにpの後に.(ドット）を打ってからクラス名を書きます。

ホームページの作り方（HP作成法）を解説

STEP1

STEP2

STEP3

STEP4

STEP5

STEP6

STEP7

■クラスの概念