こんにちは! 最近・・・でもないですが、HP上で蛍光ペンでマーカーを付けた感じにする方法を気になっていた あますた（@amaguristar)です。
　わりと前から「お？良いなこれ！」と思いつつも、いっこうに調べようともしていませんでした。「これではいかん！」と気を引き締めて？の今回です。あまり長々と書いてもしょうがないので、サクッとメモします。

マーカーのcssの書き方

　一番簡単な方法は背景色をつけること。スタイルシートをサクッといじってクラスを登録します。例として[style.css]ファイルに追加します。

.mark_yellow {
	background: #ffea00;
}

実際のhtmlファイルで使う時はこんな感じ。

<span class="mark_yellow">黄色の蛍光ペン</span>

結果：　黄色の蛍光ペン

こんな風に表示されていれば成功です。「あれ？太くない」と思った方、自分もそう思いますw
　でも、安心してください！　細くできます！！

マーカーの太さを変える

　太さを変えるにはlinear-gradient関数を使用します。

.mark_yellow_2 {
	background: linear-gradient(transparent 70%, #ffea00 70%);
}

結果: 細い黄色の蛍光ペン

linear-gradient関数の引数について

　気になる引数の説明です。

linear-gradient(transparent 70%, #ffea00 70%)

transparent

これは説明してもしょうがないのでそのまま書いてしまいましょう。C言語を勉強する際に良く言われる魔法の言葉？的な感じです(最近は教え方違うのかな？)。
　自分も今回初めて使用する関数なので間違ってるかもしれませんが、恐らく「HPの元からある背景色と同じ色」を選択しているのではないかな？って感覚です(いろいろ実験した結果)。詳しくは、各自調べてください。

70%

これがマーカーの太さを決めている値です。「70%なのに細いけど？」と思った方「自分も思いましたw」なもんでいろいろ試した結果「transparent値のパーセンテージだな」ってことです。つまり元の背景色の割合を決めているってことです。必然的に残った30%がマーカーの太さになるって理屈だと思います。

#ffea00 70%

この『#ffea00』がマーカーの色です。ここで選択した色が表示されます。その次の「70%」ですが、これは”transparentの後の％と同じ値”にしましょう。この値は恐らくマーカーが始まる位置を設定していると思うのですが、説明するのが難しいので割愛します。ど〜しても気になる人は各自で検索お願いします。

まとめ

　HPの文章を蛍光ペンでマークする時は、

background: linear-gradient(transparent マーカーの太さ, マーカー色 マーカーの太さと同じ値)

と覚えていれば問題無いと思います。
　関数の引数の説明については完全に理解しているとは言えません。そのため、間違えている箇所があれば教えて頂ければ助かります。

追伸：マーカーの色を選択する時に便利な色辞典へのリンクを貼っておきますので参考にしてください。

参考：和色大辞典