CSS 蛍光ペンマーカー風の下線をテキストに引く方法

2020/07/30

読了時間: 約3
蛍光ペンマーカー風下線のCSS

こんにちは、鈴木俊吾(@suzushin7)です。

他の方のブログ記事を読んでいると…。
時々、文章中のテキストを強調するのに、蛍光ペンマーカー風の下線が引かれていることがあります。

あれ、良いですよね!
ぜひとも、自分のブログでも導入してみよう!
そう思った私は、早速やり方を調べてみました。

すると、非常に単純な仕組みで実装できることが分かりましたよ。
具体的にはCSSの設定をして、後は普通にHTMLでマークアップするだけ。
あっ、それだけなのね。

これなら、サクッと実装できそうだと思い、早速作業に取り移りました。
作業にかかった時間は、およそ5分程でしょうか。
すごく簡単でしたよっ!

この記事では、その蛍光ペンマーカー風の下線を引くために必要な設定方法と、HTMLのマークアップ方法について解説します。
とても簡単お手軽に実装できますので、ぜひ最後までお付き合いください。

スポンサーリンク

蛍光ペンマーカーのCSS設定

蛍光ペンマーカー風の下線を引くために使用するCSSは、「linear-gradient()」属性です。

名前からしてお分かりかと思いますが、通常は線形グラデーションを実現するのに使われます。
これは例えば以下のようにして使います。

background: linear-gradient(transparent 0%, #cc0000 0%);

蛍光ペンマーカーの色

蛍光ペンマーカーとして設定する際は…。
最初に指定する色を「transparent」、すなわち透明にしておきます。
そして、次の色でマーカーの色を指定します。

蛍光ペンマーカー風の下線

<span style="background: linear-gradient(transparent 0%, #ff7777 0%);">蛍光ペンマーカー風の下線</span>

蛍光ペンマーカー風の下線

<span style="background: linear-gradient(transparent 0%, #77ff77 0%);">蛍光ペンマーカー風の下線</span>

蛍光ペンマーカー風の下線

<span style="background: linear-gradient(transparent 0%, #7777ff 0%);">蛍光ペンマーカー風の下線</span>

蛍光ペンマーカーの太さ

ちなみに、「%」の部分ですが…。
この割合は、線の太さに対応しています。
割合を大きくすると細く、小さくすると太くなります。

下線っぽくするなら、0%より大きな値を設定しましょう。
個人的には、40%〜60%くらいがちょうど良いかなと思います。

蛍光ペンマーカー風の下線(0%)

<span style="background: linear-gradient(transparent 0%, #ff7777 0%);">蛍光ペンマーカー風の下線(0%)</span>

蛍光ペンマーカー風の下線(60%)

<span style="background: linear-gradient(transparent 60%, #ff7777 60%);">蛍光ペンマーカー風の下線(60%)</span>

実際に利用する際は、CSSのクラスとしてマーカーの色を設定しておきます。
例えば、以下のようなイメージ。

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

そして、蛍光ペンマーカーを引きたい部分をspanタグで囲います。

<span class="marker">蛍光ペンマーカーを引きたい部分</span>

ひとこと

今回の記事では、蛍光ペンマーカー風の下線を引くためのCSS設定方法について解説してみました。

基本的には、CSSを準備するだけですので…。
特に難しい点はありませんね。
私の場合、設定自体は5分程でできましたよ。

蛍光ペンマーカーの色は、RGB指定なので自由に色が設定できます。
ぜひあなたのお気に入り色でマーカーを引いてみてくださいね!

(Today: 1 PV, Total: 11 PV)

スポンサーリンク