cssでテキストにマーカー線（蛍光ペン）を付ける方法-webaby【エンジニアお父さんの育児・子育て】

最近のサイトでは、テキストのフォントも手書き風などがあり、サイトによっていろいろな装飾ができるようになってきています。特にブログサイトでは、本を読んでいるようなデザインもあります。

ただし、テキストによっては重要なポイントなどもあり、アピールしたい部分を太文字だけで終わらせていたりしませんか？

そんな方には、テキストにマーカー線を付けてみるだけで見やすく鮮やかなデザインに変わります。

また、学生時代に重要な部分を蛍光ペンで線を引いたりしたことはありませんか？

今回は、そんな蛍光ペンで線を引いたように装飾できるcssをご紹介します。

1. cssのbackgroundで蛍光ペンのような線を引く
2. cssの解説

cssのbackgroundで蛍光ペンのような線を引く

蛍光ペンのような線をテキストの背面に付ける方法はすごく簡単です。

下記のコードのspan部分をつけるだけで、後はcssに1つ装飾を指定してあげるだけです。

spanにクラス名（今回はmarker）をつけて下記の様にcssを指定します。

これで簡単にマーカー線をつけることができます。

cssをつけると下記のように表示されます。

ここは通常のテキストが表示されます。
ここに蛍光ペンのような線が引かれます。ここは通常のテキストが表示されます。

cssの解説

backgroundで linear-gradient(transparent 50%, #fbf1ae 0%)と指定しますが、この（）の中を知ることで、サイトに合ったマーカーをつけることができます。

transparent 50%の「％」の数値を大きくすることでマーカーの太さが細くなっていきます。

その横の#fbf1aeですが、これはカラーコードになります。これで好みの色を付けることができます。あまり明るすぎると読みにくくなったりもしますので注意が必要です。

カラーコードの右にもう一つ「％」がありますが、これはマーカー線と透過されている部分をどのくらいハッキリとさせるかという数値になります。

これを100%にすると白色から黄色のグラデーションのように表示されます。マーカー線として使うのであれば、0%で問題ないです。

linear-gradient(transparent 50%, #fbf1ae 0%)に関して、サイトのデザインに合わせてカスタマイズするにはtransparentとカラーコードを変更するだけで、カスタマイズできますので、ぜひ試してみてください。