ど素人から毛を生やす。<延>

CSSで文字に蛍光マーカーを引く技術を考える

Web > css 2015年12月9日(最終更新:1年前)

このページは2015.12.9に作成されています。時代の流れとそぐわない可能性があったり、僕が今以上のど素人だった頃の記事だったりするので、新しい記事を探してみるのも良いかもしれません。

どもです。

お客から貰ったデザインにて、文字にマーカーが引いてあるところがありました。
擬似要素使って色をずらし敷く必要があるかな?と思いましたが、
調べてみると、background:linear-gradient を使ってマーカー風に背景を引く技術が紹介されていました。

参考サイト様
IT便利帳【蛍光ペン風にテキスト上をマーカーするCSSを設定してみた】

しかし、どうして蛍光ペンのように線が引けるのか、ぱっと見ただけではわからなかったので、
分析してみることにしました。

background:linear-gradient とは

そもそも僕は、linear-gradient というものに馴染みがありませんでした。
ので、調べてみると、どうやら線形のグラデーションを作るCSSということが判明。

参考サイト様
HALAWATA.NET【CSS3プロパティ 線形グラデーション】

本来はグラデーションのためのものなんですね。
いわく、その構造はこうなっているそうです。

linear-gradient(left 0deg, red 0%, blue 50%, green 100%);

linear-gradient(開始方向 角度, 開始色 開始位置, 途中色 切り替わり位置, 終了色 切り替わり位置);

途中の色は、いくつ挟んでもおk。
位置を示す数値は、その数値の地点で完全に指定の色になる。

また、このコマンドは完全に対応しているブラウザが少なく(まだ無く?)
対策なしでは開始方向・角度をつけると効かなくなるっぽいです。
基本的にはベンダープレフィックスをつけた記載もしておいて、
複数のブラウザで逐一チェックした方が良さそうです。

とはいえ、マーカーを作る分には開始方向・角度の設定は要らないので(デフォルトが上から下)、
新しいブラウザだけならベンダープレフィックスは不要です。

linear-gradient でマーカー風背景を作る原理

linear-gradient の基本構造がわかったので、マーカーを作ってみます。
マーカーの基本構造は、

background:linear-gradient(transparent 位置%, マーカーの色 位置%);

です。
開始方向・方角は指示しない場合、上から下・角度なしとみなされるので、
開始位置と終了位置のみ指定した形です。
また、開始の色を透明に、終了の色をマーカーの色とします。
このとき、開始位置と終了位置を同じ数値にすると、マーカー風の色が引けるという算段。

つまり、こういうことです。
h271209

グラデーションの開始位置までは開始時点の色(この場合は透明)、
グラデーションの終了以降は終了時点の色(マーカーの色)。

つまり、開始位置と終了位置が同じなら、その数値を境に色がきっぱり分かれるということ。

これを利用してマーカー風背景は作られていたことがわかりました。

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった  (0)
  • (`・ω・´) 役に立った (1)
  • (・∀・) 参考になった (2)