CSS
CSSでテキストに蛍光ペンっぽく背景をつける方法（複数行もOK）
2021年03月05日 10:00 2021年03月08日
こんにちは、社員Kです。
本日はCSSで、テキストに蛍光ペンっぽく背景をつける方法（複数行もOK）についてご紹介します。
background:linear-gradient を使う
複数行にマーカーを引くには、background:linear-gradientを使用します。
ポイントは、対象とするタグを inline要素 として指定してあげることです。
サンプルコードの紹介
<div class="txt_marker"> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。<br> テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。 </div>
.txt_marker{
display: inline;
background: linear-gradient(transparent 60%, yellow 15%);
}
いかがでしたでしょうか？
実は簡単にできる、複数行テキストへの蛍光ペン風マーカーのCSSのご紹介でした。
関連記事
この記事を書いた人
社員K
福岡でWebプログラマー・フロントエンドエンジニアとして10年目。まだまだ勉強することが沢山あるなぁと最近良く思います。日本語には自信があります。すぐに効くダイエット情報募集中！
