【CSS】蛍光ペン風の下線(マーカー)を引く方法【サンプルで解説】

テキストで蛍光ペン風の下線を引くのってどうやるの？

強調したい文字は蛍光ペン風の下線が引かれているデザインがあると思います。

WordPressだと有料のテーマであれば簡単にマーカーを引くことが出来ますが、これはCSSでも出来ます。

今回はその方法をご紹介していきます。

じゅんぺいブログは、Web制作（コーディング・WordPress制作）の技術記事を中心に、約500記事公開しています。ぜひ他の記事も参考にしてみてください！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適です。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇
（有料になっていたらすいません🙇‍♂️）

＼ 完全無料 ／

ZeroPlus Gate公式サイト

毎日先着制！

CSSで蛍光ペン風の下線（マーカー）を引く方法

それではサンプルを見てみましょう。

See the Pen
蛍光ペン風下線 by junpei (@junpei-sugiyama)
on CodePen.

サンプルを見ると分かりますが、色の幅を変更することが出来ます。

コード解説

それではコードを見てみます。

HTMLはこちらです。

<p>好きな犬種は<span class="marker-normal">パピヨン</span>です</p>
<p>好きな大型犬は<span class="marker-bold">ゴールデンレトリバー</span>です</p>
<p>好きな動物は<span class="marker-all">ミーアキャット</span>です</p>

spanタグの部分を蛍光ペン風の下線にします。

CSSはこちらです。

.marker-normal {
  background: linear-gradient(transparent 75%, #ffff7f 75%);
}
.marker-bold {
  background: linear-gradient(transparent 50%, #ffff7f 50%);
}
.marker-all {
  background: linear-gradient(transparent 0%, #ffff7f 0%);
}

使うのは background: linear-gradient(); になり、色はもちろん変えられます。

そして線の幅は%の数値で調整することが出来ます。

この数値が小さいほど幅が広くなり、0%にすると文字全部になります。

下線ではなく上に線を引く

通常上に線を引く事はないと思いますが、上に引くことも出来ます。

先ほどのtransparentは透明になり、ここが上の色を指定し、その次の色が下線を指定となります。

なので先ほどのtransparentに色を付けるとこのようになります。

See the Pen
蛍光ペン風下線（応用） by junpei (@junpei-sugiyama)
on CodePen.

ただしどちらも0%の場合は下線100％なので、上の方の色を変えても反映されません。

なので先ほどと色を逆にすれば線を下から上にすることが出来ます。

今回の方法を使えば以下のような実装が可能です。

基本的には下線しか使わないと思いますが、いつか使うときが来るかも知れないので頭の片隅においても損はないかと思います。

以上になります。

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！