SampleCSS

マーカーを引く

ユーザーに文章に注目してもらうための方法として、「文字を太字にする」、「フォントサイズを大きくする」以外に、マーカーのような線を引くというテクニックがあります。
これは、複数行にわたる場合も正しく線を引くことができ、一瞬でユーザーに意味を伝えることができるため、かなり効果的であると思います。
実装方法としては、太字にしたい部分をinline要素で囲み(ユーザーに注目してもらいたい場合は b要素、装飾以外の目的がない場合はspan要素)背景色をbackgroundプロパティで指定します。今回は単色ですが、グラデーションにしたい場合は以下のように設定すると、上から黄色、赤色のグラデーションにすることが可能です。

background: linear-gradient(transparent 50%, yellow 50%, red 100%);
©︎ RyoTa.
Privacy Policy