コピペでできる！CSSで文字にマーカーを引く方法

2021年3月13日 2021年3月13日

ブログなどのWEBサイトでよく見るマーカーを引いてあるような文字のデザインありますよね。

こんな感じのマーカーが簡単に引けちゃいます。

これ、実は結構簡単にできます。

今回は、このマーカーデザインのCSSを紹介します。

HTML / CSSの記述

実際のHTMLとCSSは下のようになっています。

HTML：

<p>こんな感じの<span class="marker">マーカーが簡単に引けちゃいます。<span></p>

CSS：

.marker{
  background: linear-gradient(transparent 65%, #fff799 65%); /*マーカーの色、幅を指定*/
  font-weight: bold; /*マーカー部分の文字を太字*/
}

意外と簡単でしょ？

linear-gradient()は背景にグラデーションを設定するとに使うのですが、今回は難しいことは置いといてマーカーを引くときに必要な部分だけ解説します。

マーカーを引いているのは下の記述の部分です。

background: linear-gradient(transparent 65%, #fff799 65%);

色の指定は下の太字の部分です。

background: linear-gradient(transparent 65%, #fff799 65%);

ここでは#fff799で薄めの黄色を指定しています。この部分を皆さんが自分が使いたい色に変えてください。

マーカーの太さは下の太字の部分です。

background:linear-gradient(transparent 65%, #fff799 65%);

この2つの○○％の部分で太さを決めています。ここは、基本的に2ヶ所とも同じ数値にします。

0%に近くほど太くなり、100%に近ずくほど細くなります。個人的には、60%~75%ぐらいが好みですが、皆さんも色々な太さを試してみてください。

意外と簡単に簡単だったのではないでしょうか。

色や太さを変えたマーカーを何パターンか用意しておくと便利ですね。

この記事を書いた人