CSSでテキストに蛍光ペンでマーカーを引いたようなデザインを作る方法

CSSでテキストに蛍光ペンでマーカーを引いたようなデザインを作る方法

テキストの一部を強調したいとき、太字にするだけでも強調されてることが伝えられますが、もうちょっと目立つようにしたい場合に蛍光ペンのような演出を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タグでもいいですし。

最後に

テキストを強調する際に僕が好んでよく使っている方法です。テキストの色を変えるよりも目立つイメージがあって好きなんですよね。

使ったことがない方はぜひお試しください。

キーワード
WEBデザイン