CSSで文字にマーカーっぽい線を引く方法/background:linear-gradientの使い方

person IT

ブログやホームページをやっているとだんだん欲が出てくるもので、文字の色を変えたいとか、背景色変えたいとか、マーカーっぽく線を引きたいとか出てくるものですがこちらはマーカー編となります。

Advertisements

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>
CSSの便利な使い方・プロパティ逆引きリファレンス
HTMLと合わせてぜひマスターしたい、CSS関連の記事のまとめとなります。プロパティの名称と使用用途を合わせて併記しています。 ちょっととっても数少ないですが、段々増える予定です。

コメント