Web blog WEBブログ

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

2019.07.01

※この記事は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%)

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

 

まとめ

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

ご相談・カスタマイズご依頼

弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。

兼山暖美

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

この記事を読んだ方はこんな記事も読んでいます

こんにちは。コーダーの兼山です。 今回は、ECサイトのタイムセールや、数値を強調するサイトなどで使える、動きのあるカウン…

こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…

こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…

無料相談窓口