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

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

<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」に書き換えて下さい。

終わりに

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

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

【関連記事】




■容量たっぷり20GB、国内通話5分無料も付いて、2970円(税込)



※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。