ブログやホームページをやっているとだんだん欲が出てくるもので、文字の色を変えたいとか、背景色変えたいとか、マーカーっぽく線を引きたいとか出てくるものですがこちらはマーカー編となります。
backgroundプロパティの使い方
とりあえずマーカーの書き方だけ知りたい方は、以下となります。
background:linear-gradient(transparent 線の太さ%（数字が大きいほど線が細くなる）,線の色 0%)
たとえばbackground:linear-gradient(transparent 80%,lightgrey 0%);のように記述します。ここから先はなんでこう書くのかという話と応用編なので、興味ある方だけどうぞ（さほど長くないです）。
初見background:linear-gradient(transparent..とこられると難しそうに見えますが、実はそうでもないです。まずlinear-gradientの前にbackgroundプロパティというものがあります。
background:値;
たとえばbackground;yellow;と指定すると、このように文字に色をつけることができます。yellowのように「この文字を入力したらこの色」というのが決まっているものもたくさんありますが、カラーコードやrgbaで指定することもできます。たとえば#b0c4deを指定するとこういう色になります。
background:linear-gradientの使い方
gradientはグラデーションや勾配といった意味で、linear-gradientは線上のグラデーションという意味になります。背景にグラデーションを指定する場合にも使います。
background:linear-gradient(方向/角度,開始色,終了色)
※方向/角度は省略可能
これを文字の背景にそのまま適用すると、このような効果になります。
<span style = "background:linear-gradient(white,#b0c4de)">線を引く文章</span>これはこれで味があるというか、なんか懐かしい効果が出ていますが、今回はマーカーを目指しているのでこのままではダメです。
linear-gradientはそれぞれの色の基準位置（どこまで塗るか）を%で指定することが可能です。そこで最初の白（white）に対して70%を指定すると、線が下に偏ります。
<span style = "background:linear-gradient(white 70%,#b0c4de)">線を引く文章</span>上では背景を白から#b0c4deに移行させていますが、ブログによっては背景が白とは限らないので、この白をtransparent（透明）に変更します。背景が白なら見た目は変わりません。
<span style = "background:linear-gradient(transparent 70%,#b0c4de)">線を引く文章</span>この状態だと線が上から下にグラデーション状に色が変わっています。たとえばtransparentの太さを30%にすると、はっきりとグラデーションであることがわかります。
これを単色にするには、後に書く色に0%を付けます。
<span style = "background:linear-gradient(transparent 30%,#b0c4de 0%)">線を引く文章</span>理屈としてはまず最初の色が0～30%まで色をつけて、そこから次の色へグラデーションで色をつけようとします。次の色がたとえば40%である場合は30～40％の間がグラデーションとなり、40%以降はその次の色がもうないので単色となります。30～80%であれば3～8割部分がグラデーションになります。
最後の色の指定が0%であった場合どうなるかというと、最初の色が30%まで引かれて、そこから0%までの間がグラデーションとなります。最初の色を優先すれば色がつき、後の色を優先すれば色がなくなる矛盾が発生しますが、この場合仕様により先につけた色が優先され、結果としてグラデーションのない単色塗りが実現される、ということのようです。
色がtransparentだからではなく、whiteでも同じ結果になります。あとはお好みで線の太さを調節します。
イメージしづらければ、(transparent 30%,#b0c4de 30%)と書いても同じ結果になります。30%から30%までグラデーションとなり、その上下は単色となります。この形で理解していれば、linear-gradient(transparent 30%,#b0c4de 30%,#b0c4de 70%,transparent 70%)のように書くことで、ブツ切りにマーカーを引くことも容易です。
あとはtransparentの%よりも大きい数字に色を置くことで、複数色指定も可能です。
<span style = "background:linear-gradient(transparent 50%,darkkhaki 0%,powderblue 75%,thistle 95%)">複数色指定</span>
コメント