テキストの一部を強調したいとき、太字にするだけでも強調されてることが伝えられますが、もうちょっと目立つようにしたい場合に蛍光ペンのような演出をCSSだけで加えることができます。
テキストの下半分にマーカーを引いたようにする方法について、CSSの具体的な記述方法をご紹介します。
テキストにマーカーを引くためのCSS記述例
マーカーを実現するためには下記のように1行書くだけです。
.marker {
background: linear-gradient(transparent 60%, #ffff7f 0%);
}
編集するのは「60％」「#ffff7f」と書かれた2か所。前者でマーカーの太さを、後者でマーカーの色を指定します。
「background: linear-gradient」というのはグラデーションの時に使うものです。「transparent 60%」というのが、テキストの上から60％分を透明にするという意味で、上から透明で塗りつぶしていくことでマーカーの太さを調整できるというわけです。
こういう理屈なのでこの数字が大きいほどマーカーは細くなります。透明の部分を太くすることでマーカーの太さを調整しているので。
「#ffff7f 0%」のところには好きな色を指定してください。今回の例だと黄色です。
strongタグにクラス名を指定して使う
マーカーの箇所は強調箇所だと思うので、strongタグを使うのが良いかと思います。
文章の中の<strong class="marker">強調箇所</strong>だけHTMLタグで囲います。
strongタグにはすでにデザインを当てている場合は他のHTMLタグを使っても構いません。例えばspanタグでもいいですし。
最後に
テキストを強調する際に僕が好んでよく使っている方法です。テキストの色を変えるよりも目立つイメージがあって好きなんですよね。
使ったことがない方はぜひお試しください。