アンダーラインのカラー

質問

よろしくお願いします。

ウェブページの作成過程で、アンダーライン(文字の下に引く線)を引きたいと思いました。
でも、そのアンダーラインのカラーをスタイルシートで指定する方法がわかりません。

もしご存知の方がいらっしゃいましたら、
教えてくださると助かります。

回答No.1

noname#199778 · ベストアンサー

アンダーラインの引き方としては、「text-decoration: underline;」というスタイルシートで指定するのが一般的だと思います。 ただ、これでアンダーラインを引いた場合、その部分での文字色と同じ色のアンダーラインが引かれると思います。
この方法でアンダーラインを引いた場合に、テキストの色とアンダーラインの色を別にしたいときは、そのアンダーラインを引いている箇所の内側でさらに文字色指定をするスタイルシート指定を重ねる方法もありますが、少々実用性には欠けるのではないかと思います。

別の方法としては、アンダーラインを引きたい箇所を<span>タグで囲い、そのボックスの下の境界にボーダーラインを指定する方法も一応は代用できるのではないかと思います。 この場合は、ボーダーラインの体裁や太さ、色などを自由に指定できます。 ただ、もともとアンダーラインを引くためのものではないので、若干アンダーラインの位置に違和感が出るかもしれませんし、意図通りに行かない可能性もあります。

少々的を射ない話で失礼しました。 参考になれば幸いです。

お礼

lead1976 さん、アドバイスありがとうございます！
なるほど、スタイルシートでアンダーラインの色を変える直接的な指定方法はないのですね。
ちょっとガッカリしてしまいました。

でも、lead1976 さんが代替案を示してくださったので、
とても助かりました。
さっそく、試させて頂きます！