CSS 蛍光ペンで文字を強調する方法
最初にCSSに以下をコピペしておきます。
.marker-lightbulue{
background: linear-gradient(transparent 40%,
#e6f9ff 40%, #a8eaff 80%, #e6f9ff 100%);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.marker-green{
background: linear-gradient(transparent 40%,
#ccffd5 40%, #80ff97 80%, #ccffd5 100%);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.marker-yello{
background: linear-gradient(transparent 40%,
#ffefcc 40%, #ffdf99 80%, #ffefcc 100%);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.marker-red{
background: linear-gradient(transparent 40%,
#ffccd4 40%, #ff8095 80%, #ffccd4 100%);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.marker-purple{
background: linear-gradient(transparent 40%,
#e6ccff 40%, #c180ff 80%, #e6ccff 100%);
border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
<span>タグで強調したい部分を囲み、クラスを指定する。
<p>CSS 蛍光ペンで文字を<span
class="marker-lightbulue">強調する </span> 方法</p>
<p>CSS 蛍光ペンで文字を<span class="marker-green">強調する
</span> 方法</p>
<p>CSS 蛍光ペンで文字を<span class="marker-yello">強調する
</span> 方法</p>
<p>CSS 蛍光ペンで文字を<span class="marker-red">強調する
</span> 方法</p>
<p>CSS 蛍光ペンで文字を<span class="marker-purple">強調する
</span> 方法</p>
こんな感じになります。
CSS 蛍光ペンで文字を強調する 方法
CSS 蛍光ペンで文字を強調する 方法
CSS 蛍光ペンで文字を強調する 方法
CSS 蛍光ペンで文字を強調する 方法
CSS 蛍光ペンで文字を強調する 方法
