HTMLでの蛍光ペンのようなマーカーのつけ方をまとめておきます。
よく見るこの蛍光マーカーのつけ方を調べてみましたのでHTML初心者の方の参考になればと思います。
この記事では以下のような蛍光ペンのマーカーのつけ方を説明しています。
まずは、HTML編集のところに以下を貼り付けてください。
<ul>
<li>蛍光ペンのマーカー<strong class="marker_line0">太さ０％</strong></li>
<li>蛍光ペンのマーカー<strong class="marker_line20">太さ２０％</strong></li>
<li>蛍光ペンのマーカー<strong class="marker_line40">太さ４０％</strong></li>
<li>蛍光ペンのマーカー<strong class="marker_line60">太さ６０％</strong></li>
<li>蛍光ペンのマーカー<strong class="marker_line80">太さ８０％</strong></li>
</ul>
次に、デザインCSSに以下の内容を貼り付けてください。
.marker_line0 {
background: linear-gradient(transparent 0%, #F7FE2E 0%);
}
.marker_line20 {
background: linear-gradient(transparent 20%, #F7FE2E 0%);
}
.marker_line40 {
background: linear-gradient(transparent 40%, #F7FE2E 0%);
}
.marker_line60 {
background: linear-gradient(transparent 60%, #F7FE2E 0%);
}
.marker_line80 {
background: linear-gradient(transparent 80%, #F7FE2E 0%);
}
・#F7FE2E は蛍光の黄色です。好きな色に変えてください。
結構簡単にできます。
HTMLをコツコツ勉強して楽しく豊かになりましょう。
読んでいただきましてありがとうございました。
