CSSでテキストに蛍光ペンでのマーカー風にする見せ方を実装する方法

テキストを目立たせようと思った時には、色々な方法が考えられます。文字サイズを大きくしたり、文字色を変えたり、フォント自体を変えたり、他にもスクリプトを使ってアニメーションを設定するのも1つですね。

色々な方法がありますが、いくつかのサイトやブログで見かけて個人的に気になっていたCSSを使って蛍光ペンでテキスト上に線を引いた風に見せる方法を紹介します。

CSSでテキストに蛍光ペンでマーキングした風なやつを実装する方法「linear-gradient属性」

1.蛍光ペンで線を引いた風

2.蛍光ペンで線を引いた風(線を細くする)

3.蛍光ペンで線を引いた風(線をさらに細くする)

いかがでしょうか。蛍光ペンで線を引いた風に見えませんか？
html、CSSはこんな感じです。

<span style="background: linear-gradient(transparent 0%, #FF99CC 0%);">
1.蛍光ペンで線を引いた風
</span>

<span style="background: linear-gradient(transparent 50%, #FF99CC 50%);">
2.蛍光ペンで線を引いた風(線を細くする)
</span>

<span style="background: linear-gradient(transparent 80%, #FF99CC 80%);">
3.蛍光ペンで線を引いた風(線をさらに細くする)
</span>

蛍光ペン風を実装するにはlinear-gradient属性を使います。

linear-gradient(transparent 線の太さ, 線の色 0%)

もともとグラデーションを設定するためのコードですが、グラデーションの透明色を利用して線を引いています。

線の太さは、値が小さくするほど太くなります。このサンプルでは上から0%、50%、80%と線の太さを指定しています。値が大きいほど細い線になっていますね。

線の色を変更すれば、違う色の蛍光ペンの出来上がりです。

黄色の蛍光ペンとか水色の蛍光ペンとか緑色の蛍光ペンといった感じで色を変えるだけでも雰囲気は変わってきます。これに線の太さを変えて見せ方を調整してみましょう。

参考（linear-gradientについて詳しい説明)
CSS3 グラデーション（gradient）の指定方法 | CSS Lecture

また、よく利用するパターンとしてCSSのクラスで定義しておけば、色んなところで使えそうです。

クラスとして定義しておく

<style>
.pen_blue{
  background: linear-gradient(transparent 0%, #99ffff 0%);
}
.pen_yellow{
  background: linear-gradient(transparent 0%, #ffff66 0%);
}
.pen_green{
  background: linear-gradient(transparent 0%, #66ffcc 0%);
}
</style>

<span class="pen_blue">青色蛍光ペン</span>
<span class="pen_yellow">黄色蛍光ペン</span>
<span class="pen_green">緑色蛍光ペン</span>

色ごと、線のサイズごとにクラス定義しておけば使い勝手は便利そうですね。

テキストリンクに蛍光ペンを実装

リンクのテキストに対しても同様に蛍光ペンを実装することが可能です。

テキストリンクに蛍光ペンを実装
ネットショップ運営の気になる備忘録

<a style="background: linear-gradient(transparent 0%, #FF99CC 0%);" href="#">
ネットショップ運営の気になる備忘録
</a>

目立たせたいリンクに実装してみるもの良いかもしれません。

テキストリンクのマウスオーバー時に蛍光ペンを実装

また、テキストリンクにマウスオーバーした際に蛍光ペンを実装することも可能です。

テキストリンクのマウスオーバー時に蛍光ペンを実装
ネットショップ出店の候補一覧

<style>
a:hover {background: linear-gradient(transparent 60%, #66ffcc 60%);} 
</style>

<a href="#">ネットショップ出店の候補一覧</a>

リンク付きの商品名やカテゴリ名などに実装すれば面白いかもしれません。

ページ内に多く使いすぎるとごちゃごちゃした感じになってしまうかもしれません。バランスを考えて実装すれば、ワンポイントで目立たせるには面白い方法ですね。ぜひ、活用してみてください。