リアルな蛍光マーカーを引く コピペで使えるHTML+CSS

スポンサーリンク

文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンも再現!

蛍光マーカーを引く

ピンクの蛍光ペンでマーカーを引く

リアルな質感を出すため、境界に若干グラデーションをかける

まず、ピンクのbackgroundを上16%から下100%まで塗り、#ffffffのbackgroundを下から上へ16%分塗りします。テキストのbackgroundに応じて#ffffffの部分を変更します。

linear-gradientを使って、ピンクの蛍光ペンでマーカーを引く。
style属性で記述
linear-gradientを使って、<span style="background: linear-gradient(to bottom, transparent 16%, #ff66bb 18%);"><span style="background: linear-gradient(to top, #ffffff 16%, transparent 18%);">ピンクの蛍光ペンでマーカー</mark></mark>を引く。
スタイルシートで記述
テキストグラデーションを使用せず、<span class="span-marker-gradient"><span class"span-marker-gradient-2">バックグラウンド</mark></mark>で描写します。
.span-marker-gradient{ 
  background: linear-gradient(to bottom, transparent 16%, #ff66bb 18%);
}
.span-marker-gradient-2{
  background: linear-gradient(to top, #ffffff 16%, transparent 18%);
}

黄色い蛍光ペンでマーカーを引く

黄色い蛍光ペンでマーカーを引く。
style属性で記述
<span style="background: linear-gradient(to bottom , transparent 16%, #F8FE52 18%);"><span style="background: linear-gradient(to top , #ffffff 16%, transparent 18%);">黄色い蛍光ペンでマーカー</span></span>を引く。

青い蛍光ペンでマーカーを引く

青い蛍光ペンでマーカーを引く。
style属性で記述
<span style="background: linear-gradient(to bottom , transparent 16%, #00B0F0 18%);"><span style="background: linear-gradient(to top , #ffffff 16%, transparent 18%);">青い蛍光ペンでマーカー</span></span>を引く。

緑の蛍光ペンでマーカーを引く

緑の蛍光ペンでマーカーを引く。
style属性で記述
<span style="background: linear-gradient(to bottom , transparent 16%, #22F302 18%);"><span style="background: linear-gradient(to top , #ffffff 16%, transparent 18%);">緑の蛍光ペンでマーカー</span></span>を引く。

line-throughは使えません!

黄色い蛍光ペンでマーカーとなってしまいます。

style属性で記述
<span style="text-decoration: line-through 10px solid #F8FE52"><span style="background: linear-gradient(to top , #ffffff 16%, transparent 18%);">黄色い蛍光ペンでマーカー</span></span>を引く。

対象要素の概要

span要素

span 単語、フレーズ、文章のグループ化 コピペで使えるHTML+CSS
テキストの一部分をグループ化し、スタイルシートによる装飾をおこなう際に用いるspan要素の解説。

使用するCSSの概要

linear-gradient関数

linear-gradient 線形グラデーション コピペで使えるHTML+CSS
CSSのlinear-gradient()はグラデーションを実現します。上から下、下から上に限らず、斜めにグラデーションも。開始位置、終了位置の指定方法など具体例をあげながら解説。