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

蛍光ペン効果を付けるには?(2ページ目)

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

蛍光ペンの種類は、いくらでも増やすことができます。
最初のスタイルの定義で、複数の色を作っておけば良いだけです。 例えば、次のように記述します。

<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>して下さい。

すると、次のように表示されます。

このように、いろいろな色を用意することも、 とても簡単に実現可能です。 でも、あまり多すぎると、逆に 見にくくなってしまいますから、注意して下さい。

このように、複数の色を使い分けたい場合でも、簡単に実現可能なことがお分かり頂けたと思います。 上記のように、密集して使うと少々見づらくなりますので注意が必要ですね。

蛍光ペンをもっと太くするには?

これまでにご紹介した蛍光ペンは、文字と同じ幅しかありませんでした。 もう少し広い範囲にマークする方法もあります。

次のページでは、蛍光ペンの太さを調節する方法をご紹介致します。

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

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

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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