text-decorationの仕様を理解する

この文書内に登場する「テキストの装飾」とは、テキストに下線、上線、取消線を付加するか否かを制御することを指します。これらはtext-decorationプロパティによって設定できますが、これは一見単純な指定のようですが実際はかなり複雑です。誤解の多い仕様ですので、少し詳しく紹介します(ここでは下線についてばかり説明していますが上線、取消線についても適宜読み替えてください)。

アンカーテキストの下線を消すには

ものの本によるとアンカー(リンク)の下線を消すことは良くないことだ、と書かれています。確かに下線があるとアンカーのように見える、という人は多いと思いますが、アンカーに下線が無いサイトが最近は多いですし、また、下線が無いことによってアンカーを見失うということも(あまり)無いのであえてこの方法を紹介します。

いきなり正解を書くと次のようになります。

<a href="http://www.mozilla.gr.jp/" style="text-decoration:none;">もじら組</a>

もじら組

これで正しくtext-decorationを処理できるブラウザではアンカーから下線が取り除かれて表示されているハズです。

しかし、次の様に書くと一見下線が無くなりそうですが実際には消えません。

<a href="http://www.mozilla.gr.jp/"><span style="text-decoration:none;">もじら組</span></a>

もじら組

このサンプルでもIEではアンカーから下線が消えてしまっています。しかし、これは正しい動作ではありません。 IEの拡大解釈によるもので、本来の仕様には違反した動作なのです。

では、もう少しわかりやすい例で書いてみましょう。まずCSS2の仕様書に継承はしないが子孫(インライン要素に限る)には影響するとあります。つまり、text-decorationが指定された時点でテキストの装飾が実行されます。そのため、子要素でこれを取り消すことができないのです。

次のようなパターンを考えてみましょう。

<span style="text-decoration:underline;">
	下線の<span style="text-decoration:none;">サンプル</span>です。
</span>

このレンダリング結果で下線が引かれるのはどこでしょうか? 一見、「サンプル」には下線が引かれなさそうですが、その前に親要素が下線を付加してしまってますので、子要素がこの下線を消してしまうことはできません。つまり、この例での正しいレンダリング結果は全てのテキストに下線が付加されているというのが正解です。

ではあなたのブラウザで実際にレンダリングさせてみましょう。

下線のサンプルです。

どうでしょうか?私の手元にあるブラウザではMozilla、IE6、Opera6では正常に表示されましたが、IE5.0、Netscape4.7ではサンプルの下線が無くなってしまっていました。

上記の理屈がイマイチ分からない人も多いかと思います。そういう人は次のセクションを読めば多少理解しやすくなるかもしれません。

下線の色をコントロールする

テキスト装飾に必要な色はcolorプロパティ(テキストの色)から派生させるべきであるという一節がCSSの仕様書にあります。また注釈では、子要素のcolorが異なったとしても装飾の色を同じにすることが望ましい(should)とも書かれています。

つまり、テキストの色や背景色とは違い、これらの線に対して直接的な色の指定方法は存在しません。そこでまた誤解があるかと思われますので、次の例を見てください。

<span style="color:black;text-decoration:underline;">
	黒いテキスト<span style="color:red;">赤いテキスト</span>黒いテキスト
</span>

黒いテキスト赤いテキスト黒いテキスト

この例での正しいレンダリング結果は赤いテキストの下にも黒い線が引かれているというものです。これまでの説明からわかる様に、color:black;の親要素で下線を生成します。そしてその子要素がcolor:red;としても、 text-decorationは子要素には継承されていませんので線の色を再設定することはないのです。

こちらもMozilla、IE6、Opera6では正常に表示されましたが、IE5.0、Netscape4.7では「赤いテキスト」の下線は赤になってしまいました。

では逆に赤いテキストの下線部は赤にしたい場合もあるかと思います。そういった場合は子要素でtext-decorationを再設定することによって、その子要素の色をテキストの装飾に反映させれば良いという理屈になります。それでは汎用性を持たせるため、親要素のtext-decorationを強制的に継承して、色を再設定させてみましょう。

<span style="color:black;text-decoration:underline;">
	黒いテキスト<span style="color:red;text-decoration:inherit;">赤いテキスト</span>黒いテキスト
</span>

黒いテキスト赤いテキスト黒いテキスト

しかし、この方法ではMozilla、IE5.0は思い通りに表示されましたが、IE6、Opera6でははじめのサンプルと同じ結果でした。更にNetscape4.7では下線そのものが消えてしまいました。では、inheritを使用せずに、直接text-decorationを再設定してみましょう。

<span style="color:black;text-decoration:underline;">
	黒いテキスト<span style="color:red;text-decoration:underline;">赤いテキスト</span>黒いテキスト
</span>

黒いテキスト赤いテキスト黒いテキスト

この手法ならOpera6以外では思い通りの表示を得ることができました。つまりIEはinheritの処理にバグがあり、Operaはtext-decorationそのものの扱いにバグがあるということになります。しかし、これではやはり汎用性がありません。IE6やOpera6のバグの早期修正を望むのみですね。

さて、簡単にですがtext-decorationについて説明させてもらいましたが、実際はもっと多岐にわたるfont指定によって、より複雑な解釈が行われます。 text-decorationを使う場合には必ず全ての手持ちのブラウザで表示確認を行うのが良いでしょう。

Opera7では正常な表示が行われるように修正されています。