[CSS] 蛍光ペン風の下線をかわいく、きれいにする

細い蛍光ペン風の下線を引きたかったので、それまでの方法をまとめました。

蛍光ペン風の線には、

background: linear-gradient

を使います。

蛍光ペン風の下線の書き方

準備

グラデーションを書く

background: linear-gradient

を使います。

background: linear-gradient(上の色 開始位置, 下の色 開始位置);

background: linear-gradient(transparent 35%, orange 35%, blue 70%);

と書くと、こうなります

最初のtransparentと次の色の%は同じにしないと、中間がグレーになってしまいます。その例を示します。

background: linear-gradient(transparent 10%, orange 35%, blue 70%);

と書くと、こうなります(デバイスやブラウザによって見え方が違うようです)。

蛍光ペンっぽい色にする

background: linear-gradient(transparent 0%, #a8eaff 0%);

と書くと、こうなります

蛍光ペンっぽく、にじませる

次のように、使いたい色の上下を、薄い色で挟みます。

background: linear-gradient(透明, 薄い色, 濃い色, 薄い色);

background: linear-gradient(transparent 10%, #e6f9ff 10%, #a8eaff 80%, #e6f9ff 100%);

と書くと、こうなります

普通の蛍光ペン

background: linear-gradient(transparent 20%, #e6f9ff 20%, #a8eaff 80%, #e6f9ff 100%);

と書くと、こうなります

細い蛍光ペン風(線を丸くする)

準備

線を丸くしておきます。

background-color: blue;

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

と書くと、こうなります

これを、グラデーションにします。(transparentの%を大きくして、線を細くします)

background: linear-gradient(transparent 40%, lightblue 40%, blue 80%, lightblue 100%);

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

と書くと、こうなります

細い蛍光ペン風

これを、蛍光ペンっぽい色で書きます。

background: linear-gradient(transparent 40%, #e6f9ff 40%, #a8eaff 80%, #e6f9ff 100%);

border-top-left-radius: 50px;
border-top-right-radius: 50px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;

と書くと、こうなります

どうでしょう。きれいな蛍光ペン(細いペンで書いたとき)みたいになったのではないでしょうか?

最後に:いろんな色の細い蛍光ペン

いろんな色で書いてみました。よかったら使ってください。
線の両端を丸くする処理は記載を省いてあります(詳しくは 1.3 細い蛍光ペン風(線を丸くする) を見てください)。


サンプルああああああああああああああああああああ

background: linear-gradient(transparent 40%, #e6f9ff 40%, #a8eaff 80%, #e6f9ff 100%);

サンプルああああああああああああああああああああ

background: linear-gradient(transparent 40%, #ccffd5 40%, #80ff97 80%, #ccffd5 100%);

サンプルああああああああああああああああああああ

background: linear-gradient(transparent 40%, #ffefcc 40%, #ffdf99 80%, #ffefcc 100%);

サンプルああああああああああああああああああああ

background: linear-gradient(transparent 40%, #ffccd4 40%, #ff8095 80%, #ffccd4 100%);

サンプルああああああああああああああああああああ

background: linear-gradient(transparent 40%, #e6ccff 40%, #c180ff 80%, #e6ccff 100%);