全国対応！外注・下請けのホームページ制作会社をお探しの会社様。
人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい
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%)
今回のマーカーの指定は、このグラデーション指定を利用した表現となります。
まとめ
テキストの強調・アピールに役立ちます。
色や太さを好みで調整し、活用してください。
ご相談・カスタマイズご依頼
弊社では上記ブログ内容にある修正・カスタマイズのご依頼も承っております。
ご自身で行ってみて上手くいかない場合などこちらよりお気軽にご相談ください。
この記事を書いた人 兼山 暖美 エンジニア
この記事を読んだ方はこんな記事も読んでいます
こんにちは。コーダーの兼山です。 コーディング時にtableで表を組み込む際、レスポンシブコーディングなどでのスマートフ…
こんにちは。コーダーの兼山です。 前回は、reCAPTCHAを設置するために必要となる、GoogleへWEBサイト登録と…
