時たま、いろいろなサイトを見ていると文字を蛍光ペンのようなものでラインを引いたような装飾をしているところを見かけます。
例えば下のような感じ。
これ、どうやっているんだろう？と調べてみると、なんとCSSで装飾することが可能なんですね！
ということで、今回は蛍光ペンのようにラインを引いたかのような装飾をCSSで設定する方法をご紹介したいと思います！
CSSの記述例
それでは、実際にCSSにはどのように記述すればよいのかご紹介したいと思います。
今回は例として、<span>～</span>に囲まれている文字を黄色の蛍光ペンでラインを引いたように装飾した設定だと、以下のように記述します。
span {
background: linear-gradient(transparent 50%, #ffff00 50%);
}
ラインの色を決める
まず、ラインの色を決めるには、
(transparent 50%, #ffff00 50%)
この中の#ffff00に当たる部分にラインを引きたい希望の色のカラーコードを指定します。
今回は黄色でラインを引きたかったため、#ffff00と指定しました。
ラインの太さを決める
続いて、ラインの太さを決めます。ラインの太さは、
(transparent 50%, #ffff00 50%)
この部分でいうtransparent 50%の数値で決まります。
もしラインの太さを
このように太くしたい場合は、transparentの数値を小さくすることでラインを太くすることが可能です。
上の例では、transparent 30%に設定しました。
ラインのグラデーションを決める
続いて、ラインのグラデーションの設定になります。
基本的には、
(transparent 50%, #ffff00 50%)
ここでいう2つの%の値は同じにしておいた方が蛍光ペンでラインを引いたような文字装飾をすることが可能なのですが、この部分でいう最後の%の数値(閉じカッコの直前の数値)を変えることでグラデーションをかけることができます。
試しに
(transparent 50%, #ffff00 90%)
と設定すると、以下のようにグラデーションをかけることができます。
ちょっとわかりにくくはありますが、白→黄色の変化がグラデーションになっているのがわかりますでしょうか。
一応このようにグラデーションを設定することが可能となっています。
ただ、基本的には2つの%の数値は同じにしておいた方が蛍光ペンでラインを引いたように文字装飾することができるので、通常は2つの%の数値は同じにしておくのをオススメします(^^;)
まとめ
以上がCSSで蛍光ペンのようにラインを引く方法になります！
近年では文字を強調する際に文字の色を変えるのではなく、今回のように蛍光ペンでラインを引いて強調させるデザインが流行っているらしいので、是非とも使ってみてください！
