もっと様々な色を使うには？
蛍光ペンの種類は、いくらでも増やすことができます。
最初のスタイルの定義で、複数の色を作っておけば良いだけです。 例えば、次のように記述します。
<style type="text/css">
span.yellow { background-color: #ffff55; }
span.lime { background-color: #55ff55; }
span.blue { background-color: #55ffff; }
span.orange { background-color: #ffcc55; }
span.red { background-color: #ff5555; }
</style>
蛍光ペン効果は、文字に背景色を付けることで実現しています。 ですから、背景色の種類を複数用意しておけば、それだけ蛍光ペンの種類を増やすことができます。 上記では、5本の蛍光ペン（色）を用意していることになります。
■色の指定： background-colorプロパティ
色の指定には、background-colorプロパティを使います。これは、背景色を指定するプロパティ（属性）です。 色は、HTMLで色指定を行う場合と同様に、16進数を用いて行います。 上記の場合、「#ffff55」は「黄色」です。
※「黄色」は「#ffff00」ですが、あまり強い色だと目が痛いので、ここでは多少薄くなるよう「#ffff55」としています。 この調節は各自のお好みに合わせて指定して下さい。
■複数の種類を作る： クラスを定義
span要素を使って複数の蛍光ペンを作るため、クラス（class）を定義しています。 「 span.yellow 」や「 span.lime 」の「 yellow 」や「 lime 」がクラス名です。 このように定義することで、
「<span class="yellow">～</span>」の記述で黄色蛍光ペンが引け
「<span class="lime">～</span>」の記述で緑色の蛍光ペンが引けるようになります。
※クラス名は何でも構いません。ここでは分かりやすく「色の名前」を使いましたが、apple や pen など、どんな名前にもできます。分かりやすいクラス名を付けて下さい。
複数の色を定義できたら、あとは、本文中でspan要素を使って記述するだけです。
このように、<span class="yellow">いろいろな色</span>を用意することも、<span class="lime">とても簡単に</span>実現可能です。でも、<span class="blue">あまり多すぎると</span>、逆に<span class="orange">見にくく</span>なってしまいますから、<span class="red">注意</span>して下さい。
すると、次のように表示されます。
このように、いろいろな色を用意することも、 とても簡単に実現可能です。 でも、あまり多すぎると、逆に 見にくくなってしまいますから、注意して下さい。
このように、複数の色を使い分けたい場合でも、簡単に実現可能なことがお分かり頂けたと思います。 上記のように、密集して使うと少々見づらくなりますので注意が必要ですね。
蛍光ペンをもっと太くするには？
これまでにご紹介した蛍光ペンは、文字と同じ幅しかありませんでした。 もう少し広い範囲にマークする方法もあります。
次のページでは、蛍光ペンの太さを調節する方法をご紹介致します。
