AMANOJAKU.NET

テキストとは異なる色で下線を引く

下線(underline)・上線(overline)・取り消し線(line-through)などの修飾はテキストと同じ色になってしまうのですが、これらを別々の色で指定する方法です。

簡単そうに思えるのですが、なかなかのクセモノで、かなり新しいブラウザでないと意図したとおりの結果を得ることができません。ですから、使用する際は視覚表現に頼った内容は避けるようにしてください。例えば、次の文章は下線の色を区別させないといけなくなるため、良くありません。やめましょう。

赤い線を引いた箇所は○○○で、青い線は×××。」

# そもそもHTMLの視覚表現はUA依存のため、こういったことはタブーなのでですが…。

【Strictな方法】

HTML4.01で推奨されないタグは用いないというのであれば、次のようにします。

<SAPN style="text-decoration:underline; color:red">
    <SPAN style="text-decoration:none; color:blue">青いテキストに赤の下線?</SPAN>
</SPAN>
青いテキストに赤の下線?

Mozilla(NN6+)、IE6、Opera6で期待通どおりの結果を得ることができますが、CSS非対応なブラウザはおろか、NN4やIE5ですら下線がなくなります。

【Transitionalな方法】

なので、修飾(この場合は下線)についてはスタイルシート(text-decoration)を用いず、同様の役割を持つタグで代替してみましょう。

<U style="color:red"><SPAN style="color:blue">下線は表示されます</SPAN></U>
下線は表示されます

やはり、期待通りの結果を得るブラウザは【Strictな方法】と変わらないのですが、他の(たいていの)ブラウザでも下線が消えることはありません。(いまのところ。)

あとがき

UA依存といっても、レイアウトが崩れるような類のものじゃありませんので、どちらの書き方でもよいかもしれません。とはいえ、「下線なんて消えてしまってもいいよ」というくらいなら最初から引きません。ましてや、打ち消し線なんかが消えてもらっちゃ困ります。

そのあたりを考えると、(現時点では)Transitionalな方法が無難ではないかと思います。効果のほどはともかく、下線とかが残っていれば、「強調してるんだなぁ」というニュアンスは伝えることができますので。

参考


もどる