たとえば、style要素内で、
p {color: red;}
とすると、全てのp要素が "red" になる。ときには一部分だけスタイルを変 えたいことがある。典型的な例としては重要なところは 色を変えて書いたりすることが当てはまる。このような場合は定義する スタイルにクラス名をつけておき、実際にスタイルを 変えたい個々の要素でそのクラス名を指定する。スタイル定義を以下のように変 えよう。
:
前略
<style>
p.chuui {color: red;}
.juyo {color: green;}
</style>
:
以下略
p.chuui や .juyo のように、ピリオドに続けて
書いたものがスタイルのクラス名である。
p.chuui
p要素だけで利用できるスタイルの一つとして chuuiという名前のクラスを指定する。
.juyo
どの要素でも利用できるスタイルの一つとして juyoという名前のクラスを指定する。
このようにして定義したクラス名付きのスタイルは実際の要素では以下のよ
うに利用する。
【例】
<p class="chuui">みなさん注意して下さい………</p>
↓
みなさん注意して下さい………
chuuiというクラスはp要素にしか利用できないが、
juyoのほうは任意の要素から利用できる。
【例】
<p>庄内平野の北方に位置するこの山を <span class="juyo">鳥海山</span>という</p>
↓
庄内平野の北方に位置するこの山を鳥海山という
色の違う3つのクラスを定義し、3つの段落(p要素)をそれぞれ違うクラス(色)
の装飾で記述せよ。
【例】
:
前略
<style>
<!--
p.xxx {color: ***;}
p.yyy {color: ***;}
p.zzz {color: ***;}
-->
</style>
:
<body>
<p class="xxx">何か適当な文章1</p>
<p class="yyy">何か適当な文章2</p>
<p class="yyy">何か適当な文章3</p>
</body>
ファイル名は ~/public_html/class.html とし、
完成して保存したら
http://roy.e.koeki-u.ac.jp/~自分の番号/class.html
を見て確認すること。色の名前は http://www.tagindex.com/color/color_name.html などを参考にして良い。