【CSS】テキストに蛍光マーカーのような線を引く（複数行でも可）

【CSS】コピペOK！テキストに蛍光マーカーのような線を引く（複数行でも可）

テキストに蛍光マーカーのような線を引く方法。このサイトでも こんな感じで 蛍光イエローのイメージで使っています。

目次

テキストに蛍光マーカーのような線を引くサンプル

文章の中にハイライトされた箇所があるとその文字が強調されて読みやすくなるほか、手書きノートのようなやわらかいイメージにもなります。CSSの線形グラデーションを使って実現できます。

コードはこちら

<!-- 複数行に対応させるにはインライン要素である必要があるので、
     ラインを引きたい部分のみspanタグで囲みます -->
<p><span class="highlighter">マーカーを引きたい文字</span>です</p>
.highlighter {
  background: linear-gradient(transparent 35%, #8cffaf 0%);
}

※複数行に対応させるにはインライン要素である必要があるので、ラインを引きたい部分のみspanタグで囲みます。

【ざっくり解説】テキストに蛍光マーカーのような線を引く仕組み

線形グラデーションを利用する

線形グラデーション（background: linear-gradient）はその名の通り本来はグラデーションをつけるためのスタイルで、マーカー風にするにはまず「透明」と「マーカーの色」の2色を指定。さらにその領域のパーセンテージ指定を工夫することで色の境界をくっきり分けることができます。

下記はシンプルに透明と緑の2色を指定しただけのもの。（透明 = transparent。）2色の間が自動的にグラデーションになるためマーカー感は出ません。
※全体の領域が分かりやすいように黒い線で囲んでいます

マーカーを引きたい文字です

background: linear-gradient(transparent, #8cffaf);

2色の境界線をくっきり明確にする

透明にしたい部分に縦幅のパーセンテージを追加。そしてマーカー色部分に0%を指定することでくっきりした境界線になります。

マーカーを引きたい文字です

background: linear-gradient(transparent 35%, #8cffaf 0%);

透明部分のパーセンテージを変更するとマーカーの太さが変わる

例えば透明部分を70%に変えてみると透明の領域が広がり、下記のようになります。

マーカーを引きたい文字です

background: linear-gradient(transparent 70%, #8cffaf 0%);

まとめ

文中で強調したい文字にマーカーがあるとメリハリがついて読みやすくなります。学生時代のノートや教科書が連想されてアナログな雰囲気になるのもいいですね。

関連記事