最終更新日：2022.05.23 [月]　公開日：2018.03.11 [日]　カテゴリー：html・CSS・jQuery・JS備忘

蛍光ペンで強調させるようなこういったスタイルをよく見かけます。
これは「linear-gradient」というスタイルで実装されているのですが、
私もなんとなく使っており、本当の意味を理解していないところもあったので、
今回掘り下げと同時に様々な蛍光ペン的なスタイルを見ていこうと思います。

linear-gradientとはそもそも何なのか

端的に言えば、線形グラデーションを作るスタイルですよね。
割と複雑なグラデーションを作るときなんかは私はいつもジェネレーターさまのお世話になっております。
（ベンダープレフィックスも自動で出してくれるので。。。）

蛍光ペン風になるのはなんで？その理屈に迫る

linear-gradient( 開始色, 終了色);
と言う形を基本にして蛍光ペンを作りましょう。

linear-gradient( 開始色, 終了色);
で作っていくわけですが、

基本は
linear-gradient(transparent 場所%, 蛍光ペンの色 場所%);
がベースになるんですね。
もっとわかりやすく書くと・・・

linear-gradient(transparent 切り替わる位置, 蛍光ペンの色 切り替わる位置);
ってなるので、もしも、

linear-gradient(transparent 次　50%, 蛍光ペンの色 60%);

っとすると、50%の位置から60%の位置の間がグラデーションになってしまうっていうことですね。

上のボックスは以下のスタイルになっているんです。

上のボックスは以下のスタイルになっているんです。

これだとグラデーションになる位置がないのでグラデーションになりません。

この原理を利用して蛍光ペンマーカー風が作られてるんですねえ。

いろんな蛍光ペン

background: linear-gradient(transparent 50%, #ffff66 50%);にしました

background: linear-gradient(transparent 70%, #66ccff 70%);にしました

というように、パーセントの数字が大きいほど細く、小さいほど太いペンになるんですね。
色は好きな色を指定してくださいね。

まとめ

便利に使うAddQuickTag

別記事にあります、AddQuickTagに、これらのスタイルを登録しておくと、非常に便利です。

[プラグイン]記事の装飾を簡単にできる「AddQuicktag」