「のびぃ」の隠れ家

カメラ、旅行、各種ガジェットに関するブログです。

文字の蛍光ペン表示

最終更新日:2022年2月14日

 

蛍光ペン 

ブログ本文中に蛍光ペンを引いたような表示があります。

 

太字とか赤字にするより、目立ちます。

 

TOPへ戻る

 

HTMLタグ 

この蛍光ペンのような表示には、以下のHTMLタグで表現しています。

<span style="background: linear-gradient(transparent 40%, hotpink 70%);">蛍光ペン</span>

蛍光ペン

 

TOPへ戻る

 

お好みの調整

<span style="background: linear-gradient(transparent 40%, hotpink 70%);">

の赤字部分を変更すると、お好みに調整ができます。 

transparentの次の数字

40%

hotpink

最後の数字
70%

ペンの太さ
小さいほど、太くなる

色名称

カラーコード

透過率

大きくなるほど、透けやすい

 

TOPへ戻る

 

太さの違い 

ペンの太さの違いのサンプル(実際には125%サイズ)
<span style="background: linear-gradient(transparent 20%, hotpink 70%);">太め(20%)</span>
<span style="background: linear-gradient(transparent 40%, hotpink 70%);">普通(40%)</span>
<span style="background: linear-gradient(transparent 60%, hotpink 70%);">細め(60%)</span> 

太め(20%) 普通(40%) 細め(60%)

 

なので、85%とかにすると、アンダーラインとして使用できます。

 

TOPへ戻る

 

カラー

色は、以下のカラーコードを参考に、上記の「hotpink」の代わりにお好きなものを選んでください。

hotpink
#ff69b4
yellow
#ffff00
lime
#00ff00
aqua
#00ffff

 

たぶん、言葉でも#で始まるカラーコードでもどちらも大丈夫だと思いますが、ご心配な方はカラーコードを使った方が安心です。

他の色は、以下のサイトを参考にしてください。

www.colordic.org

 

TOPへ戻る

 

透過率の違い

最後のカラーコードの次の数字の透過率ですが、かすれ具合を調整できます。

透過率の違いのサンプル(実際には150%サイズ)
<span style="background: linear-gradient(transparent 40%, hotpink 50%);">50%ペン</span>
<span style="background: linear-gradient(transparent 40%, hotpink 70%);">70%ペン</span>
<span style="background: linear-gradient(transparent 40%, hotpink 90%);">90%ペン</span> 

50%ペン 70%ペン 90%ペン

 

各値は、太さは40%前後で、透過率は70%前後が見やすいかと思います。

 

TOPへ戻る

 

文字サイズのおすすめ 

文字サイズをちょっと大きめ(125%サイズ)にして置くと、さらに見やすいですね。
<span style="background: linear-gradient(transparent 40%, hotpink 70%); font-size: 125%;">125%サイズの文字</span>

標準サイズの文字 125%サイズの文字

 

TOPへ戻る

 

参考:全面塗りの場合 

ちなみに、単に全面塗りつぶしで良い場合には、以下のようにすればOKです。
<span style="background-color:hotpink; font-size: 125%;">全面塗り</span>

蛍光ペンの例 全面塗り

 

TOPへ戻る

 

久しぶりにHTMLタグを思い出しながら作業しました。 

 

TOPへ戻る


本ブログ作成にあたり、参考にしたサイトです。

Copyright © 2017-2021 mnob62