[CSS]テキストにマーカーのような背景を適用する方法とサンプル

CSSプロパティ

2017.02.17

テキストに蛍光ペンで線を引いたような背景色を適用させる方法のご紹介です。

CSSでテキストにグラーションの背景を指定してあげることで、マーカーを引いたようなの見せ方ができるようになります。

マーカーを引いたような背景
1. 背景色と線の太さの調整
デモ

マーカーを引いたような背景

具体的なコードはこんな感じです。

.text	{
	background:linear-gradient(#FFFFFF 0% , #FEFE98 75%)
}

.text {

background:linear-gradient(#FFFFFF 0% , #FEFE98 75%)

}

↓class=”text”を指定した文字が、以下のようなマーカー風の見え方になります。

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。

背景色と線の太さの調整

マーカーの背景色はもちろん変更可能ですし、グラデーションのパーセンテージを調整することで線を細く見せることも可能です。

.text2	{
	background:linear-gradient(#FFFFFF 80% , #FFCCFF 20%)
}

.text2 {

background:linear-gradient(#FFFFFF 80% , #FFCCFF 20%)

}

あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモリーオ市、郊外のぎらぎらひかる草の波。またそのなかでいっしょになったたくさんのひとたち、ファゼーロとロザーロ、羊飼のミーロや、顔の赤いこどもたち、地主のテーモ、山猫博士のボーガント・デストゥパーゴなど、いまこの暗い巨きな石の建物のなかで考えていると、みんなむかし風のなつかしい青い幻燈のように思われます。では、わたくしはいつかの小さなみだしをつけながら、しずかにあの年のイーハトーヴォの五月から十月までを書きつけましょう。