コーディング Web制作 CSS

【CSS】蛍光ペン風の下線(マーカー)を引く方法

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

という事が可能です。

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

 

コーディング案件の単価と作業効率を上げる!

Brain総合ランキング1位獲得 & 3日で500部突破

累計670部突破

クチコミ約370件
(平均スコア

今だけ!5つの無料特典あり🎁

👇画像をクリック

  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月8.4万PV▶︎Twitterのフォロワーは5700人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計390万円突破

-コーディング, Web制作, CSS