クラス属性

spanとclass属性

em と strong の使用方法を学びましたが、強調とはちょっと違う目的で、多種多様な色分けなどの装飾をしたい場合には、spanというタグとclassという属性で分けて使うのがいいでしょう。

ちなみにspan単独でstrongのように使用できますし、class属性はspanだけでなく他のタグにも使用可能です。

まずspanを使ってみる

スタイルシートの部分にスタイルの指定をします。

span {color:#ff0000;}

本文中にspanを加えます

<P>文章中の<span>強調したい文字</span>の色を変えたりする。</P>

結果はこうなります。

文章中の強調したい文字の色を変えたりする。

虫の名は赤で、鳴き声は緑に

このままでは一色しか使えません。複数の色の部分を作るときはclassというものを使います。たとえば文章内の虫の名前を全部赤にし、鳴き声を全部緑にするようにしてみます。

STYLE に書き加えます

span.mushi {color:#ff0000;}
span.koe   {color:#00cc00;}

本文中に指定を加えます。

<p>いろいろな虫がいます。<span class="mushi">ウマオイ</span><span class="koe">スイッチョン</span>となきます。
<span class="mushi">スズムシ</span><span class="koe">リーンリーン</span>となきます。</p>

結果はこうなります。

いろいろな虫がいます。ウマオイスイッチョンとなきます。 スズムシリーンリーンとなきます。

同じspanタグに mushi というclassと koe というclassを作ってそれぞれに色を設定するわけです。スタイルシートの中ではタグの後ろにピリオドを打ってその後ろに class の名前を書きます。この名前は自分がわかりやすいように決めることができます。

ただし英字で始まり、英字・数字とマイナスの組み合わせにします。

span.mushi {color:#ff0000;}

BODY部の中ではタグの中に class= の後ろにスタイルシート内に書いた名前を書きます。これもピリオドで書くことができればいいのですが、昔の書き方との互換性からこのようになっています。

<p>いろいろな虫がいます。<span class=mushi>ウマオイ</span>は‥

スタイルの記述を変えるだけで全部変わる

style を書き換えただけで、全部の虫の色や鳴き方の色が変わります。また、文字の大きさなど、別の指定を加えることもできます。font-size は字の大きさです。

span.mushi {color:#996600; font-size:140%;}
span.koe   {color:#6600cc; font-size:80%; }

本文は全く変える必要がありません。結果はこうなります。

いろいろな虫がいます。ウマオイスイッチョンとなきます。 スズムシリーンリーンとなきます。

font-size の 100% は、その要素(今の場合はp タグ)内の普通の文字の大きさのことです。

飾りとしての使用

次のページで説明する「テキストの内容を重視して指定しよう」という話には少し反しますが、このようなこともできます。

使

この見出しは STYLE に次のように書き加えます。一部だけ書きました。

span.c1 {color:#0000ff;}
span.c2 {color:#0033cc;}
span.c3 {color:#006699;}
・・・・・

本文中(ここでは見出し中)に指定を加えます。ここも一部だけ書きました。

<span class="c1">見</span><span class="c2">だ</span>
<span class="c3">し</span><span class="c4">で</span>
・・・・・

色に緑を含めたので、いつもの見出しの薄い緑を白くしてあります。周りを線で囲む設定はここでは内緒。


聖愛高等学校
http://www.seiai.ed.jp/