CSSで蛍光ペンのようなマーカーを引く方法 – 文章を装飾して見やすくする

2024年1月12日2024年2月23日

ブログサイトなどの文章でよく見かける蛍光ペンのような装飾（マーカー）ですが、どのように実装されているかご存じでしょうか。方法としてはいくつかございますが、今回は一般的な実装方法について解説いたします。

マーカーの引き方

テキスト全体を覆う場合

background-colorプロパティを使用

<p class="text">今回は<span class="marker">マーカーの引き方</span>について解説いたします。</p>

<style>
  .marker {
    background-color: #faff6b;
  }
</style>

マーカーを引きたいテキストをspanタグで囲み、background-colorプロパティで色（#faff6b）を指定しています。

テキスト全体に色を付ける場合はこの方法で問題ないですが、文字の下半に色を付けるといった場合だと、background-colorプロパティでは実現ができません。

テキストの下側にマーカーを引く方法

border : linear-gradient を使用する方法

borderプロパティのlinear-gradientはグラデーションを表現する値ですが、これを応用して蛍光ペンのようなデザインを作成します。

<p class="text-2">今回は<span class="marker">マーカーの引き方</span>について解説いたします。</p>

<style>
  .text-2 .marker {
    background: linear-gradient(transparent 50%,#faff6b 50%);
  }
</style>

linear-gradientに２つ値が設定しております。1番目に設定する値は「要素の上側から〇％の位置までこの色です」といった意味合いになります。

1番目にtransparentとありますが、こちらは透明を表す色指定です。上記の説明に当てはめると「要素の上から50%は透明です」となることがわかります。

2番目に設定された色で線が引かれますが、1番目に指定した％と同じ値にすることで、グラデーションが付きません。

<p class="text-2">今回は<span class="marker">マーカーの引き方</span>について解説いたします。</p>

<style>
  .text-2 .marker {
    background:linear-gradient(transparent 70%,#faff6b 70%);
  }
</style>