CSSでテキストにマーカーをひく方法

HTML&CSS

2021.06.04 2020.04.27

こんにちは。

今日はCSSでテキストを蛍光ペン風にマーカーする方法を調べたので書きます！

マーカーといえば下記のような感じです！

文字を強調したいときなどに使いますよね(^○^)

ではさっそく見ていきましょう！

CSSでテキストを蛍光マーカー風にする方法

まず、使うプロパティ、値は

background: linear-gradient(); です。

linear-gradientは本来グラデーションに使うものですがこんな場面で使えるのですね＾＾

そして、線の太さを設定できたりもします。

線の太さで少し印象も変わってきますし、個人的に一部分だけのマーカーの方が読みやすい気はします！

では、先ほどの画像のCSSを見ていきますね。

.txt {
  font-size: 20px;
  background:linear-gradient(transparent 0%, #b5ff9e 0%);
}

※文字サイズは無視していただいて大丈夫です！

（）の中に transparentを記述したり、数値を％で指定していますね。

ちなみに、マーカーの線が太い場合は０％です。

ちなみに「transparent」とは透明という意味です！

詳しく見ていくとtransparentは固定で、触るのは％の数値と、色の値です。

２つ％を設定する箇所がありますが基本的に同じ値を書くみたいです！

・線を太くしたいなら数値を小さくする（０％とか）
・線を細くしたいなら数値を大きくする

これだけ覚えておけば大丈夫かと思います＾＾

ちなみにこのように一部分のマーカーの場合だと

.txt {
  font-size: 20px;
  background:linear-gradient(transparent 60%, #b5ff9e 60%);
}

数値は60%にしています＾＾

いかがだったでしょうか？

このようにマーカーを引くデザインもあるかと思うので方法を知っていれば慌てなくて済みますね♪( ´▽｀)

では今日まここまで〜〜