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