【css】蛍光ペンで引いたようなラインマーカーをテキスト上に設置する方法

文中の文字を強調したいときどういった手法を使いますか？

「文字を太文字に変える」
「文字の色を変える」
「アンダーラインを加える」

これだけでは、少しバリエーションが少ないようにおもいませんか？

そこで、今回は、cssで蛍光ペンのラインマーカーをテキストに配置する方法をご紹介します。

蛍光ペンといえば、誰しも教科書の重要な部分にマーカーを引いた思い出があるはずです。そんな、親しみやすく馴染みのある手法を使わない手はないですよね？

それでは、早速設置方法を見てみましょう！

文字全体に蛍光ペンのラインマーカーを引いたイメージ

まずは、文字全体を覆う感じでラインマーカーを引いたイメージを表現してみましょう。
サンプルは定番の黄色マーカーを表現します。

蛍光ペンのマーカーを配置したいテキストをで囲いました。

<span>に対して「background-color」を設置しました。

たったこれだけで大丈夫です。

該当箇所をインライン要素「<span>」で囲んでいるので文章の折り返しにも対応できます。

次は、少し応用の利いた方法を見てみましょう。

文字の下側にかかるように蛍光ペンを引いたイメージ

今度は、テキストの下側に被る感じで蛍光ペンを引いた表現をみてみましょう。
先ほどの全体を覆うやり方とは違って、文字の半分くらいに蛍光ラインがかかるイメージで表現してみます。
こういった手法は、実際に蛍光ペンを引くときも使ったすると思いますが、全体を覆うより見やすく、より強調されて見える効果もあるのかもしれませんね。

今度は蛍光ペンを「linear-gradient」を使って表現しています。

少し解説を付け加えておくと、linear-gradientの変化する方向が省略されているのでデフォルト（上から下）で変化します。transparentは透明を示し60%まで透明、60%以降は蛍光ペンの色になります。

つまり、０％なら、transparent（透明）が表示されないので「background-color」の時と同じく、全体が蛍光色になり、100％に近い程マーカーラインは細く表現されます。

linear-gradientについてはこちらで詳しく解説しております。

蛍光ペンの色サンプル

最後に蛍光ペンの色サンプルを用意しました。

黄色は先ほど紹介しましたので、これも定番でよく使われるピンク、
それから、使いやすそうな青、緑のサンプルを作ってみました。

蛍光ペンピンク

蛍光ペン青色

蛍光ペン緑色

まとめ

文中に蛍光ペンの装飾を使うと、サイト全体が鮮やかで見やすくなりますよね。
使い方も簡単ですし、ぜひお気に入りのパターンを見つけてみてください！

ただし、多様しすぎると逆に見にくくなることがあるのでご注意ください。
それこそ教科書にたくさんマーカーを引きすぎて要点がわからなくなってしまうあの状況に陥ってしまいますので。