掲載日： 2004年 10月 25日
チェックを付けたい箇所に 蛍光ペン効果を付けるには？
紙に書かれた文章にチェックを付けたい場合、蛍光ペンがよく使われますね。 ホームページ上でも同じことを実現したいと思ったことはありませんか？ ホームページ上で蛍光ペン効果を付けるのは、とっても簡単です。 色の種類も、好きなだけ設定できます。
今回は、ホームページ上の文章に、蛍光ペン効果を加える方法をご紹介致しましょう。
文字の上に蛍光ペンを引くには？
蛍光ペンは、紙の場合には「文字の上から」引くものですが、ホームページ上では「背景色（＝文字の下の色）」として実現します。
スタイルシートを使えば、任意の位置に背景色を付けることができますので、とっても簡単です。
解説は後回しにして、まずはソースをご紹介しましょう。
<style type="text/css">
span.yellow { background-color: #ffff55; }
</style>
※上記の3行をHTMLファイル内のhead要素内（<head>〜</head>内）に記述します。 詳しくは、スタイルシートの基礎を説明した記事「スタイルシートを記述する3つの方法」をご参照下さい。
このように<span class="yellow">蛍光ペンを引きたい箇所</span>にspan要素を記述します。
上記のように、蛍光ペンを引きたい文字列を span要素で囲みます。
これを表示すると、次のようになります。
このように蛍光ペンを引きたい箇所にspan要素を記述します。
非常にお手軽ですね。
この蛍光ペンは、同じページ内にいくつでも引くことができます。
例えば、次のように記述すると...
このように、<span class="yellow">HTMLでは</span>無理でも<span class="yellow">スタイルシートを</span>使えば、<span class="yellow">楽々に</span>実現できてしまいます！
指定通り、次のように、3カ所に蛍光ペンが引かれます。
このように、HTMLでは無理でもスタイルシートを使えば、楽々に実現できてしまいます！
とっても簡単ですね。
もっと様々な色を使うには？
もちろん、複数の色の蛍光ペンを引くことも可能です。
次のページでは、複数の色の実現方法や、蛍光ペンの太さの指定方法などをご紹介致します。
| ★関連記事・リンク |
- 強調部分に二重線を引きたい！
- スクロールバーに色を付けたい！
- フォームの背景や文字を装飾したい！
- 見出しの背景をグラデーションにするには？
- 長文でも読みやすくしたい！ 行間を広げるには？
- 目を疲れさせないように… 閲覧者に色を自由に変更させる
- 色・色見本(カラーチャート)（リンク集）
