おはこんばんにちは！ノボルです。
下のテキストみたいに、CSSで文字にマーカー線を引きたいんだけど、やり方わかる？
サンプルテキスト
CSSでテキストをハイライトするのは簡単だよ。さっそく説明するね！
テキストのハイライトは、Webサイトやブログなどでよく使われますよね。
どれだけコンテンツの質が良くとも、読みづらければ、ユーザーは離脱してしまいます。当然、PV数や収益にも影響してくるので、できるだけ読みやすい文章を書くように心がけましょう。
テキストを読みやすくするためには、テキストを適度にハイライトして、コンテンツの可読性を上げる必要があります。
そこで今回は、CSSでテキストをマーカー線(蛍光ペン風)でハイライトする方法について解説します！
こんな人に読んでほしい
・テキストをマーカー線でハイライトする方法を知りたい人
テキストをマーカー線(蛍光ペン風)でハイライトする方法
「linear-gradient()属性」を使うことで、テキストをマーカー線(蛍光ペン風)でハイライトすることができます。
線の太さを変える
黄色の蛍光ペン(太)<p class=".yellow-marker-thick">黄色の蛍光ペン(太)</p>.yellow-marker-thick {
background: linear-gradient(transparent 0%, #ffff66 0%);
}<p class=".yellow-marker-thin">黄色の蛍光ペン(細)</p>.yellow-marker-thin {
background: linear-gradient(transparent 60%, #ffff66 60%);
}backgroundの「〇〇％」の数値を、低くすれば太くなり、高くすれば細くなります。
線の色を変える
次に、マーカーの色を変えてみましょう。
赤色の蛍光ペン<p class=".red-marker">赤色の蛍光ペン</p>.red-marker {
background: linear-gradient(transparent 60%, #FF0000 60%);
}<p class=".blue-marker">青色の蛍光ペン</p>.blue-marker {
background: linear-gradient(transparent 60%, #0000FF 60%);
}<p class=".green-marker">緑色の蛍光ペン</p>.green-marker {
background: linear-gradient(transparent 60%, #008000 60%);
}「#〇〇〇〇〇〇」の部分を変更するだけで、色を変更することができます。
最後に
今回の記事では、CSSでテキストをマーカー線(蛍光ペン風)でハイライトする方法について解説しました。
テキストはコンテンツの重要な要素です。読みづらい文章は、ユーザビリティの悪化だけでなく、PV数や収益にも影響します。
なので、適度にテキストをハイライトして、できるだけ読みやすい文章を書くように心がけましょう！
最後まで読んで頂き、ありがとうございました(o^^o)
コメント