【html・cssコピペ】テキストを蛍光ペンで引いたようなラインマーカーで強調する方法【文字下線】

蛍光ペンマーカーのように文字を強調

実はhtmlのタグではラインマーカーはありません。

しかし、CSSで簡単に装飾できます。

ラインマーカーで文字を強調するサンプルコード

CSS

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff33 60%);
}

クラスを「.marker-yellow」にしています。

クラスって何?という方は、こちらを使ってください。

html

<span style=”background: linear-gradient(transparent 60%, #ffff33 60%);”>文字文字文字</span>

強調したい文字をこちらのspanタグで囲うだけです。コピペしてください。

太字にしたい場合

<span style=”font-weight:bold;background: linear-gradient(transparent 60%, #ffff33 60%);”>文字文字文字</span>

こちらをコピペしてください。

色を変えたい場合

「#ffff33」の部分を別の色コードに変えてください。

色コードって何?という人は、こちらを見れば大丈夫です。
https://www.colordic.org/

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です