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

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

蛍光マーカーを引く
対象要素の概要
1. span要素
使用するCSSの概要
1. 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>を引く。

line-throughは使えるようにするには・・

透明度を指定して黄色い蛍光ペンでマーカーを引く。

style属性で記述

透明度を指定して<span style="text-decoration: line-through 10px solid #F8FE5299">黄色い蛍光ペンでマーカー</span>を引く。

line-throughを使った蛍光ペン・マーカーはとても見づらいように思います。

対象要素の概要

span要素

span 単語、フレーズ、文章のグループ化コピペで使えるHTML+CSS

テキストの一部分をグループ化し、スタイルシートによる装飾をおこなう際に用いるspan要素の解説。

使用するCSSの概要

linear-gradient関数

linear-gradient 線形グラデーションコピペで使えるHTML+CSS

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