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

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

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

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

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

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

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

30日間でWeb制作を学べる
完全無料
現役エンジニアへの質問無制限
オンラインの動画学習なので時間場所を問わず勉強可能
最大4回の学習サポート面談
受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

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

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼完全無料／

ZeroPlus Gate公式サイト

先着1日25名まで！

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%にすると文字全部になります。