CSS Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
1,100部以上販売し、レビューは630件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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色に分ける

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

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-CSS, Web制作