テキストで蛍光ペン風の下線を引くのってどうやるの？
強調したい文字は蛍光ペン風の下線が引かれているデザインがあると思います。
WordPressだと有料のテーマであれば簡単にマーカーを引くことが出来ますが、これはCSSでも出来ます。
今回はその方法をご紹介していきます。
Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう！
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色に分ける
基本的には下線しか使わないと思いますが、いつか使うときが来るかも知れないので頭の片隅においても損はないかと思います。
以上になります。
この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！
