HTML/CSS

CSS 蛍光ペンマーカー風の下線をテキストに引く方法

蛍光ペンマーカー風下線のCSS

こんにちは、鈴木俊吾(@suzushin7)です。

他の方のブログ記事を読んでいると…。
時々、文章中のテキストを強調するのに、蛍光ペンマーカー風の下線が引かれていることがあります。

あれ、良いですよね!
ぜひとも、自分のブログでも導入してみよう!
そう思った私は、早速やり方を調べてみました。

すると、非常に単純な仕組みで実装できることが分かりましたよ。
具体的にはCSSの設定をして、後は普通にHTMLでマークアップするだけ。
あっ、それだけなのね。

これなら、サクッと実装できそうだと思い、早速作業に取り移りました。
作業にかかった時間は、およそ5分程でしょうか。
すごく簡単でしたよっ!

この記事では、その蛍光ペンマーカー風の下線を引くために必要な設定方法と、HTMLのマークアップ方法について解説します。
とても簡単お手軽に実装できますので、ぜひ最後までお付き合いください。

蛍光ペンマーカーのCSS設定

蛍光ペンマーカー風の下線を引くために使用するCSSは、「linear-gradient()」属性です。

名前からしてお分かりかと思いますが、通常は線形グラデーションを実現するのに使われます。
これは例えば以下のようにして使います。

background: linear-gradient(transparent 0%, #cc0000 0%);

蛍光ペンマーカーの色

蛍光ペンマーカーとして設定する際は…。
最初に指定する色を「transparent」、すなわち透明にしておきます。
そして、次の色でマーカーの色を指定します。

蛍光ペンマーカー風の下線

<span style="background: linear-gradient(transparent 0%, #ff7777 0%);">蛍光ペンマーカー風の下線</span>

蛍光ペンマーカー風の下線

<span style="background: linear-gradient(transparent 0%, #77ff77 0%);">蛍光ペンマーカー風の下線</span>

蛍光ペンマーカー風の下線

<span style="background: linear-gradient(transparent 0%, #7777ff 0%);">蛍光ペンマーカー風の下線</span>

蛍光ペンマーカーの太さ

ちなみに、「%」の部分ですが…。
この割合は、線の太さに対応しています。
割合を大きくすると細く、小さくすると太くなります。

下線っぽくするなら、0%より大きな値を設定しましょう。
個人的には、40%〜60%くらいがちょうど良いかなと思います。

蛍光ペンマーカー風の下線(0%)

<span style="background: linear-gradient(transparent 0%, #ff7777 0%);">蛍光ペンマーカー風の下線(0%)</span>

蛍光ペンマーカー風の下線(60%)

<span style="background: linear-gradient(transparent 60%, #ff7777 60%);">蛍光ペンマーカー風の下線(60%)</span>

実際に利用する際は、CSSのクラスとしてマーカーの色を設定しておきます。
例えば、以下のようなイメージ。

.marker {
  background: linear-gradient(transparent 60%, #ff7777 60%);
}

そして、蛍光ペンマーカーを引きたい部分をspanタグで囲います。

<span class="marker">蛍光ペンマーカーを引きたい部分</span>

ひとこと

今回の記事では、蛍光ペンマーカー風の下線を引くためのCSS設定方法について解説してみました。

基本的には、CSSを準備するだけですので…。
特に難しい点はありませんね。
私の場合、設定自体は5分程でできましたよ。

蛍光ペンマーカーの色は、RGB指定なので自由に色が設定できます。
ぜひあなたのお気に入り色でマーカーを引いてみてくださいね!

著者情報

鈴木俊吾(すずきしんご)
鈴木俊吾(すずしん)

座右の銘は『一度きりの人生、楽しむべきだよね絶対!』。
大卒(情報科学)→公務員浪人→無職→フリーライター。

趣味は、音楽鑑賞/読書/カラオケ/マジックザギャザリング(MTG)。
好きな歌手は、水樹奈々/TUBE/ナオト・インティライミ/いきものがかり/奥華子など。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)