【3分でわかる】テキストを蛍光ペン風に装飾するCSSの調整方法

マーカー風にテキストを装飾するCSS

おっさん
テキストを強調するとき、太字だけではちょっと寂しいとき、蛍光ペン風のマーカーを使うでしょ?

蛍光ペン風のマーカー

おっさん
こんな感じ。でも、幅とかがちょっと違和感あるなぁ、と。行の高さがあるとき、黄色やったらまだ目立ちにくいんやけど、他の色やと

蛍光ペン風のマーカー

おっさん
字の下側に色がつきすぎてへん?それでちょっといじってみました。

蛍光ペン風マーカーの作り方

HTML

上のマーカーのところのHTMLは下のような感じ。

CSS

CSSは下のような感じ。

おっさん
この幅を厚くしたい場合、CSSでtransparentを50%から0%に近づけてやるといいんです。たとえば10%にすると

蛍光ペン風のマーカー

 

 

おっさん
と線が太くなるんですわ。でも
若照
それではちょっと物足りんというわけやね?
おっさん
勝手に出てきてわしの言葉を取るなっ!
若照
3分だけやん。帰らなあかんし
おっさん
というわけで、CSSの調整方法ですわ

蛍光ペン風マーカーのCSSを調整する

CSS

CSSは以下のようにしてみます。

おっさん
そしたら、テキスト下部の余分な幅は消えます。

蛍光ペン風のマーカー

おっさん
ほら。どうでっしゃろ?
若照
どうやろ? ちょっと色が変わった?
おっさん
かすれた蛍光ペンという感じやがな。しかも幅もばっちりやろ?
若照
おれは前の方が好きかなー
若照っ子
うちは後の方が好きどすえー
おっさん
ええいっめんどぐさいっ!どっちゃでも好きな方使いやがれっ

好きな色で、アレンジして使ってくださいね

つまり、色を上と下の透明(transparent)ではさむことで、幅や雰囲気を調整できるということです。

どうどすえっっ

このなかからっ

好きなモノをっ

選んでっっっっ

使っとくれっっ

なはれえええぇ

若照
ほなさいなら~っ