テキストに蛍光ペン風のアンダーラインを引いたようなCSSの作り方

今回はテキストに蛍光ペンでアンダーラインを引いたようなCSSのコードを紹介します。

 

蛍光ペン風のCSS

蛍光ペン風のCSSにはlinear-gradientを使用します。

例えばこんな感じ。

.marker_yellow_futo {
background: linear-gradient(transparent 0%, #ffff66 0%);
}

 

蛍光ペン風のスタイルが簡単に作成できます。

 

アンダーライン風にしたいなら以下のようにします。

.marker_yellow_hoso {
background: linear-gradient(transparent 60%, #ffff66 60%);
}

 

アンダーラインを引いたようなスタイルが簡単に作成できました。

蛍光ペンっぽくするために、色は彩度が高いものを使用するといいでしょう。

 

色を変更するには上記のコードのlinear-gradientの中の「#ffff66」の部分を好きな色にしましょう。

また%を大きくすると線が細くなり、小さくすると線が太くなります。

 

蛍光ペン風のCSSができたら、HTMLの<span>タグで囲み、そこに先ほどのCSSを指定しましょう。

<span class="marker">蛍光ペン(細)</span>

 

まとめ

蛍光ペンを引いたようなスタイルがあるとテキストをかなり強調できるので、重要な部分を伝えやすくなります。

ブログをやっている人は入れておいて損はないでしょう。