【デモあり】CSSを使ってテキストに、
蛍光ペン風のマーカーを付けて強調する方法

2023.07.15
2019.06.18

色々なブログ記事を見ていると、誰がスタートで広めたかはわからないのですが、多くのブログで協調したいところに、蛍光ペンのようなマーカー（←これです）で装飾されているのを見かける事が多いかと思います。

多くの人が見ているからか、実際に自分たちが運営側に立った時、コンテンツマーケティングやオウンドメディア系の制作・運用代行などのクライアント様から、自分たちのサイトでもやりたいという相談をいただく機会があります。

せっかくなので、今回はこの蛍光ペン風マーカーを付ける方法についてまとめてみたいと思います。一般的には単色のマーカー色でやることが多いですが、せっかくなので、少し凝ったグラデーションカラーのマーカーを作る方法も合わせて紹介しておきたいと思います。

この記事の目次

蛍光ペン風のマーカーを付ける実際のコード

通常の背景色のbackground-colorを使うだけでは、蛍光ペン風にはならず、ただの背景色を塗りつぶすだけになってしまいます。蛍光ペン風のマーカーを引くためには、background: linear-gradientを使って設定をしていきます。

.marker {
  background: linear-gradient( transparent 50%, #ffff99 50% );
 }

必要な設定はこれだけです。
マーカーを付けたい箇所を、のタグで囲ってclassを指定してあげれば、問題なく使えます。

個人的には蛍光マーカーの左右に少し余白を取っておいた方が見栄えが良いので、padding: 0px 5px;あたりも一緒に使うと尚良いと思います。

linear-gradientの解説

linear-gradientを使う事で、いわゆる線形のグラデーションを設定できるものになります。「,」カンマで区切った色で上下のカラーを設定するというものになります。

.sample {
  background-image: linear-gradient( #ff0000, #ffff00 );
}

こう設定した場合、上半分を赤（#ff0000）下半分を黄色（#ffff00）にするという設定で、境目は指定をしなければ真ん中になります。

赤と黄色でグラデーションがかかります

これを応用して、蛍光マーカーの色を設定していくという形になります。

.marker {
  background: linear-gradient( transparent 50%, #ffff99 50% );
 }

この指定をすることで、上半分はtransparentで透明にし、下半分を黄色という設定になり、さらに50%の数値をいじることで、グラデーションの縁の位置を変える事ができ、%を指定することで、グラデーションの縁がよりはっきりしたものになります。

50%の指定をしないで、transparent, #ffff99と指定するとこうなります。逆に、50%を指定してあげて、transparent 50%, #ffff99 50%と指定すると、こういう見え方になります。

当然ながら、%の数値を変えることによって、グラデーションの高さを変更する事が可能です。
transparent 20%, #ffff99 20%と指定すると、こういう見え方になります。し、transparent 70%, #ffff99 70%と指定すると、こういう見え方になります。
なんだかんだで結局は40～60%くらいが一番良い感じのマーカーになるかと思います。

インライン要素に使わないと改行などの際におかしくなる

マーカーの設定自体は、タグでもタグでも設定することは可能ですが、基本的なルールとしては、などのインライン要素に付ける事が推奨されます。

などのブロック要素に付与してしまうと、少し長めの文章などで途中で改行が入ってしまったりする場合、マーカーの位置がおかしい位置になってしまいます。

これは実際の事例・サンプルを見た方がわかりやすいので、下記をご確認ください。

inline要素のに付けた場合

インライン要素とブロック要素でマーカーがどう変わるかのテスト。インライン要素とブロック要素でマーカーがどう変わるかのテスト。インライン要素とブロック要素でマーカーがどう変わるかのテスト。

block要素のに付けた場合

設定の仕様上、このようにブロック要素に付与してしまうと、長くなって改行が入ると少しおかしな設定になってしまいますので、必ずインライン要素に設定するようにしましょう。実際のケースではに付与して作動させる事が多いかと思います。

カラー毎に設定をしておくと用途に合わせて使いやすい

蛍光ペンというと、だいたいパステルカラーで使われる事が多く、先ほど黄色系、ピンク系、ブルー系、グリーン系、などが中心になりながら、パープル系、オレンジ系など自分たちのサイトに合わせたカラーを予めcssで用意しておくと良いかと言えます。

.marker-pink{
  background: linear-gradient( transparent 50%, #ff99cc 50% );
}

.marker-green{
  background: linear-gradient( transparent 50%, #99ff99 50% );
}

.marker-blue{
  background: linear-gradient( transparent 50%, #99ccff 50% );
}

.marker-orange{
  background: linear-gradient( transparent 50%, #ffcc88 50% );
}

実際にこのマーカーを設定すると、下記のようになります。

インライン要素での設定になるので、文章の途中でカラーを変える事もできます。
ピンク風蛍光ペンのマーカーを用意したり、ブルー風の蛍光ペンマーカーであったり、グリーン風の蛍光ペンマーカー、オレンジ風の蛍光ペンマーカーなどなど、それぞれ途中で変えていくことができます。

とはいえ、実際の現場でこんなに複数のカラーを多用することはありませんので、各サイトに合わせた用意をしておくようにして、使いすぎて見づらくならないように注意しながら使うようにしましょう。