古いhtmlの規格ではfontというタグがあり文字の色や字体,大きさなどを指定していました。しかし,xhtmlの新しい規格ではこれは廃止になっています。その代わりにspanというタグとクラス属性を使います。
span
とは「範囲」程度の意味でそのものにはあまり意味がありません。これにクラスの指定をつけて何のために印を付けたかを表現し,同時にスタイルの指定の目印にします。
span
もem, strong
と同様行内要素を指定するタグです。
span
も普通のタグなのでクラスなしでも使えます。たとえば,
<P>文章中の<span>強調したい文字</span>の色を変えたりする。</P>
ただし,表示の上ではこれだけでは何も変わりません。スタイルシートの部分にスタイルの指定をします。
span {color:#ff0000;}
結果はこうなります。
文章中の強調したい文字の色を変えたりする。
これに 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>
結果はこうなります。
いろいろな虫がいます。ウマオイは スイッチョンとなきます。 スズムシはリーンリーンとなきます。
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> ・・・・・
色に緑を含めたので、いつもの見出しの薄い緑を白くしてあります。これもclassで指定してあります。