CSSでの文字の装飾、蛍光ペンで書いたようなマーカーを付けるのも簡単に出来た。

CSSでの文字の装飾で、蛍光ペンで書いたようなマーカーを付ける方法をやってみた。

文章中の文字を強調したい時によく使われる、
蛍光ペンで書いたようなマーカーを、CSSでも簡単に
表現することが可能です。

この記事では、その方法を書いていきます。

この方法をマスターすれば、文章を強調する方法が
増えます。

文字全体を囲む感じでマーカーを書いた感じ

まずは、定番の文章全体を色付けする感じのマーカー
の場合の方法。黄色のマーカー効果。

黄色マーカーで文字を囲んだ感じ

HTML

<span class="yellow">
  黄色マーカーで文字を囲んだ感じ
</span>

CSS

.yellow {
background-color: #ff9;
}

linear-gradientを使っていろんな効果が可能

次に、linear-gradientを使うと、マーカーラインのサイズ
や透明感の調整も可能なので便利です。

マーカーをつけたい文章を span で囲んで、class名に
markerを付けると、管理がやりやすくなりますよ。

黄色マーカー　細いライン

HTML

<span class="marker-yellow">
  黄色のマーカークラスつけ
</span>

CSS

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

黄色マーカー　太いライン

HTML

<span class="marker-yellow-futo">
  黄色のマーカークラスつけ
</span>

CSS

.marker-yellow-futo {
background: linear-gradient(transparent 10%, #ff9 10%);
}

ピンクマーカー　細いライン

HTML

<span class="marker-pink">
  ピンクのマーカークラスつけ
</span>

CSS

.marker-pink {
background: linear-gradient(transparent 80%, #ff99cc 80%);
}

ピンクマーカー　太いライン

HTML

<span class="marker-pink-futo">
  黄色のマーカークラスつけ
</span>

CSS

.marker-pink-futo {
background: linear-gradient(transparent 10%, #ff99cc 10%);
}

こんな感じで、background: linear-gradient(transparent 10%, #ff99cc 10%);
でマーカーを表現することができるので使ってみてください。

参考になるカラーコード表サイトも参考に載せときます。
いろんなカラーのコードがすぐにわかります。ご使用は自己責任でお願いいたします。

CodePenで確認する

今回のコードをCodePenに残してます。