●em と strong の使用方法を学びましたが、強調とはちょっと違う目的で、多種多様な色分けなどの装飾をしたい場合には、span
というタグとclass
という属性で分けて使うのがいいでしょう。
ちなみにspan
単独でstrong
のように使用できますし、class
属性は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> ・・・・・
●色に緑を含めたので、いつもの見出しの薄い緑を白くしてあります。周りを線で囲む設定はここでは内緒。