CSSでテキストを蛍光マーカーみたいに強調表示してみる

WEB上でテキストを強調する時には、文字色を変えたり文字を太くしたり下線を引いたり、といった装飾がよく見かけられます。

でもそれだけじゃなくて、よく教科書とかにするような、蛍光ペンで線を引いたりする…。
そう!↑こんな感じで文字を強調したくて、CSSでカンタンに表示できないか調べてみました。

方法は、CSSの「background」の「linear-gradient」属性を使うだけ。
調べてみると思ったよりも簡単です。

※この「linear-gradient」は本来、背景色にグラデーションを敷くためのCSSのようですね。
この辺りは、いずれ掘り下げてみたいと思います。

【サンプル】

文字全体を塗るマーカーになります

文字の半分くらいを塗るマーカーになります

【HTML】

<span class="sample01">文字全体を塗るマーカー</span>になります
<span class="sample02">文字の半分くらいを塗るマーカー</span>になります

【CSS】

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

 

下記のような感じで、線の太さと色を指定します。
background: lineargradient(transparent 〇%, 【線の色】 〇%);

〇%の個所で、線の太さを指定します。
上から背景色の開始位置を%で指定するイメージですね。
sample01は0%(一番上から開始)、sample02は50%の位置から開始します。

厳密な理屈をいうと、グラデーション設定の応用になってくるのですが、ここではそこまで細かく認識しなくてもいいと思います。

色は好きな色を指定できるので、お好みの色を指定してあげてください。

【参照させて頂いたサイト】

https://itbenricho.com/highlighter-marker-css.html

カテゴリーCSS