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

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

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

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」∠)_ 面白かった (1)
  • (`・ω・´) 役に立った (1)
  • (・∀・) 参考になった (6)