備忘録的プログラミングリファレンス

text-decorationプロパティ

　text-decorationプロパティは、テキストへの下線、上線、取り消し線、2重線などを指定するプロパティです。 色や線種も指定することができます。
　CSSでは、text-decorationプロパティはテキストへの装飾という扱いです。 テキストに赤い下線を付けるといったことができます。

　text-decorationプロパティは以下のプロパティの一括指定ができます。

　text-decoration-lineプロパティの値は必ず指定する必要があります。

赤い波の下線（Exampleを参照）
text-decoration: underline red wavy;

マーカーのような線を加えるにはbackgroundプロパティにlinear-gradient()関数を使います。

関連プロパティ

　フォントやテキストを装飾するには、以下のような関連するプロパティがあります。

background:linear-gradient();マーカー
font-size/line-height大きさ/行間
font-weight太字
text-decoration下線、上線、取り消し線、2重線など
text-decoration-colortext-decorationの色
text-decoration-line下線、上線、取り消し線、2重線
text-decoration-style無地、波状、点線、破線、二重
text-shadowテキストに影を付ける
text-transform大文字、小文字、全角文字の表記
text-underline-position下線の位置の指定

構文(Syntax)

CSS

text-decoration: [ text-decoration-line text-decoration-color text-decoration-style ] | initial | inherit;

DOM(JavaScript)

値の取得
String = object.style.textDecoration;
値の設定
object.style.textDecoration="[ text-decoration-line text-decoration-color text-decoration-style ] | initial | inherit";

値（Values）

Value摘要
text-decoration-line下線、上線、取り消し線、2重線など
text-decoration-color線の色、CSS Colorを参照のこと
text-decoration-style線の種類、点線、破線など
initial初期値に戻す
inherit親エレメントのプロパティを継承

備考（Remarks）

初期値（Default value）none currentcolor solid
継承（Inherited）No
CSS AnimationNo

Example

　text-decorationの例です。テキストに赤い下線を付けるといったことに便利です。