文字に蛍光マーカーを引くためにlinear-gradientを使用します。開始位置の高さと終了位置の高さを調整し、加えてグラデーションを載せることで文字にマーカーを引いたような自然な雰囲気を再現します。ピンク、黄色、青、緑の蛍光ペンも再現!wordpressであれば、AddQuicktagプラグインに登録をしておくとよいでしょう。
目次
蛍光マーカーを引く
ピンクの蛍光ペンでマーカーを引く
リアルな質感を出すため、境界に若干グラデーションをかける
まず、ピンクの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()はグラデーションを実現します。上から下、下から上に限らず、斜めにグラデーションも。開始位置、終了位置の指定方法など具体例をあげながら解説。