おっさん
テキストを強調するとき、太字だけではちょっと寂しいとき、蛍光ペン風のマーカーを使うでしょ？
蛍光ペン風のマーカー
おっさん
こんな感じ。でも、幅とかがちょっと違和感あるなぁ、と。行の高さがあるとき、黄色やったらまだ目立ちにくいんやけど、他の色やと
蛍光ペン風のマーカー
おっさん
字の下側に色がつきすぎてへん？それでちょっといじってみました。
蛍光ペン風マーカーの作り方
HTML
上のマーカーのところのHTMLは下のような感じ。
<p><span class="marker-green>蛍光ペン風のマーカー</span></p>
CSS
CSSは下のような感じ。
.marker-green {background: linear-gradient(transparent 50%, #76FF03 0%);}
おっさん
この幅を厚くしたい場合、CSSでtransparentを50％から0％に近づけてやるといいんです。たとえば10%にすると
蛍光ペン風のマーカー
.marker-yellow {background: linear-gradient(transparent 10%, #76FF03 0%);}
おっさん
と線が太くなるんですわ。でも
若照
それではちょっと物足りんというわけやね？
おっさん
勝手に出てきてわしの言葉を取るなっ！
若照
3分だけやん。帰らなあかんし
おっさん
というわけで、CSSの調整方法ですわ
蛍光ペン風マーカーのCSSを調整する
CSS
CSSは以下のようにしてみます。
.marker-green {background: linear-gradient(transparent 5%,#76FF03 85%,transparent 10%); }
おっさん
そしたら、テキスト下部の余分な幅は消えます。
蛍光ペン風のマーカー
おっさん
ほら。どうでっしゃろ？
若照
どうやろ？ ちょっと色が変わった?
おっさん
かすれた蛍光ペンという感じやがな。しかも幅もばっちりやろ？
若照
おれは前の方が好きかなー
若照っ子
うちは後の方が好きどすえー
おっさん
ええいっめんどぐさいっ！どっちゃでも好きな方使いやがれっ
好きな色で、アレンジして使ってくださいね
つまり、色を上と下の透明（transparent）ではさむことで、幅や雰囲気を調整できるということです。
どうどすえっっ
このなかからっ
好きなモノをっ
選んでっっっっ
使っとくれっっ
なはれえええぇ
.marker-pink {background: linear-gradient(transparent 5%,#f4f 85%,transparent 10%);}
.marker-pink {background: linear-gradient(transparent 10%, #fbd 85%,transparent 5%);}
.marker-pink {background: linear-gradient(transparent 20%, #fc94fd 80%);}
.marker-blue {background: linear-gradient(transparent 0%, #5bf4f4 70%);}
.marker-blue{background: linear-gradient(transparent 5%,#5bf4f4 85%,transparent 10%);}
.marker-yellow {background: linear-gradient(transparent 5%,#ffff33 85%,transparent 10%); }
若照
ほなさいなら~っ