【CSS】テキストを下線じゃなくてマーカー線(蛍光ペン風)でハイライトする方法

プログラミング

おはこんばんにちは!ノボル(@Veritas40835638)です。

下のテキストみたいに、CSSで文字にマーカー線を引きたいんだけど、やり方わかる?

サンプルテキスト

CSSでテキストをハイライトするのは簡単だよ。さっそく説明するね!


テキストのハイライトは、Webサイトやブログなどでよく使われますよね。

どれだけコンテンツの質が良くとも、読みづらければ、ユーザーは離脱してしまいます。当然、PV数や収益にも影響してくるので、できるだけ読みやすい文章を書くように心がけましょう。

テキストを読みやすくするためには、テキストを適度にハイライトして、コンテンツの可読性を上げる必要があります。

そこで今回は、CSSでテキストをマーカー線(蛍光ペン風)でハイライトする方法について解説します!

こんな人に読んでほしい

・テキストをマーカー線でハイライトする方法を知りたい人

テキストをマーカー線(蛍光ペン風)でハイライトする方法

linear-gradient()属性」を使うことで、テキストをマーカー線(蛍光ペン風)でハイライトすることができます。


線の太さを変える

黄色の蛍光ペン(太)


黄色の蛍光ペン(細)

backgroundの「〇〇」の数値を、低くすれば太くなり、高くすれば細くなります。

線の色を変える

次に、マーカーの色を変えてみましょう。

赤色の蛍光ペン


青色の蛍光ペン


緑色の蛍光ペン

#〇〇〇〇〇〇」の部分を変更するだけで、色を変更することができます。

最後に

今回の記事では、CSSでテキストをマーカー線(蛍光ペン風)でハイライトする方法について解説しました。

テキストコンテンツの重要な要素です。読みづらい文章は、ユーザビリティの悪化だけでなく、PV数や収益にも影響します。

なので、適度にテキストをハイライトして、できるだけ読みやすい文章を書くように心がけましょう!

最後まで読んで頂き、ありがとうございました(o^^o)

コメント

タイトルとURLをコピーしました