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

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

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

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

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

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％なので、上の方の色を変えても反映されません。

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

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

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

以上になります。

コーディングの時給と作業効率を上げる！

2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。

• コピペで使えるWordPressの各テンプレート
• 実務でよく使う見出し一覧
• 実務でよく使うテキストのhoverアニメーション
• 実務でよく使うボタン内の矢印9種類
• Contact Form 7の色々・・・

などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短＝時給アップに繋がります。

さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。

1060部以上販売し、レビューは520件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ！5大無料特典あり🎁

販売ページとレビューを見てみる

Twitterのレビューはこちら