文字に色塗りする便利な初歩タグ

カテゴリー：デジ

Blog作成に便利な 文字を色塗りして装飾する初歩タグです。コピペできるスタイルシートのタグをまとめました。


スポンサーリンク


文字の背景に緑をつける

<span style="background-color: #b2ffb2; color: #000000;">テキスト</span>


文字の背景に水色をつける

<span style="background-color: #beeeff; color: #000000;">テキスト</span>

色の指定は，
background-color：背景色
color：文字色



文字に緑のマーカーペンを引く

<span style="background: linear-gradient(transparent 60%, #b2ffb2 60%);">テキスト</span>


文字に青のマーカーペンを引く

<span style="background: linear-gradient(transparent 60%, #9eceff 60%);">テキスト</span>


文字に水色のマーカーペンを引く

<span style="background: linear-gradient(transparent 60%, #beeeff 60%);">テキスト</span>


文字に赤のマーカーペンを引く

<span style="background: linear-gradient(transparent 60%, #ffadad 60%);">テキスト</span>


文字にピンクのマーカーペンを引く

<span style="background: linear-gradient(transparent 60%, #ffc0cb 60%);">テキスト</span>


文字に黄色のマーカーペンを引く

<span style="background: linear-gradient(transparent 60%, #fff799 60%);">テキスト</span>


文字にオレンジのマーカーペンを引く

<span style="background: linear-gradient(transparent 60%, #ffce9e 60%);">テキスト</span>

background: linear-gradient
背景色のグラデーション指定。

transparent 60%
テキストの上から 60％分を透明にする。
文字全体を塗るときは，0%にする。



(おまけ) 文字に下線を引く

<span style="text-decoration-color: #ff0000; text-decoration: underline;">テキスト</span>

text-decorationの値は，
underline：下線
overline：上線
line-through：取消し線



スポンサーリンク