【CSS】知らなきゃ損!CSSで蛍光ペンのようにラインを引く方法とは??【CSS】知らなきゃ損!CSSで蛍光ペンのようにラインを引く方法とは??2016.03.05CSS時たま、いろいろなサイトを見ていると文字を蛍光ペンのようなものでラインを引いたような装飾をしているところを見かけます。まとめCSSの記述例それでは、実際にCSSにはどのように記述すればよいのかご紹介したいと思います。今回は例として、<span>~</span>に囲まれている文字を黄色の蛍光ペンでラインを引いたように装飾した設定だと、以下のように記述します。50%)この中の#ffff00に当たる部分にラインを引きたい希望の色のカラーコードを指定します。今回は黄色でラインを引きたかったため、#ffff00と指定しました。ラインの太さを決める続いて、ラインの太さを決めます。50%の数値で決まります。ラインの太さをテキストテキストテキストこのように太くしたい場合は、transparentの数値を小さくすることでラインを太くすることが可能です。30%に設定しました。ラインのグラデーションを決める続いて、ラインのグラデーションの設定になります。50%)ここでいう2つの%の値は同じにしておいた方が蛍光ペンでラインを引いたような文字装飾をすることが可能なのですが、この部分でいう最後の%の数値(閉じカッコの直前の数値)を変えることでグラデーションをかけることができます。90%)と設定すると、以下のようにグラデーションをかけることができます。テキストテキストテキストちょっとわかりにくくはありますが、白→黄色の変化がグラデーションになっているのがわかりますでしょうか。一応このようにグラデーションを設定することが可能となっています。