【CSS】蛍光ペンのようなマーカーラインを引こう

テキストを書いていて特定の文章を強調したい時、太字にしたり色を変えたりサイズを変更したりといった方法が考えられますが近年では蛍光ペンでマーカーを引いたような強調サインが特に目を引きます。

このような表現はcssの「linear-gradient(transparent」を使います。
元々はグラデーションをかけるプロパティなのですがグラデーションのかけ方を調整する事でペンで線を引いたようなイメージにするという感じです。

蛍光ペンの マーカーの太さを調整してみる

細目の蛍光ペン

サンプルのテキストです。ここにマーカーが引かれます。

<p>サンプルのテキストです。<span class="hoso_pen">ここにマーカーが引かれます。</span></p>

.hoso_pen{
	background: linear-gradient(rgba(255,255,255,0) 60%, #FFF6B4 60%);
}

太目の蛍光ペン

サンプルのテキストです。ここにマーカーが引かれます。

<p>サンプルのテキストです。<span class="futo_pen">ここにマーカーが引かれます。</span></p>

.futo_pen{
	background: linear-gradient(rgba(255,255,255,0) 0%, #FFF6B4 0%);
}

この2つの違いは色の後ろに書かれた数字の部分です。
数字が大きいほど線が細くなります。

色の変更

「#FFF6B4」の部分がラインの色てす。
この部分のカラーコードを変えれば色を変える事が出来ます。

サンプルのテキストです。ここにマーカーが引かれます。

.keikou_pen{
	background: linear-gradient(rgba(255,255,255,0) 60%, #6DD900 60%);
}

グラデーションのかかった線を引く

ちなみに%の数字を同じ数値にすればベタで引いている線になりますが数値に差をつければグラデーションがかかります。

サンプルのテキストです。ここにマーカーが引かれます。

.keikou_pen02{
	background: linear-gradient(rgba(255,255,255,0) 50%, #FF73FF 80%);
}

注意点

background: linear-gradientの「rgba(255,255,255,0)」の部分は透過を指定する「transparent」でも使えますがsafariだと黒の透過「rgba(0,0,0,0)」という解釈になっていて場合によってはその部分が黒く表示される場合があります。

これを回避するためにサンプルコードでは「rgba(255,255,255,0)」を用いています。

ここでは白ですがその背景に合った色に指定しておくのが良いかもしれませんね。

まとめ

このような形でテキストを強調すると文字にメリハリがついて見やすくなりますね。

太字による表現も良いので両方使い分けて行くのが良いかと思います。