class の概念
次にクラス(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にくること＝若葉狩りにくることみたいになるでしょう？ここがこのサイト名の意味なのです。<br />
</p><br />
<h2>目的</h2><br />
<p><br />
目的はというと、特にありませんが、あえていえば、紅葉マークをつけることでしょうね。自動車だってはじめは若葉マークだけど
1年後にマークははずれ、高齢者になると紅葉マークにななります。それと一緒ですね。
<p class="a2">
<address>Copyright(C)2008 Wakabagari all rights reserved.</address>
</body>
</html>
|
クラスを指定することで上の例では「a1」と「a2」に別々のスタイルを適用することができるようになります。
p.a1 {
font-size:0.875em;
}
p.a2 {
font-size:0.875em;
}
|
スタイルシート(この講座ではstylee.css）内は上のようにpの後に.(ドット）を打ってからクラス名を記入します。
recommend
- アメリカ留学をご案内
2019/3/7 更新
