紙に書かれた文章にチェックを付けたい場合、蛍光ペンがよく使われますね。 ホームページ上でも同じことを実現したいと思ったことはありませんか? ホームページ上で蛍光ペン効果を付けるのは、とっても簡単です。 色の種類も、好きなだけ設定できます。

今回は、ホームページ上の文章に、蛍光ペン効果を加える方法をご紹介致しましょう。

文字の上に蛍光ペンを引くには?

蛍光ペンは、紙の場合には「文字の上から」引くものですが、ホームページ上では「背景色(=文字の下の色)」として実現します。 スタイルシートを使えば、任意の位置に背景色を付けることができますので、とっても簡単です。
解説は後回しにして、まずはソースをご紹介しましょう。

<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では無理でもスタイルシートを使えば、楽々に実現できてしまいます!

とっても簡単ですね。

もっと様々な色を使うには?

もちろん、複数の蛍光ペンを引くことも可能です。

次のページでは、複数の色の実現方法や、蛍光ペンの太さの指定方法などをご紹介致します。

それでは、次のページへ! →