Webサイトのデザインをする際に、テキストを目立たせて表示したい場面が出てきます。

そのひとつ、マーカーで線をひいたように見せるための方法を紹介します。

SPONSORED LINK

HTML/CSSの記述

例としてボールドのデザインを変更する形で、以下のように記述します。

HTML

<b>This is a pen.</b>
CSS

b, strong {
    background: linear-gradient(transparent 40%, #ffedab 0%);
}

backgroundのプロパティに対して、linear-gradient関数を使用して実現します。

linear-gradientはグラデーション表示をするための関数です。

ひとつめの引数で始点の色と位置、ふたつめの引数で終点の色と位置を設定します。

「transparent 40%」の割合を変えることで、マーカーの太さを調節できます。

ここでは始点の色を透明にすることで、線の太さを調整しています。

0%だと全部表示、10%、20%・・・と数値が上がっていくごとに線が細くなります。

「#ffedab 0%」ではマーカーの色を設定しています。

0%にすることでグラデーションにならないようにしていますが、10%、20%・・・と数値を上げることでだんだん薄く表示されるように変更することもできます。

サンプル
linear-gradient(transparent 0%, #ffedab 0%)
linear-gradient(transparent 50%, #ffedab 80%)
linear-gradient(#ffedab 40%,#007199 60%)
SPONSORED LINK

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です