Web blog WEBブログ

蛍光マーカー風の下線をCSSで作る方法

2019.07.01

こんにちは。コーダーの兼山です。

蛍光マーカー風の下線をCSSで作る方法をご紹介します。

蛍光ペン、クレヨンマーカー、アンダーラインマーカー等、呼ばれていますね。
htmlとCSSで指定できます。

マーカーをhtmlとcssで指定する

linear-gradient()を使います。

上記デモのCSSを例にします。
background: linear-gradient(transparent 60%, #ff99cc 0%);

「transparent 60%」のパーセントの値が小さいとマーカーが太く、大きいとマーカーが細くなります。
#ff99cc 0%」の0%はそのまま。
#ff99ccの部分でカラーを指定します。

linear-gradientについて

linear-gradientはグラデーションの指定をする属性です。

linear-gradient(transparent 線の太さ, 線の色 0%)

今回のマーカーの指定は、このグラデーション指定を利用した表現となります。

 

まとめ

テキストの強調・アピールに役立ちます。
色や太さを好みで調整し、活用してください。

兼山暖美

この記事を書いた人 兼山 暖美 エンジニア

無料相談窓口