最終更新日：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 |
最後の数字 |
|
ペンの太さ |
色名称 カラーコード |
透過率 大きくなるほど、透けやすい |
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 |
たぶん、言葉でも#で始まるカラーコードでもどちらも大丈夫だと思いますが、ご心配な方はカラーコードを使った方が安心です。
他の色は、以下のサイトを参考にしてください。
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へ戻る
