【CSS】CSSで文字を蛍光ペンのようなマーカーを付けて綺麗に装飾する方法！

CSSも年々進化し、画像等を使用しなくてもCSSだけで幅広く文字を装飾できるようになりました。
読みやすい文章にすることは、サイトにとって必須ですよね。
CSSで文字を装飾して、多くの読者を獲得しましょう！

蛍光ペンのようなマーカー

まずはサンプルをご確認下さい。
サンプル1サンプル1サンプル1

<span style="background: linear-gradient(transparent 20%, #64e291 20%);">サンプル1サンプル1サンプル1</span>

サンプル2サンプル2サンプル2

<span style="background: linear-gradient(transparent 40%, #e6e56c 40%);">サンプル2サンプル2サンプル2</span>

サンプル3サンプル3サンプル3

<span style="background: linear-gradient(transparent 70%, #b6ffea 70%);">サンプル3サンプル3サンプル3</span>

サンプル4サンプル4サンプル4

<span style="background: linear-gradient(transparent 100%, #ffb3b3 100%);">サンプル4サンプル4サンプル4</span>

transparentが背景を透過することで実現しているため、%の大きさが透過度となっています。
つまり、100%にすると透過度が100%となるため、サンプル4のようにマーカーが表示されなくなります。数字が大きいほど線が細くなるのが特徴です。
カラーコードの方の%は高さとなるため、transparentの方の%と同値にすることが基本となっています。

また、mark要素でも代用可能です。

<mark>MARKMARKMARK</mark>

MARKMARKMARK

Related Posts