CSSテックラボSMARTのJavaScript講座が書籍になりました。含めた横幅指定ボタンのロールアウトでソナーのようなアニメーションテキストにアンダーラインを付け加えたい場合、CSS属性のtext-decorationの値にunderlineをセットするのが一番簡単な方法です。Hoただし、この方法だとアンダーラインの太さや色を自由に設定することはできません。text-decorationを使う代わりに、background属性を使うと背景の色やサイズをコントロールすることができます。今回は見栄えにこだわり、グラデーションのアンダーラインを作成します。グラデーションはlinear-gradient()関数を使います。)次の例では、SPANで囲ったテキストの背景にグラデーションをかけています。この時点ではアンダーラインというより単なる背景色ですね。Hoそれでは、アンダーラインっぽく見えるように調整してみましょう。グラデーションを掛けたので、アンダーラインの線は太めにします。線のように見せるポイントはbackground-size属性です。background-sizeは色々な指定方法がありますが、ここでは次の構文を使います。縦幅この構文を使って、縦幅を短くすることができます。縦幅の指定を100%以下にすれば線が細くなります。これで短くはなるのですが、このままだと線が上付きになってしまうので、background-position属性にbottomを指定します。Hoロールオーバー時のアニメーションも付け加えてみましょう。transition属性を使い、アニメーションは背景のサイズのフォントのカラーとします。Ho単色でよければ、linear-gradient属性のtransparentでも同様のことができます。linear-gradient属性のtransparentは透かし範囲の指定なので、100%に近くなるほど線が細くなります。HoCodePenでもコードを公開しています。コメントをキャンセルメールアドレスが公開されることはありません。USリズムファクトリーはホームページの制作会社です。ホームページ制作に関するご要望・ご相談はこちらからどうぞ。