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

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

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

西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

蛍光ペンの太さを指定することも可能です。
背景色を指定しただけでは、文字と同じ幅(高さ)にしか色が付きません。 そこで、次のように指定することで、蛍光ペンの太さを指定できます。

<style type="text/css">
   span.wideyellow {
      background-color: #ffff55;
      padding: 0.3em 0px;
   }
</style>

先ほどの background-colorプロパティに加えて、paddingプロパティを指定しています。

◆paddingプロパティ
PADDINGの説明図 paddingプロパティは、内容と枠線までの距離を指定するプロパティ(属性)です。 「内容」とはここでは「本文の文字列」のことで、「枠線」とはここでは「背景色の端」のことです。 つまり、paddingプロパティを使うことで「文字←→背景色の端」の距離を指定することができるわけです。 その「距離」が「蛍光ペンの太さ」になるわけです。

◆蛍光ペンの太さ: paddingプロパティの値
上記では、paddingプロパティの値として「 0.3em 0px 」を指定しています。 数値を2つ指定した場合は、最初の値が「上下の距離」、2番目の値が「左右の距離」として解釈されます。 つまり、「上下に0.3em、左右に0px」の距離を取る指定になります。

ここでは、蛍光ペンを上下に太くしたいだけなので、上下の方にだけ(0を超える)値を指定しています。
※「0.3em」は、「0.3文字分」という意味です。つまり、上下にそれぞれ0.3文字分の空間を取るという指定になります。

スタイルを作成できたら、あとは今までと同様にHTMLを記述します。

このように<span class="wideyellow">今までと同じように</span>にHTMLを記述します。

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

このように今までと同じようににHTMLを記述します。

上記では少し太すぎると思う場合は、paddingプロパティの値を 0.3em から 0.1em などに変えてみましょう。 すると、次のようになります。

このように今までと同じようににHTMLを記述します。

お好みに合わせて、いろいろ値を変えてみて下さい。

span要素でなくても可

今回は、蛍光ペンを引きたい箇所を指定するために、span要素を使いました。 もし、強調の意味で蛍光ペンを使いたいなら、span要素ではなく strong要素を使っても良いでしょう。 その場合は、スタイルの定義やHTML中に記述した「span」の部分をすべて「strong」に書き換えて下さい。

終わりに

今回は、文章中に蛍光ペンを引く効果を出す方法をご紹介致しました。
ぜひ、ご活用下さい。

また、以下の関連記事もぜひ一緒にご参照下さい。

【関連記事】

【編集部おすすめの購入サイト】
楽天市場でホームページ作成関連の書籍を見るAmazon でホームページ作成の参考書を見る
  • 前のページへ
  • 1
  • 2
  • 3
※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ

    表示について

    カテゴリー一覧

    All Aboutサービス・メディア

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