ホームページ作成/テキストの配置・装飾 (HTML,CSS)

蛍光ペン効果を付けるには?

本文中に蛍光ペンを引きたい!と思ったことはありませんか? 紙と同じように、ホームページ上の文章にも蛍光ペン効果を出すことができます。ペンの種類も自由自在。お手軽「蛍光ペン効果」をぜひ試してみて下さい。

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

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

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

とっても簡単ですね。

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

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

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

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

  • 1
  • 2
  • 3
  • 次のページへ

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

    All About公式SNS
    日々の生活や仕事を楽しむための情報を毎日お届けします。
    公式SNS一覧
    © All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます