CSSで蛍光ペンっぽく文字をハイライト

Mark要素でこんな感じになりますがそれとは少し違って少しだけ文字に重なるようにCSSで以下のような感じにします。

どんな感じになるかというとこんな感じになります。

CSSは以下のような感じです。

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

基本はこの形です。

ここに少しだけ余白を与えてこんな感じになります。

ハイライトの色の太さ

ハイライトの色の太さは「transparent 60%」の60%の部分を0%にしていくほど文字に重なります。

ハイライトの色を少なくするのに100%にすると色が消えるので最低でも80%くらいがおすすめです。

0%にしたときの例

こんな感じになります。

.marker {
background: linear-gradient(transparent 0%, #F0FF40 0%);
}

色の変更

色の変更は「#F0FF40 0%」の【#F0FF40】の部分を好きなカラーコードを指定すると変更できます。

0%の部分は変更しなくて大丈夫です。

カラーコードは以下のサイトがわかりやすいです。

色を変更したときの例

こんな感じになります。

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

文字を太字にする場合

font-weightをboldに指定すると太字にできます。

太字にした例

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #F0FF40 0%);
  font-weight: bold;
}

ここに載せている例のようなspan要素じゃなくてstrong要素やb要素を使用する場合は必要ないと思います。

環境によっては必要かも…。

余白を追加したCSS

paddingで色と文字に余白を与えるともう少しだけ蛍光ペンっぽくなるかなと思います。

余白を追加した例

こんな感じになります。

余白なしと画像で並べてみました。

並べてもわかりにくいくらいの変更ですが少しだけ蛍光ペンっぽさが近づいていると思います。

.marker {
  background: linear-gradient(transparent 60%, #F0FF40 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

paddingのショートハンドを利用しています。

左の数値から0が上の余白 0.4emが右の余白 0.1emが下の余白 0.4emが左の余白です。

時計回りに余白の数値を指定することができます。

内容は文字を少しだけ超えてハイライトするようにして、文字の下の部分のハイライトを少しだけずらしています。

できるだけ文字を読みやすくを意識してますが環境によって違ったりすると思うので適宜、数値を調整してください。

いろいろな色

余白を追加したCSSでいろいろな色の例を載せていきます。

CSSを掲載してますが、クラス名はすべて「marker」となっているので複数の色を使う場合は変更して使ってください。

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #E0F6B9 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #E0D03D 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #F9C7DD 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #E37FA4 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #F5E4AE 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #E88A6E 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #BAD7DC 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #8BA7D8 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #BADED6 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #90BFCA 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #A9D366 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #C6AAE1 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #D653CD 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #B99186 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}

こんな感じになります。

.marker {
  background: linear-gradient(transparent 60%, #B7BCBF 0%);
  font-weight: bold;
  padding: 0 0.4em 0.1em 0.4em;
}