蛍光ペンをもっと太くするには？
蛍光ペンの太さを指定することも可能です。
背景色を指定しただけでは、文字と同じ幅（高さ）にしか色が付きません。 そこで、次のように指定することで、蛍光ペンの太さを指定できます。
<style type="text/css">
span.wideyellow {
background-color: #ffff55;
padding: 0.3em 0px;
}
</style>
先ほどの background-colorプロパティに加えて、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」に書き換えて下さい。
終わりに
今回は、文章中に蛍光ペンを引く効果を出す方法をご紹介致しました。
ぜひ、ご活用下さい。
また、以下の関連記事もぜひ一緒にご参照下さい。
【関連記事】
