text-decorationプロパティ。
CSSに於けるテキストの装飾指定・text-decorationプロパティに関する解説です。
text-decorationプロパティとは。
text-decorationプロパティは、テキストの装飾指定です。
具体的には、
- 下線(アンダライン)
- 上線(オーヴァライン)
- 字消し線
- 点滅
と言った装飾の指定です。
テキスト(インライン要素)に適用されるため、内容となるブロックレヴェル要素には効果が出ません。
text-decorationプロパティの記述例。
例えば、HTMLの<a>要素において、未訪問リンクで下線を付ける場合は、
a:link {text-decoration: underline;}
と記述します。
- このとき、:link擬似クラスを付ける事を忘れないで下さい。
text-decorationプロパティに関する注意事項。
text-decorationプロパティの仕様上の注意。
text-decorationプロパティの継承について。
仕様上、text-decorationプロパティは下位要素には継承しません。
しかしながら、それは下位要素が二重に装飾しないようにするため(下位要素のところで下線などが二重に引かれないようにするため)であり、実際には下位要素にも装飾効果が反映されるようになっております。
具体例。
以下のようなHTMLがあったとします。
<ins>(内容1)<em>(内容2)</em>(内容3)</ins>
これに対して、以下のようなCSSが適用されたとします。
ins {color: #000;text-decoration: underline;}em {color: #f00;}
この場合、(内容1)
及び(内容3)
は黒文字で書かれ、当然黒の下線が引かれます。
(内容2)
は<em>要素の内容となり、赤字で書かれますが、上位要素・<ins>要素のtext-decorationプロパティ値は継承されません。
しかしながら、これは(内容2)
に対して下線が引かれないと言う事ではなく、<em>要素に与えられたプロパティに従った下線(すなわち赤の下線)ではなく、元の<ins>要素のプロパティに従った下線(すなわち黒の下線)がそのまま引かれるという事になります。
- 実際にはここまで正確に実装していないユーザエージェントもままありますが。
text-decorationプロパティの実装上の注意。
ネットスケープ 4.xでの注意事項。
ネットスケープ 4.xでは、overline値はサポートされておりません。
WAP 2.0での注意事項。
WAP 2.0では、text-decorationプロパティは以下の値のみ定義されております。
none値(必須)underline値blink値
但し、none値以外は任意実装です。
- オープンウェーヴ社のWAP 2.0 ウェブブラウザでは三つとも実装されております。