【簡単】CSSを使って蛍光マーカー風の下線を引く方法【linear-gradientを使おう】
CSSを使って蛍光マーカー風の下線をテキストに引きたい。
蛍光マーカーの太さ・透過率も調節できるようにしたい。
本記事ではCSSのグラデーション（linear-gradient）を使って、このような悩みを解決します。
実装サンプル
See the Pen
Untitled by Kohei (@kouk05)
on CodePen.0
実装サンプルです。
異なる太さ・透過率の蛍光マーカー線が実装されてます。
導入方法は以下の通りです。
CSSコード例
/* 透過無、100%*/
.maker01 {
background:linear-gradient(transparent 0%, green 0%);
}
/* 透過無、60%*/
.maker02 {
background:linear-gradient(transparent 60%, yellow 60%);
}
/* 透過有、100%*/
.maker03 {
background:linear-gradient(transparent 0%, red 100%);
}
/* 透過有、50%*/
.maker04 {
background:linear-gradient(transparent 50%, blue 100%);
}
蛍光マーカー線のＣSSサンプルコードです。
CSSでマーカーを引くにはlinear-gradient関数を使い、グラデーションを用います。
backgroundプロパティ内でlinear-gradient関数を定義、色と割合（％）を二種類続けて指定します。
１種類は透明度を表すtransparent、2種類目に任意の蛍光色を指定します。
基本的に同じ割合（％）で数値を低くすると全体的に蛍光色がかかったマーカ線になります。
つまり太くなります。
逆に同じ割合（％）で数値を高くすると背景の一部を割合（％）分だけ蛍光線を引くマーカー線になります。
細くなります。
上記の調節で蛍光マーカー線の太さを決めれます。
マーカーを少し透過させ、グラデーションを入れたい場合は、transparent（透明）の割合を、蛍光線の割合に対して低くすればOKです。
以上の流れで実装完了です。
まとめ
text-decorationプロパティでもテキストに下線を付けれますが、あまり目立たないかと思います。
強調してある部分のテキスト表示したい場合は本記事を参考に蛍光マーカー線を導入してみてください。
以上で解説を終わります。
目次
