紙に書かれた文章にチェックを付けたい場合、蛍光ペンがよく使われますね。 ホームページ上でも同じことを実現したいと思ったことはありませんか？ ホームページ上で蛍光ペン効果を付けるのは、とっても簡単です。 色の種類も、好きなだけ設定できます。
今回は、ホームページ上の文章に、蛍光ペン効果を加える方法をご紹介致しましょう。
文字の上に蛍光ペンを引くには？
蛍光ペンは、紙の場合には「文字の上から」引くものですが、ホームページ上では「背景色（＝文字の下の色）」として実現します。 スタイルシートを使えば、任意の位置に背景色を付けることができますので、とっても簡単です。
解説は後回しにして、まずはソースをご紹介しましょう。
<style type="text/css">
span.yellow { background-color: #ffff55; }
</style>
上記のようにスタイルシートを記述しておき、 本文中で次のようにHTMLを記述します。このように<span class="yellow">蛍光ペンを引きたい箇所</span>にspan要素を記述します。
上記のように、蛍光ペンを引きたい文字列を span要素で囲みます。
これを表示すると、次のようになります。
このように蛍光ペンを引きたい箇所にspan要素を記述します。
とてもお手軽ですね。
この蛍光ペンは、同じページ内にいくつでも引くことができます。
例えば、次のように記述すると...
このように、<span class="yellow">HTMLでは</span>無理でも<span class="yellow">スタイルシートを</span>使えば、<span class="yellow">楽々に</span>実現できてしまいます！
指定通り、次のように、3カ所に蛍光ペンが引かれます。
このように、HTMLでは無理でもスタイルシートを使えば、楽々に実現できてしまいます！
とっても簡単ですね。
もっと様々な色を使うには？
もちろん、複数の色の蛍光ペンを引くことも可能です。
次のページでは、複数の色の実現方法や、蛍光ペンの太さの指定方法などをご紹介致します。
